v2.6.2 — TREK Rebrand, OSM Enrichment, File Management, Hotel Bookings & Bug Fixes

Rebrand:
- NOMAD → TREK branding across all UI, translations, server, PWA manifest
- New TREK logos (dark/light, with/without icon)
- Liquid glass toast notifications

Bugs Fixed:
- HTTPS redirect now opt-in only (FORCE_HTTPS=true), fixes #33 #43 #52 #54 #55
- PDF export "Tag" fallback uses i18n, fixes #15
- Vacay sharing color collision detection, fixes #25
- Backup settings import fix (PR #47)
- Atlas country detection uses smallest bounding box, fixes #31
- JPY and zero-decimal currencies formatted correctly, fixes #32
- HTML lang="en" instead of hardcoded "de", fixes #34
- Duplicate translation keys removed
- setSelectedAssignmentId crash fixed

New Features:
- OSM enrichment: Overpass API for opening hours, Wikimedia Commons for photos
- Reverse geocoding on map right-click to add places
- OIDC config via environment variables (OIDC_ISSUER, OIDC_CLIENT_ID, etc.), fixes #48
- Multi-arch Docker build (ARM64 + AMD64), fixes #11
- File management: star, trash/restore, upload owner, assign to places/bookings, notes
- Markdown rendering in Collab Notes with expand modal, fixes #17
- Type-specific booking fields (flight: airline/number/airports, hotel: check-in/out/days, train: number/platform/seat), fixes #35
- Hotel bookings auto-create accommodations, bidirectional sync
- Multiple hotels per day with check-in/check-out color coding
- Ko-fi and Buy Me a Coffee support cards
- GitHub releases proxy with server-side caching

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+client/node_modules
+server/node_modules
+client/dist
+data
+uploads
+.git
+.env
+*.log
+*.md

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: mauriceboe
+buy_me_a_coffee: mauriceboe

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[FEATURE]"
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/docker.yml

@@ -0,0 +1,80 @@
+name: Build & Push Docker Image
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ${{ matrix.runner }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    steps:
+      - name: Prepare platform tag-safe name
+        run: echo "PLATFORM_PAIR=$(echo ${{ matrix.platform }} | sed 's|/|-|g')" >> $GITHUB_ENV
+
+      - uses: actions/checkout@v4
+
+      - uses: docker/setup-buildx-action@v3
+
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          outputs: type=image,name=mauriceboe/nomad,push-by-digest=true,name-canonical=true,push=true
+          no-cache: true
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Download build digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - uses: docker/setup-buildx-action@v3
+
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Create and push multi-arch manifest
+        working-directory: /tmp/digests
+        run: |
+          mapfile -t digests < <(printf 'mauriceboe/nomad@sha256:%s\n' *)
+          docker buildx imagetools create -t mauriceboe/nomad:latest "${digests[@]}"
+
+      - name: Inspect manifest
+        run: docker buildx imagetools inspect mauriceboe/nomad:latest

.gitignore

@@ -0,0 +1,54 @@
+# Dependencies
+node_modules/
+
+# Build output
+client/dist/
+
+# Generated PWA icons (built from SVG via prebuild)
+client/public/icons/*.png
+
+# Database
+*.db
+*.db-shm
+*.db-wal
+
+# User data
+server/data/
+server/uploads/
+
+# Environment
+.env
+.env.*
+!.env.example
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage
+coverage
+*.lcov
+.nyc_output
+
+# Cache
+.npm
+.eslintcache
+.cache
+*.tsbuildinfo
+*.tgz

Dockerfile

@@ -0,0 +1,39 @@
+# Stage 1: React Client bauen
+FROM node:22-alpine AS client-builder
+WORKDIR /app/client
+COPY client/package*.json ./
+RUN npm ci
+COPY client/ ./
+RUN npm run build
+
+# Stage 2: Produktions-Server
+FROM node:22-alpine
+
+WORKDIR /app
+
+# Server-Dependencies installieren (better-sqlite3 braucht Build-Tools)
+COPY server/package*.json ./
+RUN apk add --no-cache python3 make g++ && \
+    npm ci --production && \
+    apk del python3 make g++
+
+# Server-Code kopieren
+COPY server/ ./
+
+# Gebauten Client kopieren
+COPY --from=client-builder /app/client/dist ./public
+
+# Fonts für PDF-Export kopieren
+COPY --from=client-builder /app/client/public/fonts ./public/fonts
+
+# Verzeichnisse erstellen + Symlink für Abwärtskompatibilität (alte docker-compose mounten nach /app/server/uploads)
+RUN mkdir -p /app/data /app/uploads/files /app/uploads/covers /app/uploads/avatars /app/uploads/photos && \
+    mkdir -p /app/server && ln -s /app/uploads /app/server/uploads && ln -s /app/data /app/server/data
+
+# Umgebung setzen
+ENV NODE_ENV=production
+ENV PORT=3000
+
+EXPOSE 3000
+
+CMD ["node", "--import", "tsx", "src/index.ts"]

LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -0,0 +1,242 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="client/public/logo-light.svg" />
+    <source media="(prefers-color-scheme: light)" srcset="client/public/logo-dark.svg" />
+    <img src="client/public/logo-light.svg" alt="NOMAD" height="60" />
+  </picture>
+  <br />
+  <em>Navigation Organizer for Maps, Activities & Destinations</em>
+</p>
+
+<p align="center">
+  <a href="LICENSE"><img src="https://img.shields.io/badge/License-AGPL_v3-blue.svg" alt="License: AGPL v3" /></a>
+  <a href="https://hub.docker.com/r/mauriceboe/nomad"><img src="https://img.shields.io/docker/pulls/mauriceboe/nomad" alt="Docker Pulls" /></a>
+  <a href="https://github.com/mauriceboe/NOMAD"><img src="https://img.shields.io/github/stars/mauriceboe/NOMAD" alt="GitHub Stars" /></a>
+  <a href="https://github.com/mauriceboe/NOMAD/commits"><img src="https://img.shields.io/github/last-commit/mauriceboe/NOMAD" alt="Last Commit" /></a>
+</p>
+
+<p align="center">
+  A self-hosted, real-time collaborative travel planner with interactive maps, budgets, packing lists, and more.
+  <br />
+  <strong><a href="https://demo-nomad.pakulat.org">Live Demo</a></strong> — Try NOMAD without installing. Resets hourly.
+</p>
+
+![NOMAD Screenshot](docs/screenshot.png)
+![NOMAD Screenshot 2](docs/screenshot-2.png)
+
+<details>
+<summary>More Screenshots</summary>
+
+| | |
+|---|---|
+| ![Plan Detail](docs/screenshot-plan-detail.png) | ![Bookings](docs/screenshot-bookings.png) |
+| ![Budget](docs/screenshot-budget.png) | ![Packing List](docs/screenshot-packing.png) |
+| ![Files](docs/screenshot-files.png) | |
+
+</details>
+
+## Features
+
+### Trip Planning
+- **Drag & Drop Planner** — Organize places into day plans with reordering and cross-day moves
+- **Interactive Map** — Leaflet map with photo markers, clustering, route visualization, and customizable tile sources
+- **Place Search** — Search via Google Places (with photos, ratings, opening hours) or OpenStreetMap (free, no API key needed)
+- **Day Notes** — Add timestamped, icon-tagged notes to individual days with drag & drop reordering
+- **Route Optimization** — Auto-optimize place order and export to Google Maps
+- **Weather Forecasts** — 16-day forecasts via Open-Meteo (no API key needed) with historical climate averages as fallback
+
+### Travel Management
+- **Reservations & Bookings** — Track flights, hotels, restaurants with status, confirmation numbers, and file attachments
+- **Budget Tracking** — Category-based expenses with pie chart, per-person/per-day splitting, and multi-currency support
+- **Packing Lists** — Categorized checklists with progress tracking, color coding, and smart suggestions
+- **Document Manager** — Attach documents, tickets, and PDFs to trips, places, or reservations (up to 50 MB per file)
+- **PDF Export** — Export complete trip plans as PDF with cover page, images, notes, and NOMAD branding
+
+### Mobile & PWA
+- **Progressive Web App** — Install on iOS and Android directly from the browser, no App Store needed
+- **Offline Support** — Service Worker caches map tiles, API data, uploads, and static assets via Workbox
+- **Native App Feel** — Fullscreen standalone mode, custom app icon, themed status bar, and splash screen
+- **Touch Optimized** — Responsive design with mobile-specific layouts, touch-friendly controls, and safe area handling
+
+### Collaboration
+- **Real-Time Sync** — Plan together via WebSocket — changes appear instantly across all connected users
+- **Multi-User** — Invite members to collaborate on shared trips with role-based access
+- **Single Sign-On (OIDC)** — Login with Google, Apple, Authentik, Keycloak, or any OIDC provider
+- **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
+
+### Addons (modular, admin-toggleable)
+- **Vacay** — Personal vacation day planner with calendar view, public holidays (100+ countries), company holidays, user fusion with live sync, and carry-over tracking
+- **Atlas** — Interactive world map with visited countries, travel stats, continent breakdown, streak tracking, and liquid glass UI effects
+- **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
+- **Dashboard Widgets** — Currency converter and timezone clock, toggleable per user
+
+### Customization & Admin
+- **Dark Mode** — Full light and dark theme with dynamic status bar color matching
+- **Multilingual** — English and German (i18n)
+- **Admin Panel** — User management, global categories, addon management, API keys, backups, and GitHub release history
+- **Auto-Backups** — Scheduled backups with configurable interval and retention
+- **Customizable** — Temperature units, time format (12h/24h), map tile sources, default coordinates
+
+## Tech Stack
+
+- **Backend**: Node.js 22 + Express + SQLite (`better-sqlite3`)
+- **Frontend**: React 18 + Vite + Tailwind CSS
+- **PWA**: vite-plugin-pwa + Workbox
+- **Real-Time**: WebSocket (`ws`)
+- **State**: Zustand
+- **Auth**: JWT + OIDC
+- **Maps**: Leaflet + react-leaflet-cluster + Google Places API (optional)
+- **Weather**: Open-Meteo API (free, no key required)
+- **Icons**: lucide-react
+
+## Quick Start
+
+```bash
+docker run -d -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/nomad
+```
+
+The app runs on port `3000`. The first user to register becomes the admin.
+
+### Install as App (PWA)
+
+NOMAD works as a Progressive Web App — no App Store needed:
+
+1. Open your NOMAD instance in the browser (HTTPS required)
+2. **iOS**: Share button → "Add to Home Screen"
+3. **Android**: Menu → "Install app" or "Add to Home Screen"
+4. NOMAD launches fullscreen with its own icon, just like a native app
+
+<details>
+<summary>Docker Compose (recommended for production)</summary>
+
+```yaml
+services:
+  app:
+    image: mauriceboe/nomad:latest
+    container_name: nomad
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+    volumes:
+      - ./data:/app/data
+      - ./uploads:/app/uploads
+    restart: unless-stopped
+```
+
+```bash
+docker compose up -d
+```
+
+</details>
+
+### Updating
+
+**Docker Compose** (recommended):
+
+```bash
+docker compose pull && docker compose up -d
+```
+
+**Docker Run** — use the same volume paths from your original `docker run` command:
+
+```bash
+docker pull mauriceboe/nomad
+docker rm -f nomad
+docker run -d --name nomad -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/nomad
+```
+
+> **Tip:** Not sure which paths you used? Run `docker inspect nomad --format '{{json .Mounts}}'` before removing the container.
+
+Your data is persisted in the mounted `data` and `uploads` volumes — updates never touch your existing data.
+
+### Reverse Proxy (recommended)
+
+For production, put NOMAD behind a reverse proxy with HTTPS (e.g. Nginx, Caddy, Traefik).
+
+> **Important:** NOMAD uses WebSockets for real-time sync. Your reverse proxy must support WebSocket upgrades on the `/ws` path.
+
+<details>
+<summary>Nginx</summary>
+
+```nginx
+server {
+    listen 80;
+    server_name nomad.yourdomain.com;
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name nomad.yourdomain.com;
+
+    ssl_certificate /path/to/fullchain.pem;
+    ssl_certificate_key /path/to/privkey.pem;
+
+    location /ws {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 86400;
+    }
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+</details>
+
+<details>
+<summary>Caddy</summary>
+
+Caddy handles WebSocket upgrades automatically:
+
+```
+nomad.yourdomain.com {
+    reverse_proxy localhost:3000
+}
+```
+
+</details>
+
+## Optional API Keys
+
+API keys are configured in the **Admin Panel** after login. Keys set by the admin are automatically shared with all users — no per-user configuration needed.
+
+### Google Maps (Place Search & Photos)
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Create a project and enable the **Places API (New)**
+3. Create an API key under Credentials
+4. In NOMAD: Admin Panel → Settings → Google Maps
+
+## Building from Source
+
+```bash
+git clone https://github.com/mauriceboe/NOMAD.git
+cd NOMAD
+docker build -t nomad .
+```
+
+## Data & Backups
+
+- **Database**: SQLite, stored in `./data/travel.db`
+- **Uploads**: Stored in `./uploads/`
+- **Backups**: Create and restore via Admin Panel
+- **Auto-Backups**: Configurable schedule and retention in Admin Panel
+
+## License
+
+[AGPL-3.0](LICENSE)

SECURITY.md

@@ -0,0 +1,26 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported |
+|---|---|
+| Latest | Yes |
+| Older | No |
+
+Only the latest version receives security updates. Please update to the latest release.
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability, please report it responsibly:
+
+1. **Do not** open a public issue
+2. Email: **mauriceboe@icloud.com**
+3. Include a description of the vulnerability and steps to reproduce
+
+You will receive a response within 48 hours. Once confirmed, a fix will be released as soon as possible.
+
+## Scope
+
+This policy covers the NOMAD application and its Docker image (`mauriceboe/nomad`).
+
+Third-party dependencies are monitored via GitHub Dependabot.

client/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>TREK</title>
+
+    <!-- PWA / iOS -->
+    <meta name="theme-color" content="#09090b" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="TREK" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/icons/icon-dark.svg" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
+
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "trek-client",
+  "version": "2.6.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node scripts/generate-icons.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-pdf/renderer": "^4.3.2",
+    "axios": "^1.6.7",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.4.1",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.22.2",
+    "react-window": "^2.2.7",
+    "remark-gfm": "^4.0.1",
+    "topojson-client": "^3.1.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.8",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "sharp": "^0.33.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^6.0.2",
+    "vite": "^5.1.4",
+    "vite-plugin-pwa": "^0.21.0"
+  }
+}

client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/public/icons/icon-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" zoomAndPan="magnify" viewBox="0 0 1500 1499.999933" height="2000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="a5b4275efd"><path d="M 45 5.265625 L 1455 5.265625 L 1455 1494.765625 L 45 1494.765625 Z M 45 5.265625 " clip-rule="nonzero"/></clipPath><clipPath id="61932b752f"><path d="M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.753906 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.753906 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z M 1056.105469 333.019531 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#a5b4275efd)"><g clip-path="url(#61932b752f)"><path fill="#000000" d="M 40.597656 5.328125 L 40.597656 1494.671875 L 1459.472656 1494.671875 L 1459.472656 5.328125 Z M 40.597656 5.328125 " fill-opacity="1" fill-rule="nonzero"/></g></g></svg>

client/public/icons/icon-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" zoomAndPan="magnify" viewBox="0 0 1500 1499.999933" height="2000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ff6253e8fa"><path d="M 45 5.265625 L 1455 5.265625 L 1455 1494.765625 L 45 1494.765625 Z M 45 5.265625 " clip-rule="nonzero"/></clipPath><clipPath id="c6b14a8188"><path d="M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.75 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.75 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z M 1056.105469 333.019531 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#ff6253e8fa)"><g clip-path="url(#c6b14a8188)"><path fill="#ffffff" d="M 40.597656 5.328125 L 40.597656 1494.671875 L 1459.472656 1494.671875 L 1459.472656 5.328125 Z M 40.597656 5.328125 " fill-opacity="1" fill-rule="nonzero"/></g></g></svg>

client/public/icons/icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#1e293b"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <clipPath id="icon">
+      <path d="M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.75 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.75 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z"/>
+    </clipPath>
+  </defs>
+  <rect width="512" height="512" fill="url(#bg)"/>
+  <g transform="translate(56,51) scale(0.267)">
+    <rect width="1500" height="1500" fill="#ffffff" clip-path="url(#icon)"/>
+  </g>
+</svg>

client/public/text-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" zoomAndPan="magnify" viewBox="49 2 124 56" height="80" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="c5c1a398e1"><path d="M 49 0.015625 L 174 0.015625 L 174 59.984375 L 49 59.984375 Z M 49 0.015625 " clip-rule="nonzero"/></clipPath><clipPath id="9b226024c5"><rect x="0" width="125" y="0" height="60"/></clipPath></defs><g clip-path="url(#c5c1a398e1)"><g transform="matrix(1, 0, 0, 1, 49, -0.000000000000011803)"><g clip-path="url(#9b226024c5)"><g fill="#000000" fill-opacity="1"><g transform="translate(0.740932, 54.900246)"><g><path d="M 17.53125 0 C 14.15625 0 11.515625 -0.960938 9.609375 -2.890625 C 7.710938 -4.816406 6.765625 -7.414062 6.765625 -10.6875 L 6.765625 -45.484375 L 17.890625 -45.484375 L 17.890625 -11.328125 C 17.890625 -10.765625 18.09375 -10.28125 18.5 -9.875 C 18.90625 -9.46875 19.390625 -9.265625 19.953125 -9.265625 L 27.9375 -9.265625 L 27.9375 0 Z M 0.78125 -27.515625 L 0.78125 -36.5625 L 27.9375 -36.5625 L 27.9375 -27.515625 Z M 0.78125 -27.515625 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(26.403702, 54.900246)"><g><path d="M 3.84375 0 L 3.84375 -25.796875 C 3.84375 -29.128906 4.789062 -31.742188 6.6875 -33.640625 C 8.59375 -35.546875 11.234375 -36.5 14.609375 -36.5 L 25.234375 -36.5 L 25.234375 -27.515625 L 17.328125 -27.515625 C 16.660156 -27.515625 16.085938 -27.285156 15.609375 -26.828125 C 15.128906 -26.378906 14.890625 -25.800781 14.890625 -25.09375 L 14.890625 0 Z M 3.84375 0 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(47.504187, 54.900246)"><g><path d="M 23.234375 0 C 19.097656 0 15.460938 -0.769531 12.328125 -2.3125 C 9.191406 -3.863281 6.753906 -6.003906 5.015625 -8.734375 C 3.285156 -11.460938 2.421875 -14.632812 2.421875 -18.25 C 2.421875 -22.238281 3.25 -25.660156 4.90625 -28.515625 C 6.570312 -31.367188 8.796875 -33.566406 11.578125 -35.109375 C 14.359375 -36.648438 17.4375 -37.421875 20.8125 -37.421875 C 24.664062 -37.421875 27.882812 -36.613281 30.46875 -35 C 33.0625 -33.382812 35.019531 -31.1875 36.34375 -28.40625 C 37.675781 -25.625 38.34375 -22.453125 38.34375 -18.890625 C 38.34375 -18.273438 38.304688 -17.550781 38.234375 -16.71875 C 38.171875 -15.882812 38.09375 -15.226562 38 -14.75 L 14.046875 -14.75 C 14.328125 -13.519531 14.867188 -12.472656 15.671875 -11.609375 C 16.484375 -10.753906 17.503906 -10.125 18.734375 -9.71875 C 19.972656 -9.320312 21.351562 -9.125 22.875 -9.125 L 34.078125 -9.125 L 34.078125 0 Z M 13.75 -21.671875 L 27.65625 -21.671875 C 27.5625 -22.429688 27.414062 -23.164062 27.21875 -23.875 C 27.03125 -24.59375 26.734375 -25.222656 26.328125 -25.765625 C 25.929688 -26.316406 25.472656 -26.789062 24.953125 -27.1875 C 24.429688 -27.59375 23.820312 -27.914062 23.125 -28.15625 C 22.4375 -28.394531 21.664062 -28.515625 20.8125 -28.515625 C 19.71875 -28.515625 18.742188 -28.320312 17.890625 -27.9375 C 17.035156 -27.5625 16.320312 -27.050781 15.75 -26.40625 C 15.175781 -25.769531 14.734375 -25.035156 14.421875 -24.203125 C 14.117188 -23.367188 13.894531 -22.523438 13.75 -21.671875 Z M 13.75 -21.671875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(83.218247, 54.900246)"><g><path d="M 4.140625 0 L 4.140625 -52.03125 L 15.1875 -52.03125 L 15.1875 -22.734375 L 20.03125 -22.734375 L 28.375 -36.5625 L 40.703125 -36.5625 L 30.859375 -21.3125 C 33.710938 -20.125 35.9375 -18.304688 37.53125 -15.859375 C 39.125 -13.410156 39.921875 -10.546875 39.921875 -7.265625 L 39.921875 0 L 28.796875 0 L 28.796875 -7.265625 C 28.796875 -8.597656 28.472656 -9.796875 27.828125 -10.859375 C 27.191406 -11.929688 26.347656 -12.773438 25.296875 -13.390625 C 24.253906 -14.015625 23.066406 -14.328125 21.734375 -14.328125 L 15.1875 -14.328125 L 15.1875 0 Z M 4.140625 0 "/></g></g></g></g></g></g></svg>

client/public/text-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" zoomAndPan="magnify" viewBox="49 2 124 56" height="80" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="7fc4e3f80b"><path d="M 49 0.015625 L 174 0.015625 L 174 59.984375 L 49 59.984375 Z M 49 0.015625 " clip-rule="nonzero"/></clipPath><clipPath id="086ce69399"><rect x="0" width="125" y="0" height="60"/></clipPath></defs><g clip-path="url(#7fc4e3f80b)"><g transform="matrix(1, 0, 0, 1, 49, -0.000000000000011803)"><g clip-path="url(#086ce69399)"><g fill="#ffffff" fill-opacity="1"><g transform="translate(0.740932, 54.900246)"><g><path d="M 17.53125 0 C 14.15625 0 11.515625 -0.960938 9.609375 -2.890625 C 7.710938 -4.816406 6.765625 -7.414062 6.765625 -10.6875 L 6.765625 -45.484375 L 17.890625 -45.484375 L 17.890625 -11.328125 C 17.890625 -10.765625 18.09375 -10.28125 18.5 -9.875 C 18.90625 -9.46875 19.390625 -9.265625 19.953125 -9.265625 L 27.9375 -9.265625 L 27.9375 0 Z M 0.78125 -27.515625 L 0.78125 -36.5625 L 27.9375 -36.5625 L 27.9375 -27.515625 Z M 0.78125 -27.515625 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(26.403702, 54.900246)"><g><path d="M 3.84375 0 L 3.84375 -25.796875 C 3.84375 -29.128906 4.789062 -31.742188 6.6875 -33.640625 C 8.59375 -35.546875 11.234375 -36.5 14.609375 -36.5 L 25.234375 -36.5 L 25.234375 -27.515625 L 17.328125 -27.515625 C 16.660156 -27.515625 16.085938 -27.285156 15.609375 -26.828125 C 15.128906 -26.378906 14.890625 -25.800781 14.890625 -25.09375 L 14.890625 0 Z M 3.84375 0 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(47.504187, 54.900246)"><g><path d="M 23.234375 0 C 19.097656 0 15.460938 -0.769531 12.328125 -2.3125 C 9.191406 -3.863281 6.753906 -6.003906 5.015625 -8.734375 C 3.285156 -11.460938 2.421875 -14.632812 2.421875 -18.25 C 2.421875 -22.238281 3.25 -25.660156 4.90625 -28.515625 C 6.570312 -31.367188 8.796875 -33.566406 11.578125 -35.109375 C 14.359375 -36.648438 17.4375 -37.421875 20.8125 -37.421875 C 24.664062 -37.421875 27.882812 -36.613281 30.46875 -35 C 33.0625 -33.382812 35.019531 -31.1875 36.34375 -28.40625 C 37.675781 -25.625 38.34375 -22.453125 38.34375 -18.890625 C 38.34375 -18.273438 38.304688 -17.550781 38.234375 -16.71875 C 38.171875 -15.882812 38.09375 -15.226562 38 -14.75 L 14.046875 -14.75 C 14.328125 -13.519531 14.867188 -12.472656 15.671875 -11.609375 C 16.484375 -10.753906 17.503906 -10.125 18.734375 -9.71875 C 19.972656 -9.320312 21.351562 -9.125 22.875 -9.125 L 34.078125 -9.125 L 34.078125 0 Z M 13.75 -21.671875 L 27.65625 -21.671875 C 27.5625 -22.429688 27.414062 -23.164062 27.21875 -23.875 C 27.03125 -24.59375 26.734375 -25.222656 26.328125 -25.765625 C 25.929688 -26.316406 25.472656 -26.789062 24.953125 -27.1875 C 24.429688 -27.59375 23.820312 -27.914062 23.125 -28.15625 C 22.4375 -28.394531 21.664062 -28.515625 20.8125 -28.515625 C 19.71875 -28.515625 18.742188 -28.320312 17.890625 -27.9375 C 17.035156 -27.5625 16.320312 -27.050781 15.75 -26.40625 C 15.175781 -25.769531 14.734375 -25.035156 14.421875 -24.203125 C 14.117188 -23.367188 13.894531 -22.523438 13.75 -21.671875 Z M 13.75 -21.671875 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(83.218247, 54.900246)"><g><path d="M 4.140625 0 L 4.140625 -52.03125 L 15.1875 -52.03125 L 15.1875 -22.734375 L 20.03125 -22.734375 L 28.375 -36.5625 L 40.703125 -36.5625 L 30.859375 -21.3125 C 33.710938 -20.125 35.9375 -18.304688 37.53125 -15.859375 C 39.125 -13.410156 39.921875 -10.546875 39.921875 -7.265625 L 39.921875 0 L 28.796875 0 L 28.796875 -7.265625 C 28.796875 -8.597656 28.472656 -9.796875 27.828125 -10.859375 C 27.191406 -11.929688 26.347656 -12.773438 25.296875 -13.390625 C 24.253906 -14.015625 23.066406 -14.328125 21.734375 -14.328125 L 15.1875 -14.328125 L 15.1875 0 Z M 4.140625 0 "/></g></g></g></g></g></g></svg>

client/scripts/generate-icons.mjs

@@ -0,0 +1,29 @@
+/**
+ * Generates PNG icons for PWA from the master SVG icon.
+ * Run: node scripts/generate-icons.mjs
+ * Called automatically via the "prebuild" npm script.
+ */
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const iconsDir = join(__dirname, '..', 'public', 'icons');
+const svgBuffer = readFileSync(join(iconsDir, 'icon.svg'));
+
+const sizes = [
+  { name: 'apple-touch-icon-180x180.png', size: 180 },
+  { name: 'icon-192x192.png', size: 192 },
+  { name: 'icon-512x512.png', size: 512 },
+];
+
+for (const { name, size } of sizes) {
+  await sharp(svgBuffer, { density: 300 })
+    .resize(size, size)
+    .png({ compressionLevel: 9 })
+    .toFile(join(iconsDir, name));
+  console.log(`  \u2713 ${name} (${size}x${size})`);
+}
+
+console.log('PWA icons generated.');

client/src/App.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, ReactNode } from 'react'
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
+import { useAuthStore } from './store/authStore'
+import { useSettingsStore } from './store/settingsStore'
+import LoginPage from './pages/LoginPage'
+import RegisterPage from './pages/RegisterPage'
+import DashboardPage from './pages/DashboardPage'
+import TripPlannerPage from './pages/TripPlannerPage'
+import FilesPage from './pages/FilesPage'
+import AdminPage from './pages/AdminPage'
+import SettingsPage from './pages/SettingsPage'
+import VacayPage from './pages/VacayPage'
+import AtlasPage from './pages/AtlasPage'
+import { ToastContainer } from './components/shared/Toast'
+import { TranslationProvider, useTranslation } from './i18n'
+import DemoBanner from './components/Layout/DemoBanner'
+import { authApi } from './api/client'
+
+interface ProtectedRouteProps {
+  children: ReactNode
+  adminRequired?: boolean
+}
+
+function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps) {
+  const { isAuthenticated, user, isLoading } = useAuthStore()
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="flex flex-col items-center gap-3">
+          <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-900 rounded-full animate-spin"></div>
+          <p className="text-slate-500 text-sm">{t('common.loading')}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  if (adminRequired && user && user.role !== 'admin') {
+    return <Navigate to="/dashboard" replace />
+  }
+
+  return <>{children}</>
+}
+
+function RootRedirect() {
+  const { isAuthenticated, isLoading } = useAuthStore()
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-900 rounded-full animate-spin"></div>
+      </div>
+    )
+  }
+
+  return <Navigate to={isAuthenticated ? '/dashboard' : '/login'} replace />
+}
+
+export default function App() {
+  const { loadUser, token, isAuthenticated, demoMode, setDemoMode, setHasMapsKey } = useAuthStore()
+  const { loadSettings } = useSettingsStore()
+
+  useEffect(() => {
+    if (token) {
+      loadUser()
+    }
+    authApi.getAppConfig().then((config: { demo_mode?: boolean; has_maps_key?: boolean }) => {
+      if (config?.demo_mode) setDemoMode(true)
+      if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
+    }).catch(() => {})
+  }, [])
+
+  const { settings } = useSettingsStore()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      loadSettings()
+    }
+  }, [isAuthenticated])
+
+  useEffect(() => {
+    const mode = settings.dark_mode
+    const applyDark = (isDark: boolean) => {
+      document.documentElement.classList.toggle('dark', isDark)
+      const meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.setAttribute('content', isDark ? '#09090b' : '#ffffff')
+    }
+
+    if (mode === 'auto') {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)')
+      applyDark(mq.matches)
+      const handler = (e: MediaQueryListEvent) => applyDark(e.matches)
+      mq.addEventListener('change', handler)
+      return () => mq.removeEventListener('change', handler)
+    }
+    applyDark(mode === true || mode === 'dark')
+  }, [settings.dark_mode])
+
+  return (
+    <TranslationProvider>
+      <ToastContainer />
+      <Routes>
+        <Route path="/" element={<RootRedirect />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<Navigate to="/login" replace />} />
+        <Route
+          path="/dashboard"
+          element={
+            <ProtectedRoute>
+              <DashboardPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/trips/:id"
+          element={
+            <ProtectedRoute>
+              <TripPlannerPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/trips/:id/files"
+          element={
+            <ProtectedRoute>
+              <FilesPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/admin"
+          element={
+            <ProtectedRoute adminRequired>
+              <AdminPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/settings"
+          element={
+            <ProtectedRoute>
+              <SettingsPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/vacay"
+          element={
+            <ProtectedRoute>
+              <VacayPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/atlas"
+          element={
+            <ProtectedRoute>
+              <AtlasPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </TranslationProvider>
+  )
+}

client/src/api/client.ts

@@ -0,0 +1,253 @@
+import axios, { AxiosInstance } from 'axios'
+import { getSocketId } from './websocket'
+
+const apiClient: AxiosInstance = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// Request interceptor - add auth token and socket ID
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('auth_token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    const sid = getSocketId()
+    if (sid) {
+      config.headers['X-Socket-Id'] = sid
+    }
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+
+// Response interceptor - handle 401
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('auth_token')
+      if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register')) {
+        window.location.href = '/login'
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+export const authApi = {
+  register: (data: { username: string; email: string; password: string }) => apiClient.post('/auth/register', data).then(r => r.data),
+  login: (data: { email: string; password: string }) => apiClient.post('/auth/login', data).then(r => r.data),
+  me: () => apiClient.get('/auth/me').then(r => r.data),
+  updateMapsKey: (key: string | null) => apiClient.put('/auth/me/maps-key', { maps_api_key: key }).then(r => r.data),
+  updateApiKeys: (data: Record<string, string | null>) => apiClient.put('/auth/me/api-keys', data).then(r => r.data),
+  updateSettings: (data: Record<string, unknown>) => apiClient.put('/auth/me/settings', data).then(r => r.data),
+  getSettings: () => apiClient.get('/auth/me/settings').then(r => r.data),
+  listUsers: () => apiClient.get('/auth/users').then(r => r.data),
+  uploadAvatar: (formData: FormData) => apiClient.post('/auth/avatar', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  deleteAvatar: () => apiClient.delete('/auth/avatar').then(r => r.data),
+  getAppConfig: () => apiClient.get('/auth/app-config').then(r => r.data),
+  updateAppSettings: (data: Record<string, unknown>) => apiClient.put('/auth/app-settings', data).then(r => r.data),
+  validateKeys: () => apiClient.get('/auth/validate-keys').then(r => r.data),
+  travelStats: () => apiClient.get('/auth/travel-stats').then(r => r.data),
+  changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
+  deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
+  demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
+}
+
+export const tripsApi = {
+  list: (params?: Record<string, unknown>) => apiClient.get('/trips', { params }).then(r => r.data),
+  create: (data: Record<string, unknown>) => apiClient.post('/trips', data).then(r => r.data),
+  get: (id: number | string) => apiClient.get(`/trips/${id}`).then(r => r.data),
+  update: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
+  delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
+  uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
+  unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
+  getMembers: (id: number | string) => apiClient.get(`/trips/${id}/members`).then(r => r.data),
+  addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier }).then(r => r.data),
+  removeMember: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/members/${userId}`).then(r => r.data),
+}
+
+export const daysApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/days`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
+  delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
+}
+
+export const placesApi = {
+  list: (tripId: number | string, params?: Record<string, unknown>) => apiClient.get(`/trips/${tripId}/places`, { params }).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
+  get: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}`).then(r => r.data),
+  update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
+  searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
+}
+
+export const assignmentsApi = {
+  list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/assignments`).then(r => r.data),
+  create: (tripId: number | string, dayId: number | string, data: { place_id: number | string }) => apiClient.post(`/trips/${tripId}/days/${dayId}/assignments`, data).then(r => r.data),
+  delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/assignments/${id}`).then(r => r.data),
+  reorder: (tripId: number | string, dayId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/reorder`, { orderedIds }).then(r => r.data),
+  move: (tripId: number | string, assignmentId: number, newDayId: number | string, orderIndex: number | null) => apiClient.put(`/trips/${tripId}/assignments/${assignmentId}/move`, { new_day_id: newDayId, order_index: orderIndex }).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/${id}`, data).then(r => r.data),
+  getParticipants: (tripId: number | string, id: number) => apiClient.get(`/trips/${tripId}/assignments/${id}/participants`).then(r => r.data),
+  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds }).then(r => r.data),
+  updateTime: (tripId: number | string, id: number, times: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
+}
+
+export const packingApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/packing/${id}`).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds }).then(r => r.data),
+}
+
+export const tagsApi = {
+  list: () => apiClient.get('/tags').then(r => r.data),
+  create: (data: Record<string, unknown>) => apiClient.post('/tags', data).then(r => r.data),
+  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/tags/${id}`, data).then(r => r.data),
+  delete: (id: number) => apiClient.delete(`/tags/${id}`).then(r => r.data),
+}
+
+export const categoriesApi = {
+  list: () => apiClient.get('/categories').then(r => r.data),
+  create: (data: Record<string, unknown>) => apiClient.post('/categories', data).then(r => r.data),
+  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/categories/${id}`, data).then(r => r.data),
+  delete: (id: number) => apiClient.delete(`/categories/${id}`).then(r => r.data),
+}
+
+export const adminApi = {
+  users: () => apiClient.get('/admin/users').then(r => r.data),
+  createUser: (data: Record<string, unknown>) => apiClient.post('/admin/users', data).then(r => r.data),
+  updateUser: (id: number, data: Record<string, unknown>) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
+  deleteUser: (id: number) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
+  stats: () => apiClient.get('/admin/stats').then(r => r.data),
+  saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
+  getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
+  updateOidc: (data: Record<string, unknown>) => apiClient.put('/admin/oidc', data).then(r => r.data),
+  addons: () => apiClient.get('/admin/addons').then(r => r.data),
+  updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
+  checkVersion: () => apiClient.get('/admin/version-check').then(r => r.data),
+  installUpdate: () => apiClient.post('/admin/update', {}, { timeout: 300000 }).then(r => r.data),
+}
+
+export const addonsApi = {
+  enabled: () => apiClient.get('/addons').then(r => r.data),
+}
+
+export const mapsApi = {
+  search: (query: string, lang?: string) => apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query }).then(r => r.data),
+  details: (placeId: string, lang?: string) => apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang } }).then(r => r.data),
+  placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => r.data),
+  reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => r.data),
+}
+
+export const budgetApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/budget/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
+  setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds }).then(r => r.data),
+  togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
+  perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
+}
+
+export const filesApi = {
+  list: (tripId: number | string, trash?: boolean) => apiClient.get(`/trips/${tripId}/files`, { params: trash ? { trash: 'true' } : {} }).then(r => r.data),
+  upload: (tripId: number | string, formData: FormData) => apiClient.post(`/trips/${tripId}/files`, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  }).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}`).then(r => r.data),
+  toggleStar: (tripId: number | string, id: number) => apiClient.patch(`/trips/${tripId}/files/${id}/star`).then(r => r.data),
+  restore: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/files/${id}/restore`).then(r => r.data),
+  permanentDelete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}/permanent`).then(r => r.data),
+  emptyTrash: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/files/trash/empty`).then(r => r.data),
+}
+
+export const reservationsApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/reservations`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
+}
+
+export const weatherApi = {
+  get: (lat: number, lng: number, date: string) => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => r.data),
+  getDetailed: (lat: number, lng: number, date: string, lang?: string) => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => r.data),
+}
+
+export const settingsApi = {
+  get: () => apiClient.get('/settings').then(r => r.data),
+  set: (key: string, value: unknown) => apiClient.put('/settings', { key, value }).then(r => r.data),
+  setBulk: (settings: Record<string, unknown>) => apiClient.post('/settings/bulk', { settings }).then(r => r.data),
+}
+
+export const accommodationsApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/accommodations`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`).then(r => r.data),
+}
+
+export const dayNotesApi = {
+  list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/notes`).then(r => r.data),
+  create: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days/${dayId}/notes`, data).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/notes/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/notes/${id}`).then(r => r.data),
+}
+
+export const collabApi = {
+  getNotes: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/notes`).then(r => r.data),
+  createNote: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
+  updateNote: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
+  deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
+  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
+  getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
+  createPoll: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
+  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex }).then(r => r.data),
+  closePoll: (tripId: number | string, id: number) => apiClient.put(`/trips/${tripId}/collab/polls/${id}/close`).then(r => r.data),
+  deletePoll: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/polls/${id}`).then(r => r.data),
+  getMessages: (tripId: number | string, before?: string) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
+  sendMessage: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
+  deleteMessage: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
+  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji }).then(r => r.data),
+  linkPreview: (tripId: number | string, url: string) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),
+}
+
+export const backupApi = {
+  list: () => apiClient.get('/backup/list').then(r => r.data),
+  create: () => apiClient.post('/backup/create').then(r => r.data),
+  download: async (filename: string): Promise<void> => {
+    const token = localStorage.getItem('auth_token')
+    const res = await fetch(`/api/backup/download/${filename}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (!res.ok) throw new Error('Download failed')
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+  },
+  delete: (filename: string) => apiClient.delete(`/backup/${filename}`).then(r => r.data),
+  restore: (filename: string) => apiClient.post(`/backup/restore/${filename}`).then(r => r.data),
+  uploadRestore: (file: File) => {
+    const form = new FormData()
+    form.append('backup', file)
+    return apiClient.post('/backup/upload-restore', form, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+  },
+  getAutoSettings: () => apiClient.get('/backup/auto-settings').then(r => r.data),
+  setAutoSettings: (settings: Record<string, unknown>) => apiClient.put('/backup/auto-settings', settings).then(r => r.data),
+}
+
+export default apiClient

client/src/api/websocket.ts

@@ -0,0 +1,139 @@
+// Singleton WebSocket manager for real-time collaboration
+
+type WebSocketListener = (event: Record<string, unknown>) => void
+type RefetchCallback = (tripId: string) => void
+
+let socket: WebSocket | null = null
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+let reconnectDelay = 1000
+const MAX_RECONNECT_DELAY = 30000
+const listeners = new Set<WebSocketListener>()
+const activeTrips = new Set<string>()
+let currentToken: string | null = null
+let refetchCallback: RefetchCallback | null = null
+let mySocketId: string | null = null
+
+export function getSocketId(): string | null {
+  return mySocketId
+}
+
+export function setRefetchCallback(fn: RefetchCallback | null): void {
+  refetchCallback = fn
+}
+
+function getWsUrl(token: string): string {
+  const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
+  return `${protocol}://${location.host}/ws?token=${token}`
+}
+
+function handleMessage(event: MessageEvent): void {
+  try {
+    const parsed = JSON.parse(event.data)
+    if (parsed.type === 'welcome') {
+      mySocketId = parsed.socketId
+      return
+    }
+    listeners.forEach(fn => {
+      try { fn(parsed) } catch (err: unknown) { console.error('WebSocket listener error:', err) }
+    })
+  } catch (err: unknown) {
+    console.error('WebSocket message parse error:', err)
+  }
+}
+
+function scheduleReconnect(): void {
+  if (reconnectTimer) return
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null
+    if (currentToken) {
+      connectInternal(currentToken, true)
+    }
+  }, reconnectDelay)
+  reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
+}
+
+function connectInternal(token: string, _isReconnect = false): void {
+  if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
+    return
+  }
+
+  const url = getWsUrl(token)
+  socket = new WebSocket(url)
+
+  socket.onopen = () => {
+    reconnectDelay = 1000
+    if (activeTrips.size > 0) {
+      activeTrips.forEach(tripId => {
+        if (socket && socket.readyState === WebSocket.OPEN) {
+          socket.send(JSON.stringify({ type: 'join', tripId }))
+        }
+      })
+      if (refetchCallback) {
+        activeTrips.forEach(tripId => {
+          try { refetchCallback!(tripId) } catch (err: unknown) {
+            console.error('Failed to refetch trip data on reconnect:', err)
+          }
+        })
+      }
+    }
+  }
+
+  socket.onmessage = handleMessage
+
+  socket.onclose = () => {
+    socket = null
+    if (currentToken) {
+      scheduleReconnect()
+    }
+  }
+
+  socket.onerror = () => {
+    // onclose will fire after onerror, reconnect handled there
+  }
+}
+
+export function connect(token: string): void {
+  currentToken = token
+  reconnectDelay = 1000
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  connectInternal(token, false)
+}
+
+export function disconnect(): void {
+  currentToken = null
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  activeTrips.clear()
+  if (socket) {
+    socket.onclose = null
+    socket.close()
+    socket = null
+  }
+}
+
+export function joinTrip(tripId: number | string): void {
+  activeTrips.add(String(tripId))
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(JSON.stringify({ type: 'join', tripId: String(tripId) }))
+  }
+}
+
+export function leaveTrip(tripId: number | string): void {
+  activeTrips.delete(String(tripId))
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(JSON.stringify({ type: 'leave', tripId: String(tripId) }))
+  }
+}
+
+export function addListener(fn: WebSocketListener): void {
+  listeners.add(fn)
+}
+
+export function removeListener(fn: WebSocketListener): void {
+  listeners.delete(fn)
+}

client/src/components/Admin/AddonManager.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react'
+import { adminApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useToast } from '../shared/Toast'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase } from 'lucide-react'
+
+const ICON_MAP = {
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase,
+}
+
+interface Addon {
+  id: string
+  name: string
+  description: string
+  icon: string
+  enabled: boolean
+}
+
+interface AddonIconProps {
+  name: string
+  size?: number
+}
+
+function AddonIcon({ name, size = 20 }: AddonIconProps) {
+  const Icon = ICON_MAP[name] || Puzzle
+  return <Icon size={size} />
+}
+
+export default function AddonManager() {
+  const { t } = useTranslation()
+  const dm = useSettingsStore(s => s.settings.dark_mode)
+  const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const toast = useToast()
+  const [addons, setAddons] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadAddons()
+  }, [])
+
+  const loadAddons = async () => {
+    setLoading(true)
+    try {
+      const data = await adminApi.addons()
+      setAddons(data.addons)
+    } catch (err: unknown) {
+      toast.error(t('admin.addons.toast.error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleToggle = async (addon) => {
+    const newEnabled = !addon.enabled
+    // Optimistic update
+    setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
+    try {
+      await adminApi.updateAddon(addon.id, { enabled: newEnabled })
+      window.dispatchEvent(new Event('addons-changed'))
+      toast.success(t('admin.addons.toast.updated'))
+    } catch (err: unknown) {
+      // Rollback
+      setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: !newEnabled } : a))
+      toast.error(t('admin.addons.toast.error'))
+    }
+  }
+
+  const tripAddons = addons.filter(a => a.type === 'trip')
+  const globalAddons = addons.filter(a => a.type === 'global')
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" style={{ borderTopColor: 'var(--text-primary)' }}></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+        <div className="px-6 py-4 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.title')}</h2>
+          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
+            {t('admin.addons.subtitleBefore')}<img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 11, display: 'inline', verticalAlign: 'middle', opacity: 0.7 }} />{t('admin.addons.subtitleAfter')}
+          </p>
+        </div>
+
+        {addons.length === 0 ? (
+          <div className="p-8 text-center text-sm" style={{ color: 'var(--text-faint)' }}>
+            {t('admin.addons.noAddons')}
+          </div>
+        ) : (
+          <div>
+            {/* Trip Addons */}
+            {tripAddons.length > 0 && (
+              <div>
+                <div className="px-6 py-2.5 border-b flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
+                  <Briefcase size={13} style={{ color: 'var(--text-muted)' }} />
+                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    {t('admin.addons.type.trip')} — {t('admin.addons.tripHint')}
+                  </span>
+                </div>
+                {tripAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
+
+            {/* Global Addons */}
+            {globalAddons.length > 0 && (
+              <div>
+                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
+                  <Globe size={13} style={{ color: 'var(--text-muted)' }} />
+                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    {t('admin.addons.type.global')} — {t('admin.addons.globalHint')}
+                  </span>
+                </div>
+                {globalAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface AddonRowProps {
+  addon: Addon
+  onToggle: (addonId: string) => void
+  t: (key: string) => string
+}
+
+function AddonRow({ addon, onToggle, t }: AddonRowProps) {
+  const isComingSoon = false
+  return (
+    <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
+      {/* Icon */}
+      <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}>
+        <AddonIcon name={addon.icon} size={20} />
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{addon.name}</span>
+          {isComingSoon && (
+            <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full" style={{ background: 'var(--bg-tertiary)', color: 'var(--text-faint)' }}>
+              Coming Soon
+            </span>
+          )}
+          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full" style={{
+            background: addon.type === 'global' ? 'var(--bg-secondary)' : 'var(--bg-secondary)',
+            color: 'var(--text-muted)',
+          }}>
+            {addon.type === 'global' ? t('admin.addons.type.global') : t('admin.addons.type.trip')}
+          </span>
+        </div>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{addon.description}</p>
+      </div>
+
+      {/* Toggle */}
+      <div className="flex items-center gap-2 shrink-0">
+        <span className="text-xs font-medium" style={{ color: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {isComingSoon ? t('admin.addons.disabled') : addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+        </span>
+        <button
+          onClick={() => !isComingSoon && onToggle(addon)}
+          disabled={isComingSoon}
+          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+          style={{ background: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
+        >
+          <span
+            className="inline-block h-4 w-4 transform rounded-full transition-transform"
+            style={{
+              background: 'var(--bg-card)',
+              transform: (addon.enabled && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
+            }}
+          />
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/Admin/BackupPanel.tsx

@@ -0,0 +1,435 @@
+import { useState, useEffect, useRef } from 'react'
+import { backupApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { getApiErrorMessage } from '../../types'
+
+const INTERVAL_OPTIONS = [
+  { value: 'hourly',  labelKey: 'backup.interval.hourly' },
+  { value: 'daily',   labelKey: 'backup.interval.daily' },
+  { value: 'weekly',  labelKey: 'backup.interval.weekly' },
+  { value: 'monthly', labelKey: 'backup.interval.monthly' },
+]
+
+const KEEP_OPTIONS = [
+  { value: 1,  labelKey: 'backup.keep.1day' },
+  { value: 3,  labelKey: 'backup.keep.3days' },
+  { value: 7,  labelKey: 'backup.keep.7days' },
+  { value: 14, labelKey: 'backup.keep.14days' },
+  { value: 30, labelKey: 'backup.keep.30days' },
+  { value: 0,  labelKey: 'backup.keep.forever' },
+]
+
+export default function BackupPanel() {
+  const [backups, setBackups] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isCreating, setIsCreating] = useState(false)
+  const [restoringFile, setRestoringFile] = useState(null)
+  const [isUploading, setIsUploading] = useState(false)
+  const [autoSettings, setAutoSettings] = useState({ enabled: false, interval: 'daily', keep_days: 7 })
+  const [autoSettingsSaving, setAutoSettingsSaving] = useState(false)
+  const [autoSettingsDirty, setAutoSettingsDirty] = useState(false)
+  const [restoreConfirm, setRestoreConfirm] = useState(null) // { type: 'file'|'upload', filename, file? }
+  const fileInputRef = useRef(null)
+  const toast = useToast()
+  const { t, language, locale } = useTranslation()
+
+  const loadBackups = async () => {
+    setIsLoading(true)
+    try {
+      const data = await backupApi.list()
+      setBackups(data.backups || [])
+    } catch {
+      toast.error(t('backup.toast.loadError'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const loadAutoSettings = async () => {
+    try {
+      const data = await backupApi.getAutoSettings()
+      setAutoSettings(data.settings)
+    } catch {}
+  }
+
+  useEffect(() => { loadBackups(); loadAutoSettings() }, [])
+
+  const handleCreate = async () => {
+    setIsCreating(true)
+    try {
+      await backupApi.create()
+      toast.success(t('backup.toast.created'))
+      await loadBackups()
+    } catch {
+      toast.error(t('backup.toast.createError'))
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  const handleRestore = (filename) => {
+    setRestoreConfirm({ type: 'file', filename })
+  }
+
+  const handleUploadRestore = (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0]
+    if (!file) return
+    e.target.value = ''
+    setRestoreConfirm({ type: 'upload', filename: file.name, file })
+  }
+
+  const executeRestore = async () => {
+    if (!restoreConfirm) return
+    const { type, filename, file } = restoreConfirm
+    setRestoreConfirm(null)
+
+    if (type === 'file') {
+      setRestoringFile(filename)
+      try {
+        await backupApi.restore(filename)
+        toast.success(t('backup.toast.restored'))
+        setTimeout(() => window.location.reload(), 1500)
+      } catch (err: unknown) {
+        toast.error(getApiErrorMessage(err, t('backup.toast.restoreError')))
+        setRestoringFile(null)
+      }
+    } else {
+      setIsUploading(true)
+      try {
+        await backupApi.uploadRestore(file)
+        toast.success(t('backup.toast.restored'))
+        setTimeout(() => window.location.reload(), 1500)
+      } catch (err: unknown) {
+        toast.error(getApiErrorMessage(err, t('backup.toast.uploadError')))
+        setIsUploading(false)
+      }
+    }
+  }
+
+  const handleDelete = async (filename) => {
+    if (!confirm(t('backup.confirm.delete', { name: filename }))) return
+    try {
+      await backupApi.delete(filename)
+      toast.success(t('backup.toast.deleted'))
+      setBackups(prev => prev.filter(b => b.filename !== filename))
+    } catch {
+      toast.error(t('backup.toast.deleteError'))
+    }
+  }
+
+  const handleAutoSettingsChange = (key, value) => {
+    setAutoSettings(prev => ({ ...prev, [key]: value }))
+    setAutoSettingsDirty(true)
+  }
+
+  const handleSaveAutoSettings = async () => {
+    setAutoSettingsSaving(true)
+    try {
+      const data = await backupApi.setAutoSettings(autoSettings)
+      setAutoSettings(data.settings)
+      setAutoSettingsDirty(false)
+      toast.success(t('backup.toast.settingsSaved'))
+    } catch {
+      toast.error(t('backup.toast.settingsError'))
+    } finally {
+      setAutoSettingsSaving(false)
+    }
+  }
+
+  const formatSize = (bytes) => {
+    if (!bytes) return '-'
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  }
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return '-'
+    try {
+      return new Date(dateStr).toLocaleString(locale, {
+        day: '2-digit', month: '2-digit', year: 'numeric',
+        hour: '2-digit', minute: '2-digit',
+      })
+    } catch { return dateStr }
+  }
+
+  const isAuto = (filename) => filename.startsWith('auto-backup-')
+
+  return (
+    <div className="flex flex-col gap-6">
+
+      {/* Manual Backups */}
+      <div className="bg-white rounded-2xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <HardDrive className="w-5 h-5 text-gray-400" />
+            <div>
+              <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.title')}</h2>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.subtitle')}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={loadBackups}
+              disabled={isLoading}
+              className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
+              title={t('backup.refresh')}
+            >
+              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+            </button>
+
+            {/* Upload & Restore */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".zip"
+              className="hidden"
+              onChange={handleUploadRestore}
+            />
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isUploading}
+              className="flex items-center gap-2 border border-gray-200 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 text-sm font-medium disabled:opacity-60"
+              title={isUploading ? t('backup.uploading') : t('backup.upload')}
+            >
+              {isUploading ? (
+                <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
+              ) : (
+                <Upload className="w-4 h-4" />
+              )}
+              <span className="hidden sm:inline">{isUploading ? t('backup.uploading') : t('backup.upload')}</span>
+            </button>
+
+            <button
+              onClick={handleCreate}
+              disabled={isCreating}
+              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-60"
+              title={isCreating ? t('backup.creating') : t('backup.create')}
+            >
+              {isCreating ? (
+                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              ) : (
+                <Plus className="w-4 h-4" />
+              )}
+              <span className="hidden sm:inline">{isCreating ? t('backup.creating') : t('backup.create')}</span>
+            </button>
+          </div>
+        </div>
+
+        {isLoading && backups.length === 0 ? (
+          <div className="flex items-center justify-center py-12 text-gray-400">
+            <div className="w-6 h-6 border-2 border-gray-300 border-t-slate-700 rounded-full animate-spin mr-2" />
+            {t('common.loading')}
+          </div>
+        ) : backups.length === 0 ? (
+          <div className="text-center py-12 text-gray-400">
+            <HardDrive className="w-10 h-10 mb-3 mx-auto opacity-40" />
+            <p className="text-sm">{t('backup.empty')}</p>
+            <button onClick={handleCreate} className="mt-4 text-slate-700 text-sm hover:underline">
+              {t('backup.createFirst')}
+            </button>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-100">
+            {backups.map(backup => (
+              <div key={backup.filename} className="flex items-center gap-4 py-3">
+                <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
+                  {isAuto(backup.filename)
+                    ? <RefreshCw className="w-4 h-4 text-blue-500" />
+                    : <HardDrive className="w-4 h-4 text-gray-500" />
+                  }
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <p className="font-medium text-sm text-gray-900 truncate">{backup.filename}</p>
+                    {isAuto(backup.filename) && (
+                      <span className="text-xs bg-blue-50 text-blue-600 border border-blue-100 rounded-full px-2 py-0.5 whitespace-nowrap">Auto</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-3 mt-0.5">
+                    <span className="text-xs text-gray-400">{formatDate(backup.created_at)}</span>
+                    <span className="text-xs text-gray-400">{formatSize(backup.size)}</span>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1.5 flex-shrink-0">
+                  <button
+                    onClick={() => backupApi.download(backup.filename).catch(() => toast.error(t('backup.toast.downloadError')))}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-slate-700 border border-slate-200 rounded-lg hover:bg-slate-50"
+                  >
+                    <Download className="w-3.5 h-3.5" />
+                    {t('backup.download')}
+                  </button>
+                  <button
+                    onClick={() => handleRestore(backup.filename)}
+                    disabled={restoringFile === backup.filename}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-amber-700 border border-amber-200 rounded-lg hover:bg-amber-50 disabled:opacity-60"
+                  >
+                    {restoringFile === backup.filename
+                      ? <div className="w-3.5 h-3.5 border-2 border-amber-400 border-t-transparent rounded-full animate-spin" />
+                      : <RotateCcw className="w-3.5 h-3.5" />
+                    }
+                    {t('backup.restore')}
+                  </button>
+                  <button
+                    onClick={() => handleDelete(backup.filename)}
+                    className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Auto-Backup Settings */}
+      <div className="bg-white rounded-2xl border border-gray-200 p-6">
+        <div className="flex items-center gap-3 mb-6">
+          <Clock className="w-5 h-5 text-gray-400" />
+          <div>
+            <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.auto.title')}</h2>
+            <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.auto.subtitle')}</p>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-5">
+          {/* Enable toggle */}
+          <label className="flex items-center justify-between gap-4 cursor-pointer">
+            <div className="min-w-0">
+              <span className="text-sm font-medium text-gray-900">{t('backup.auto.enable')}</span>
+              <p className="text-xs text-gray-500 mt-0.5">{t('backup.auto.enableHint')}</p>
+            </div>
+            <button
+              onClick={() => handleAutoSettingsChange('enabled', !autoSettings.enabled)}
+              className={`relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors ${autoSettings.enabled ? 'bg-slate-900 dark:bg-slate-100' : 'bg-gray-200 dark:bg-gray-600'}`}
+            >
+              <span className={`absolute left-1 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${autoSettings.enabled ? 'translate-x-5' : 'translate-x-0'}`} />
+            </button>
+          </label>
+
+          {autoSettings.enabled && (
+            <>
+              {/* Interval */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.interval')}</label>
+                <div className="flex flex-wrap gap-2">
+                  {INTERVAL_OPTIONS.map(opt => (
+                    <button
+                      key={opt.value}
+                      onClick={() => handleAutoSettingsChange('interval', opt.value)}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                        autoSettings.interval === opt.value
+                          ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border-slate-700'
+                          : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                      }`}
+                    >
+                      {t(opt.labelKey)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Keep duration */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.keepLabel')}</label>
+                <div className="flex flex-wrap gap-2">
+                  {KEEP_OPTIONS.map(opt => (
+                    <button
+                      key={opt.value}
+                      onClick={() => handleAutoSettingsChange('keep_days', opt.value)}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                        autoSettings.keep_days === opt.value
+                          ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border-slate-700'
+                          : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                      }`}
+                    >
+                      {t(opt.labelKey)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Save button */}
+          <div className="flex justify-end pt-2 border-t border-gray-100">
+            <button
+              onClick={handleSaveAutoSettings}
+              disabled={autoSettingsSaving || !autoSettingsDirty}
+              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-5 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-50 transition-colors"
+            >
+              {autoSettingsSaving
+                ? <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                : <Check className="w-4 h-4" />
+              }
+              {autoSettingsSaving ? t('common.saving') : t('common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Restore Warning Modal */}
+      {restoreConfirm && (
+        <div
+          style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+          onClick={() => setRestoreConfirm(null)}
+        >
+          <div
+            onClick={e => e.stopPropagation()}
+            style={{ width: '100%', maxWidth: 440, borderRadius: 16, overflow: 'hidden' }}
+            className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
+          >
+            {/* Red header */}
+            <div style={{ background: 'linear-gradient(135deg, #dc2626, #b91c1c)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
+              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                <AlertTriangle size={20} style={{ color: 'white' }} />
+              </div>
+              <div>
+                <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'white' }}>
+                  {t('backup.restoreConfirmTitle')}
+                </h3>
+                <p style={{ margin: '2px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
+                  {restoreConfirm.filename}
+                </p>
+              </div>
+            </div>
+
+            {/* Body */}
+            <div style={{ padding: '20px 24px' }}>
+              <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
+                {t('backup.restoreWarning')}
+              </p>
+
+              <div style={{ marginTop: 14, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
+                className="bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800"
+              >
+                {t('backup.restoreTip')}
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div style={{ padding: '0 24px 20px', display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
+              <button
+                onClick={() => setRestoreConfirm(null)}
+                className="text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                onClick={executeRestore}
+                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit', background: '#dc2626', color: 'white' }}
+                onMouseEnter={e => e.currentTarget.style.background = '#b91c1c'}
+                onMouseLeave={e => e.currentTarget.style.background = '#dc2626'}
+              >
+                {t('backup.restoreConfirm')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Admin/CategoryManager.tsx

@@ -0,0 +1,257 @@
+import { useState, useEffect, useRef } from 'react'
+import { categoriesApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { Plus, Edit2, Trash2, Pipette } from 'lucide-react'
+import { CATEGORY_ICON_MAP, ICON_LABELS, getCategoryIcon } from '../shared/categoryIcons'
+import { useTranslation } from '../../i18n'
+import { getApiErrorMessage } from '../../types'
+
+const PRESET_COLORS = [
+  '#6366f1', '#8b5cf6', '#ec4899', '#ef4444', '#f97316',
+  '#f59e0b', '#10b981', '#06b6d4', '#3b82f6', '#84cc16',
+  '#6b7280', '#1f2937',
+]
+
+const ICON_NAMES = Object.keys(CATEGORY_ICON_MAP)
+
+export default function CategoryManager() {
+  const [categories, setCategories] = useState([])
+  const [showForm, setShowForm] = useState(false)
+  const [editingId, setEditingId] = useState(null)
+  const [form, setForm] = useState({ name: '', color: '#6366f1', icon: 'MapPin' })
+  const [isSaving, setIsSaving] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const colorInputRef = useRef(null)
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  useEffect(() => { loadCategories() }, [])
+
+  const loadCategories = async () => {
+    setIsLoading(true)
+    try {
+      const data = await categoriesApi.list()
+      setCategories(data.categories || [])
+    } catch (err: unknown) {
+      toast.error(t('categories.toast.loadError'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleStartEdit = (cat) => {
+    setEditingId(cat.id)
+    setForm({ name: cat.name, color: cat.color || '#6366f1', icon: cat.icon || 'MapPin' })
+    setShowForm(false)
+  }
+
+  const handleStartCreate = () => {
+    setEditingId(null)
+    setForm({ name: '', color: '#6366f1', icon: 'MapPin' })
+    setShowForm(true)
+  }
+
+  const handleCancel = () => {
+    setShowForm(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    if (!form.name.trim()) { toast.error(t('categories.toast.nameRequired')); return }
+    setIsSaving(true)
+    try {
+      if (editingId) {
+        const result = await categoriesApi.update(editingId, form)
+        setCategories(prev => prev.map(c => c.id === editingId ? result.category : c))
+        setEditingId(null)
+        toast.success(t('categories.toast.updated'))
+      } else {
+        const result = await categoriesApi.create(form)
+        setCategories(prev => [...prev, result.category])
+        setShowForm(false)
+        toast.success(t('categories.toast.created'))
+      }
+      setForm({ name: '', color: '#6366f1', icon: 'MapPin' })
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('categories.toast.saveError')))
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleDelete = async (id) => {
+    if (!confirm(t('categories.confirm.delete'))) return
+    try {
+      await categoriesApi.delete(id)
+      setCategories(prev => prev.filter(c => c.id !== id))
+      toast.success(t('categories.toast.deleted'))
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('categories.toast.deleteError')))
+    }
+  }
+
+  const isPresetColor = PRESET_COLORS.includes(form.color)
+  const PreviewIcon = getCategoryIcon(form.icon)
+
+  const categoryForm = (
+    <div className="bg-gray-50 rounded-xl p-4 space-y-3 border border-gray-200">
+      <input
+        type="text"
+        value={form.name}
+        onChange={e => setForm(prev => ({ ...prev, name: e.target.value }))}
+        placeholder={t('categories.namePlaceholder')}
+        className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 bg-white"
+        autoFocus
+      />
+
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-2">{t('categories.icon')}</label>
+        <div className="max-h-48 overflow-y-auto">
+          <div className="flex flex-wrap gap-1.5 px-1.5 py-1.5">
+            {ICON_NAMES.map(name => {
+              const Icon = CATEGORY_ICON_MAP[name]
+              const isSelected = form.icon === name
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  title={ICON_LABELS[name] || name}
+                  onClick={() => setForm(prev => ({ ...prev, icon: name }))}
+                  className={`w-9 h-9 flex items-center justify-center rounded-lg transition-all ${
+                    isSelected
+                      ? 'ring-2 ring-offset-1 ring-slate-700'
+                      : 'hover:bg-gray-200'
+                  }`}
+                  style={{ background: isSelected ? `${form.color}18` : undefined }}
+                >
+                  <Icon size={17} strokeWidth={1.8} color={isSelected ? form.color : '#374151'} />
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-1.5">{t('categories.color')}</label>
+        <div className="flex items-center gap-2 flex-wrap">
+          {PRESET_COLORS.map(color => (
+            <button key={color} type="button" onClick={() => setForm(prev => ({ ...prev, color }))}
+              className={`w-7 h-7 rounded-full transition-transform hover:scale-110 ${form.color === color ? 'ring-2 ring-offset-2 ring-gray-400 scale-110' : ''}`}
+              style={{ backgroundColor: color }} />
+          ))}
+
+          {/* Custom color button */}
+          <input
+            ref={colorInputRef}
+            type="color"
+            value={form.color}
+            onChange={e => setForm(prev => ({ ...prev, color: e.target.value }))}
+            className="sr-only"
+          />
+          <button
+            type="button"
+            title={t('categories.customColor')}
+            onClick={() => colorInputRef.current?.click()}
+            className={`w-7 h-7 rounded-full flex items-center justify-center border-2 transition-transform hover:scale-110 ${
+              !isPresetColor
+                ? 'ring-2 ring-offset-2 ring-gray-400 scale-110 border-transparent'
+                : 'border-dashed border-gray-300 hover:border-gray-400'
+            }`}
+            style={!isPresetColor ? { backgroundColor: form.color } : undefined}
+          >
+            {isPresetColor && <Pipette className="w-3 h-3 text-gray-400" />}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-gray-500">{t('categories.preview')}:</span>
+        <span className="inline-flex items-center gap-1.5 text-sm px-2.5 py-1 rounded-full font-medium"
+          style={{ backgroundColor: `${form.color}20`, color: form.color }}>
+          <PreviewIcon size={14} strokeWidth={1.8} />
+          {form.name || t('categories.defaultName')}
+        </span>
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <button type="button" onClick={handleCancel}
+          className="px-3 py-1.5 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50">
+          {t('common.cancel')}
+        </button>
+        <button type="button" onClick={handleSave} disabled={isSaving || !form.name.trim()}
+          className="px-4 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium">
+          {isSaving ? t('common.saving') : editingId ? t('categories.update') : t('categories.create')}
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="bg-white rounded-2xl border border-gray-200 p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('categories.title')}</h2>
+          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('categories.subtitle')}</p>
+        </div>
+        <button onClick={handleStartCreate}
+          className="flex items-center gap-2 bg-slate-900 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">
+          <Plus className="w-4 h-4" />
+          <span className="hidden sm:inline">{t('categories.new')}</span>
+          <span className="sm:hidden">Add</span>
+        </button>
+      </div>
+
+      {showForm && <div className="mb-4">{categoryForm}</div>}
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8 text-gray-400">
+          <div className="w-6 h-6 border-2 border-gray-300 border-t-slate-600 rounded-full animate-spin" />
+        </div>
+      ) : categories.length === 0 ? (
+        <div className="text-center py-8 text-gray-400">
+          <p className="text-sm">{t('categories.empty')}</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {categories.map(cat => {
+            const Icon = getCategoryIcon(cat.icon)
+            return (
+              <div key={cat.id}>
+                {editingId === cat.id ? (
+                  <div className="mb-2">{categoryForm}</div>
+                ) : (
+                  <div className="flex items-center gap-3 p-3 border border-gray-100 rounded-xl hover:border-gray-200 group">
+                    <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
+                      style={{ backgroundColor: `${cat.color}20` }}>
+                      <Icon size={18} strokeWidth={1.8} color={cat.color} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-gray-900 text-sm">{cat.name}</span>
+                        <span className="text-xs px-2 py-0.5 rounded-full"
+                          style={{ backgroundColor: `${cat.color}20`, color: cat.color }}>
+                          {cat.color}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button onClick={() => handleStartEdit(cat)}
+                        className="p-1.5 text-gray-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg">
+                        <Edit2 className="w-4 h-4" />
+                      </button>
+                      <button onClick={() => handleDelete(cat.id)}
+                        className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg">
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Admin/GitHubPanel.tsx

@@ -0,0 +1,297 @@
+import { useState, useEffect } from 'react'
+import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import apiClient from '../../api/client'
+
+const REPO = 'mauriceboe/NOMAD'
+const PER_PAGE = 10
+
+export default function GitHubPanel() {
+  const { t, language } = useTranslation()
+  const [releases, setReleases] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [expanded, setExpanded] = useState({})
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
+
+  const fetchReleases = async (pageNum = 1, append = false) => {
+    try {
+      const res = await apiClient.get(`/auth/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } })
+      const data = res.data
+      setReleases(prev => append ? [...prev, ...data] : data)
+      setHasMore(data.length === PER_PAGE)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+    }
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    fetchReleases(1).finally(() => setLoading(false))
+  }, [])
+
+  const handleLoadMore = async () => {
+    const next = page + 1
+    setLoadingMore(true)
+    await fetchReleases(next, true)
+    setPage(next)
+    setLoadingMore(false)
+  }
+
+  const toggleExpand = (id) => {
+    setExpanded(prev => ({ ...prev, [id]: !prev[id] }))
+  }
+
+  const formatDate = (dateStr) => {
+    const d = new Date(dateStr)
+    return d.toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short', year: 'numeric' })
+  }
+
+  // Simple markdown-to-html for release notes (handles headers, bold, lists, links)
+  const renderBody = (body) => {
+    if (!body) return null
+    const lines = body.split('\n')
+    const elements = []
+    let listItems = []
+
+    const flushList = () => {
+      if (listItems.length > 0) {
+        elements.push(
+          <ul key={`ul-${elements.length}`} className="space-y-1 my-2">
+            {listItems.map((item, i) => (
+              <li key={i} className="flex gap-2 text-xs" style={{ color: 'var(--text-muted)' }}>
+                <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0" style={{ background: 'var(--text-faint)' }} />
+                <span dangerouslySetInnerHTML={{ __html: inlineFormat(item) }} />
+              </li>
+            ))}
+          </ul>
+        )
+        listItems = []
+      }
+    }
+
+    const inlineFormat = (text) => {
+      return text
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/`(.+?)`/g, '<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">$1</a>')
+    }
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed) { flushList(); continue }
+
+      if (trimmed.startsWith('### ')) {
+        flushList()
+        elements.push(
+          <h4 key={elements.length} className="text-xs font-semibold mt-3 mb-1" style={{ color: 'var(--text-primary)' }}>
+            {trimmed.slice(4)}
+          </h4>
+        )
+      } else if (trimmed.startsWith('## ')) {
+        flushList()
+        elements.push(
+          <h3 key={elements.length} className="text-sm font-semibold mt-3 mb-1" style={{ color: 'var(--text-primary)' }}>
+            {trimmed.slice(3)}
+          </h3>
+        )
+      } else if (/^[-*] /.test(trimmed)) {
+        listItems.push(trimmed.slice(2))
+      } else {
+        flushList()
+        elements.push(
+          <p key={elements.length} className="text-xs my-1" style={{ color: 'var(--text-muted)' }}
+            dangerouslySetInnerHTML={{ __html: inlineFormat(trimmed) }}
+          />
+        )
+      }
+    }
+    flushList()
+    return elements
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Support cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <a
+          href="https://ko-fi.com/mauriceboe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ff5e5b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Coffee size={20} style={{ color: '#ff5e5b' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Ko-fi</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{language === 'de' ? 'Hilft mir, TREK weiterzuentwickeln' : 'Helps me keep building TREK'}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://buymeacoffee.com/mauriceboe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ffdd0015', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Heart size={20} style={{ color: '#ffdd00' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Buy Me a Coffee</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{language === 'de' ? 'Hilft mir, TREK weiterzuentwickeln' : 'Helps me keep building TREK'}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+      </div>
+
+      {/* Loading / Error / Releases */}
+      {loading ? (
+        <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+          <div className="p-8 flex items-center justify-center">
+            <Loader2 className="w-6 h-6 animate-spin" style={{ color: 'var(--text-muted)' }} />
+          </div>
+        </div>
+      ) : error ? (
+        <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+          <div className="p-6 text-center">
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('admin.github.error')}</p>
+            <p className="text-xs mt-1" style={{ color: 'var(--text-faint)' }}>{error}</p>
+          </div>
+        </div>
+      ) : (
+      <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+        <div className="px-5 py-4 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-secondary)' }}>
+          <div>
+            <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.github.title')}</h2>
+            <p className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{t('admin.github.subtitle').replace('{repo}', REPO)}</p>
+          </div>
+          <a
+            href={`https://github.com/${REPO}/releases`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+            style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+          >
+            <ExternalLink size={12} />
+            GitHub
+          </a>
+        </div>
+
+        {/* Timeline */}
+        <div className="px-5 py-4">
+          <div className="relative">
+            {/* Timeline line */}
+            <div className="absolute left-[11px] top-3 bottom-3 w-px" style={{ background: 'var(--border-primary)' }} />
+
+            <div className="space-y-0">
+              {releases.map((release, idx) => {
+                const isLatest = idx === 0
+                const isExpanded = expanded[release.id]
+
+                return (
+                  <div key={release.id} className="relative pl-8 pb-5">
+                    {/* Timeline dot */}
+                    <div
+                      className="absolute left-0 top-1 w-[23px] h-[23px] rounded-full flex items-center justify-center border-2"
+                      style={{
+                        background: isLatest ? 'var(--text-primary)' : 'var(--bg-card)',
+                        borderColor: isLatest ? 'var(--text-primary)' : 'var(--border-primary)',
+                      }}
+                    >
+                      <Tag size={10} style={{ color: isLatest ? 'var(--bg-card)' : 'var(--text-faint)' }} />
+                    </div>
+
+                    {/* Release content */}
+                    <div>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+                          {release.tag_name}
+                        </span>
+                        {isLatest && (
+                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full"
+                            style={{ background: 'rgba(34,197,94,0.12)', color: '#16a34a' }}>
+                            {t('admin.github.latest')}
+                          </span>
+                        )}
+                        {release.prerelease && (
+                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full"
+                            style={{ background: 'rgba(245,158,11,0.12)', color: '#d97706' }}>
+                            {t('admin.github.prerelease')}
+                          </span>
+                        )}
+                      </div>
+
+                      {release.name && release.name !== release.tag_name && (
+                        <p className="text-xs font-medium mt-0.5" style={{ color: 'var(--text-muted)' }}>
+                          {release.name}
+                        </p>
+                      )}
+
+                      <div className="flex items-center gap-3 mt-1">
+                        <span className="flex items-center gap-1 text-[11px]" style={{ color: 'var(--text-faint)' }}>
+                          <Calendar size={10} />
+                          {formatDate(release.published_at || release.created_at)}
+                        </span>
+                        {release.author && (
+                          <span className="text-[11px]" style={{ color: 'var(--text-faint)' }}>
+                            {t('admin.github.by')} {release.author.login}
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Expandable body */}
+                      {release.body && (
+                        <div className="mt-2">
+                          <button
+                            onClick={() => toggleExpand(release.id)}
+                            className="flex items-center gap-1 text-[11px] font-medium transition-colors"
+                            style={{ color: 'var(--text-muted)' }}
+                          >
+                            {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+                            {isExpanded ? t('admin.github.hideDetails') : t('admin.github.showDetails')}
+                          </button>
+
+                          {isExpanded && (
+                            <div className="mt-2 p-3 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
+                              {renderBody(release.body)}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Load more */}
+          {hasMore && (
+            <div className="text-center pt-2">
+              <button
+                onClick={handleLoadMore}
+                disabled={loadingMore}
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium transition-colors"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+              >
+                {loadingMore ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
+                {loadingMore ? t('admin.github.loading') : t('admin.github.loadMore')}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      )}
+    </div>
+  )
+}

client/src/components/Budget/BudgetPanel.tsx

@@ -0,0 +1,672 @@
+import ReactDOM from 'react-dom'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import DOM from 'react-dom'
+import { useTripStore } from '../../store/tripStore'
+import { useTranslation } from '../../i18n'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check } from 'lucide-react'
+import CustomSelect from '../shared/CustomSelect'
+import { budgetApi } from '../../api/client'
+import type { BudgetItem, BudgetMember } from '../../types'
+import { currencyDecimals } from '../../utils/formatters'
+
+interface TripMember {
+  id: number
+  username: string
+  avatar_url?: string | null
+}
+
+interface PieSegment {
+  label: string
+  value: number
+  color: string
+}
+
+interface PerPersonSummaryEntry {
+  user_id: number
+  username: string
+  avatar_url: string | null
+  total_assigned: number
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+const CURRENCIES = ['EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK', 'TRY', 'THB', 'AUD', 'CAD']
+const SYMBOLS = { EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł', SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$' }
+const PIE_COLORS = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
+
+const fmtNum = (v, locale, cur) => {
+  if (v == null || isNaN(v)) return '-'
+  const d = currencyDecimals(cur)
+  return Number(v).toLocaleString(locale, { minimumFractionDigits: d, maximumFractionDigits: d }) + ' ' + (SYMBOLS[cur] || cur)
+}
+
+const calcPP = (p, n) => (n > 0 ? p / n : null)
+const calcPD = (p, d) => (d > 0 ? p / d : null)
+const calcPPD = (p, n, d) => (n > 0 && d > 0 ? p / (n * d) : null)
+
+// ── Inline Edit Cell ─────────────────────────────────────────────────────────
+function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder = '', decimals = 2, locale, editTooltip }) {
+  const [editing, setEditing] = useState(false)
+  const [editValue, setEditValue] = useState(value ?? '')
+  const inputRef = useRef(null)
+
+  useEffect(() => { if (editing && inputRef.current) { inputRef.current.focus(); inputRef.current.select() } }, [editing])
+
+  const save = () => {
+    setEditing(false)
+    let v = editValue
+    if (type === 'number') { const p = parseFloat(String(editValue).replace(',', '.')); v = isNaN(p) ? null : p }
+    if (v !== value) onSave(v)
+  }
+
+  if (editing) {
+    return <input ref={inputRef} type="text" inputMode={type === 'number' ? 'decimal' : 'text'} value={editValue}
+      onChange={e => setEditValue(e.target.value)} onBlur={save}
+      onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setEditValue(value ?? ''); setEditing(false) } }}
+      style={{ width: '100%', border: '1px solid var(--accent)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', ...style }}
+      placeholder={placeholder} />
+  }
+
+  const display = type === 'number' && value != null
+    ? Number(value).toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+    : (value || '')
+
+  return (
+    <div onClick={() => { setEditValue(value ?? ''); setEditing(true) }} title={editTooltip}
+      style={{ cursor: 'pointer', padding: '4px 6px', borderRadius: 4, minHeight: 28, display: 'flex', alignItems: 'center',
+        justifyContent: style?.textAlign === 'center' ? 'center' : 'flex-start', transition: 'background 0.15s',
+        color: display ? 'var(--text-primary)' : 'var(--text-faint)', fontSize: 13, ...style }}
+      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+      {display || placeholder || '-'}
+    </div>
+  )
+}
+
+// ── Add Item Row ─────────────────────────────────────────────────────────────
+interface AddItemRowProps {
+  onAdd: (data: { name: string; total_price: number; persons: number | null; days: number | null; note: string | null }) => void
+  t: (key: string) => string
+}
+
+function AddItemRow({ onAdd, t }: AddItemRowProps) {
+  const [name, setName] = useState('')
+  const [price, setPrice] = useState('')
+  const [persons, setPersons] = useState('')
+  const [days, setDays] = useState('')
+  const [note, setNote] = useState('')
+  const nameRef = useRef(null)
+
+  const handleAdd = () => {
+    if (!name.trim()) return
+    onAdd({ name: name.trim(), total_price: parseFloat(String(price).replace(',', '.')) || 0, persons: parseInt(persons) || null, days: parseInt(days) || null, note: note.trim() || null })
+    setName(''); setPrice(''); setPersons(''); setDays(''); setNote('')
+    setTimeout(() => nameRef.current?.focus(), 50)
+  }
+
+  const inp = { border: '1px solid var(--border-primary)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', fontFamily: 'inherit', width: '100%', background: 'var(--bg-input)', color: 'var(--text-primary)' }
+
+  return (
+    <tr style={{ background: 'var(--bg-secondary)' }}>
+      <td style={{ padding: '4px 6px' }}>
+        <input ref={nameRef} value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
+          placeholder={t('budget.newEntry')} style={inp} />
+      </td>
+      <td style={{ padding: '4px 6px' }}>
+        <input value={price} onChange={e => setPrice(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
+          placeholder="0,00" inputMode="decimal" style={{ ...inp, textAlign: 'center' }} />
+      </td>
+      <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
+        <input value={persons} onChange={e => setPersons(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
+          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 50, margin: '0 auto' }} />
+      </td>
+      <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
+        <input value={days} onChange={e => setDays(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
+          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 50, margin: '0 auto' }} />
+      </td>
+      <td className="hidden md:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
+      <td className="hidden md:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
+      <td className="hidden lg:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
+      <td className="hidden sm:table-cell" style={{ padding: '4px 6px' }}>
+        <input value={note} onChange={e => setNote(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()} placeholder={t('budget.table.note')} style={inp} />
+      </td>
+      <td style={{ padding: '4px 6px', textAlign: 'center' }}>
+        <button onClick={handleAdd} disabled={!name.trim()} title={t('reservations.add')}
+          style={{ background: name.trim() ? 'var(--text-primary)' : 'var(--border-primary)', border: 'none', borderRadius: 4, color: 'var(--bg-primary)',
+            cursor: name.trim() ? 'pointer' : 'default', padding: '4px 8px', display: 'inline-flex', alignItems: 'center' }}>
+          <Plus size={14} />
+        </button>
+      </td>
+    </tr>
+  )
+}
+
+// ── Chip with custom tooltip ─────────────────────────────────────────────────
+interface ChipWithTooltipProps {
+  label: string
+  avatarUrl: string | null
+  size?: number
+}
+
+function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps) {
+  const [hover, setHover] = useState(false)
+  const [pos, setPos] = useState({ top: 0, left: 0 })
+  const ref = useRef(null)
+
+  const onEnter = () => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect()
+      setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
+    }
+    setHover(true)
+  }
+
+  return (
+    <>
+      <div ref={ref} onMouseEnter={onEnter} onMouseLeave={() => setHover(false)}
+        style={{
+          width: size, height: size, borderRadius: '50%', border: '1.5px solid var(--border-primary)',
+          background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: size * 0.4, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+        }}>
+        {avatarUrl
+          ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+          : label?.[0]?.toUpperCase()
+        }
+      </div>
+      {hover && ReactDOM.createPortal(
+        <div style={{
+          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
+          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
+          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)',
+        }}>
+          {label}
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
+
+// ── Budget Member Chips (for Persons column) ────────────────────────────────
+interface BudgetMemberChipsProps {
+  members?: BudgetMember[]
+  tripMembers?: TripMember[]
+  onSetMembers: (memberIds: number[]) => void
+  compact?: boolean
+}
+
+function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, compact = true }: BudgetMemberChipsProps) {
+  const chipSize = compact ? 20 : 30
+  const btnSize = compact ? 18 : 28
+  const iconSize = compact ? (members.length > 0 ? 8 : 9) : (members.length > 0 ? 12 : 14)
+  const [showDropdown, setShowDropdown] = useState(false)
+  const [dropPos, setDropPos] = useState({ top: 0, left: 0 })
+  const btnRef = useRef(null)
+  const dropRef = useRef(null)
+
+  const openDropdown = useCallback(() => {
+    if (btnRef.current) {
+      const rect = btnRef.current.getBoundingClientRect()
+      setDropPos({ top: rect.bottom + 4, left: rect.left + rect.width / 2 })
+    }
+    setShowDropdown(v => !v)
+  }, [])
+
+  useEffect(() => {
+    if (!showDropdown) return
+    const close = (e) => {
+      if (dropRef.current && dropRef.current.contains(e.target)) return
+      if (btnRef.current && btnRef.current.contains(e.target)) return
+      setShowDropdown(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [showDropdown])
+
+  const memberIds = members.map(m => m.user_id)
+
+  const toggleMember = (userId) => {
+    const newIds = memberIds.includes(userId)
+      ? memberIds.filter(id => id !== userId)
+      : [...memberIds, userId]
+    onSetMembers(newIds)
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
+      {members.map(m => (
+        <ChipWithTooltip key={m.user_id} label={m.username} avatarUrl={m.avatar_url} size={chipSize} />
+      ))}
+      <button ref={btnRef} onClick={openDropdown}
+        style={{
+          width: btnSize, height: btnSize, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
+          background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: 'var(--text-faint)', padding: 0, flexShrink: 0,
+        }}>
+        {members.length > 0 ? <Pencil size={iconSize} /> : <Users size={iconSize} />}
+      </button>
+      {showDropdown && ReactDOM.createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed', top: dropPos.top, left: dropPos.left, transform: 'translateX(-50%)', zIndex: 10000,
+          background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+          boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 150,
+        }}>
+          {tripMembers.map(tm => {
+            const isActive = memberIds.includes(tm.id)
+            return (
+              <button key={tm.id} onClick={() => toggleMember(tm.id)} style={{
+                display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '5px 8px',
+                borderRadius: 6, border: 'none', background: isActive ? 'var(--bg-hover)' : 'none', cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 11, color: 'var(--text-primary)', textAlign: 'left',
+              }}
+                onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'none' }}
+              >
+                <div style={{
+                  width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700,
+                  color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+                }}>
+                  {tm.avatar_url
+                    ? <img src={tm.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                    : tm.username?.[0]?.toUpperCase()
+                  }
+                </div>
+                <span style={{ flex: 1 }}>{tm.username}</span>
+                {isActive && <Check size={12} color="var(--text-primary)" />}
+              </button>
+            )
+          })}
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}
+
+// ── Per-Person Inline (inside total card) ────────────────────────────────────
+interface PerPersonInlineProps {
+  tripId: number
+  budgetItems: BudgetItem[]
+  currency: string
+  locale: string
+}
+
+function PerPersonInline({ tripId, budgetItems, currency, locale }: PerPersonInlineProps) {
+  const [data, setData] = useState(null)
+  const fmt = (v) => fmtNum(v, locale, currency)
+
+  useEffect(() => {
+    budgetApi.perPersonSummary(tripId).then(d => setData(d.summary)).catch(() => {})
+  }, [tripId, budgetItems])
+
+  if (!data || data.length === 0) return null
+
+  return (
+    <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {data.map(person => (
+        <div key={person.user_id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{
+            width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.1)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700,
+            color: 'rgba(255,255,255,0.7)', overflow: 'hidden', flexShrink: 0,
+          }}>
+            {person.avatar_url
+              ? <img src={person.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              : person.username?.[0]?.toUpperCase()
+            }
+          </div>
+          <span style={{ flex: 1, fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.7)' }}>{person.username}</span>
+          <span style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{fmt(person.total_assigned)}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ── Pie Chart (pure CSS conic-gradient) ──────────────────────────────────────
+interface PieChartProps {
+  segments: PieSegment[]
+  size?: number
+  totalLabel: string
+}
+
+function PieChart({ segments, size = 200, totalLabel }: PieChartProps) {
+  if (!segments.length) return null
+
+  const total = segments.reduce((s, x) => s + x.value, 0)
+  if (total === 0) return null
+
+  let cumDeg = 0
+  const stops = segments.map(seg => {
+    const start = cumDeg
+    const deg = (seg.value / total) * 360
+    cumDeg += deg
+    return `${seg.color} ${start}deg ${start + deg}deg`
+  }).join(', ')
+
+  return (
+    <div style={{ position: 'relative', width: size, height: size, margin: '0 auto' }}>
+      <div style={{
+        width: size, height: size, borderRadius: '50%',
+        background: `conic-gradient(${stops})`,
+        boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
+      }} />
+      <div style={{
+        position: 'absolute', top: '50%', left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: size * 0.55, height: size * 0.55,
+        borderRadius: '50%', background: 'var(--bg-card)',
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        boxShadow: 'inset 0 0 12px rgba(0,0,0,0.04)',
+      }}>
+        <Wallet size={18} color="var(--text-faint)" style={{ marginBottom: 2 }} />
+        <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 500 }}>{totalLabel}</span>
+      </div>
+    </div>
+  )
+}
+
+// ── Main Component ───────────────────────────────────────────────────────────
+interface BudgetPanelProps {
+  tripId: number
+  tripMembers?: TripMember[]
+}
+
+export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelProps) {
+  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers } = useTripStore()
+  const { t, locale } = useTranslation()
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [editingCat, setEditingCat] = useState(null) // { name, value }
+  const currency = trip?.currency || 'EUR'
+
+  const fmt = (v, cur) => fmtNum(v, locale, cur)
+  const hasMultipleMembers = tripMembers.length > 1
+
+  const setCurrency = (cur) => {
+    if (tripId) updateTrip(tripId, { currency: cur })
+  }
+
+  useEffect(() => { if (tripId) loadBudgetItems(tripId) }, [tripId])
+
+  const grouped = useMemo(() => (budgetItems || []).reduce((acc, item) => {
+    const cat = item.category || 'Other'
+    if (!acc[cat]) acc[cat] = []
+    acc[cat].push(item)
+    return acc
+  }, {}), [budgetItems])
+
+  const categoryNames = Object.keys(grouped)
+  const grandTotal = (budgetItems || []).reduce((s, i) => s + (i.total_price || 0), 0)
+
+  const pieSegments = useMemo(() =>
+    categoryNames.map((cat, i) => ({
+      name: cat,
+      value: grouped[cat].reduce((s, x) => s + (x.total_price || 0), 0),
+      color: PIE_COLORS[i % PIE_COLORS.length],
+    })).filter(s => s.value > 0)
+  , [grouped, categoryNames])
+
+  const handleAddItem = async (category, data) => { try { await addBudgetItem(tripId, { ...data, category }) } catch {} }
+  const handleUpdateField = async (id, field, value) => { try { await updateBudgetItem(tripId, id, { [field]: value }) } catch {} }
+  const handleDeleteItem = async (id) => { try { await deleteBudgetItem(tripId, id) } catch {} }
+  const handleDeleteCategory = async (cat) => {
+    const items = grouped[cat] || []
+    for (const item of Array.from(items)) await deleteBudgetItem(tripId, item.id)
+  }
+  const handleRenameCategory = async (oldName, newName) => {
+    if (!newName.trim() || newName.trim() === oldName) return
+    const items = grouped[oldName] || []
+    for (const item of Array.from(items)) await updateBudgetItem(tripId, item.id, { category: newName.trim() })
+  }
+  const handleAddCategory = () => {
+    if (!newCategoryName.trim()) return
+    addBudgetItem(tripId, { name: t('budget.defaultEntry'), category: newCategoryName.trim(), total_price: 0 })
+    setNewCategoryName('')
+  }
+
+  const th = { padding: '6px 8px', textAlign: 'center', fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', borderBottom: '2px solid var(--border-primary)', whiteSpace: 'nowrap', background: 'var(--bg-secondary)' }
+  const td = { padding: '2px 6px', borderBottom: '1px solid var(--border-secondary)', fontSize: 13, verticalAlign: 'middle', color: 'var(--text-primary)' }
+
+  // ── Empty State ──────────────────────────────────────────────────────────
+  if (!budgetItems || budgetItems.length === 0) {
+    return (
+      <div style={{ padding: 24, maxWidth: 600, margin: '60px auto', textAlign: 'center' }}>
+        <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
+          <Calculator size={28} color="#6b7280" />
+        </div>
+        <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{t('budget.emptyTitle')}</h2>
+        <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: '0 0 24px', lineHeight: 1.5 }}>{t('budget.emptyText')}</p>
+        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', alignItems: 'stretch', maxWidth: 320, margin: '0 auto' }}>
+          <input value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
+            placeholder={t('budget.emptyPlaceholder')}
+            style={{ flex: 1, padding: '9px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', minWidth: 0 }} />
+          <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
+            style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '0 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.5, flexShrink: 0 }}>
+            <Plus size={16} />
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  // ── Main Layout ──────────────────────────────────────────────────────────
+  return (
+    <div style={{ fontFamily: "'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif" }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 16px 12px', flexWrap: 'wrap', gap: 8 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <Calculator size={20} color="var(--text-primary)" />
+          <h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('budget.title')}</h2>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', gap: 20, padding: '0 16px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          {categoryNames.map((cat, ci) => {
+            const items = grouped[cat]
+            const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
+            const color = PIE_COLORS[ci % PIE_COLORS.length]
+
+            return (
+              <div key={cat} style={{ marginBottom: 16 }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#000000', color: '#fff', borderRadius: '10px 10px 0 0', padding: '9px 14px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
+                    <div style={{ width: 10, height: 10, borderRadius: 3, background: color, flexShrink: 0 }} />
+                    {editingCat?.name === cat ? (
+                      <input
+                        autoFocus
+                        value={editingCat.value}
+                        onChange={e => setEditingCat({ ...editingCat, value: e.target.value })}
+                        onBlur={() => { handleRenameCategory(cat, editingCat.value); setEditingCat(null) }}
+                        onKeyDown={e => { if (e.key === 'Enter') { handleRenameCategory(cat, editingCat.value); setEditingCat(null) } if (e.key === 'Escape') setEditingCat(null) }}
+                        style={{ fontWeight: 600, fontSize: 13, background: 'rgba(255,255,255,0.15)', border: 'none', borderRadius: 4, color: '#fff', padding: '1px 6px', outline: 'none', fontFamily: 'inherit', width: '100%' }}
+                      />
+                    ) : (
+                      <>
+                        <span style={{ fontWeight: 600, fontSize: 13 }}>{cat}</span>
+                        <button onClick={() => setEditingCat({ name: cat, value: cat })}
+                          style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.4)', display: 'flex', padding: 1 }}
+                          onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.4)'}>
+                          <Pencil size={10} />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <span style={{ fontSize: 13, fontWeight: 500, opacity: 0.9 }}>{fmt(subtotal, currency)}</span>
+                    <button onClick={() => handleDeleteCategory(cat)} title={t('budget.deleteCategory')}
+                      style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 4, color: '#fff', cursor: 'pointer', padding: '3px 6px', display: 'flex', alignItems: 'center', opacity: 0.6 }}
+                      onMouseEnter={e => e.currentTarget.style.opacity = '1'} onMouseLeave={e => e.currentTarget.style.opacity = '0.6'}>
+                      <Trash2 size={13} />
+                    </button>
+                  </div>
+                </div>
+
+                <div style={{ overflowX: 'auto', border: '1px solid var(--border-primary)', borderTop: 'none', borderRadius: '0 0 10px 10px' }}>
+                  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                    <thead>
+                      <tr>
+                        <th style={{ ...th, textAlign: 'left', minWidth: 100 }}>{t('budget.table.name')}</th>
+                        <th style={{ ...th, minWidth: 60 }}>{t('budget.table.total')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 130 }}>{t('budget.table.persons')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 45 }}>{t('budget.table.days')}</th>
+                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 90 }}>{t('budget.table.perPerson')}</th>
+                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 80 }}>{t('budget.table.perDay')}</th>
+                        <th className="hidden lg:table-cell" style={{ ...th, minWidth: 95 }}>{t('budget.table.perPersonDay')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, textAlign: 'left', minWidth: 80 }}>{t('budget.table.note')}</th>
+                        <th style={{ ...th, width: 36 }}></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {items.map(item => {
+                        const pp = calcPP(item.total_price, item.persons)
+                        const pd = calcPD(item.total_price, item.days)
+                        const ppd = calcPPD(item.total_price, item.persons, item.days)
+                        const hasMembers = item.members?.length > 0
+                        return (
+                          <tr key={item.id} style={{ transition: 'background 0.1s' }}
+                            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+                            <td style={td}>
+                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={t('budget.editTooltip')} />
+                              {/* Mobile: larger chips under name since Persons column is hidden */}
+                              {hasMultipleMembers && (
+                                <div className="sm:hidden" style={{ marginTop: 4 }}>
+                                  <BudgetMemberChips
+                                    members={item.members || []}
+                                    tripMembers={tripMembers}
+                                    onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+                                    compact={false}
+                                  />
+                                </div>
+                              )}
+                            </td>
+                            <td style={{ ...td, textAlign: 'center' }}>
+                              <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} />
+                            </td>
+                            <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center', position: 'relative' }}>
+                              {hasMultipleMembers ? (
+                                <BudgetMemberChips
+                                  members={item.members || []}
+                                  tripMembers={tripMembers}
+                                  onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+                                />
+                              ) : (
+                                <InlineEditCell value={item.persons} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'persons', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} />
+                              )}
+                            </td>
+                            <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center' }}>
+                              <InlineEditCell value={item.days} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'days', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} />
+                            </td>
+                            <td className="hidden md:table-cell" style={{ ...td, textAlign: 'center', color: pp != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{pp != null ? fmt(pp, currency) : '-'}</td>
+                            <td className="hidden md:table-cell" style={{ ...td, textAlign: 'center', color: pd != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{pd != null ? fmt(pd, currency) : '-'}</td>
+                            <td className="hidden lg:table-cell" style={{ ...td, textAlign: 'center', color: ppd != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{ppd != null ? fmt(ppd, currency) : '-'}</td>
+                            <td className="hidden sm:table-cell" style={td}><InlineEditCell value={item.note} onSave={v => handleUpdateField(item.id, 'note', v)} placeholder={t('budget.table.note')} locale={locale} editTooltip={t('budget.editTooltip')} /></td>
+                            <td style={{ ...td, textAlign: 'center' }}>
+                              <button onClick={() => handleDeleteItem(item.id)} title={t('common.delete')}
+                                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: 'var(--text-faint)', borderRadius: 4, display: 'inline-flex', transition: 'color 0.15s' }}
+                                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = '#d1d5db'}>
+                                <Trash2 size={14} />
+                              </button>
+                            </td>
+                          </tr>
+                        )
+                      })}
+                      <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="w-full md:w-[280px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
+          <div style={{ marginBottom: 12 }}>
+            <CustomSelect
+              value={currency}
+              onChange={setCurrency}
+              options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
+              searchable
+            />
+          </div>
+
+          <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
+            <input
+              value={newCategoryName}
+              onChange={e => setNewCategoryName(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
+              placeholder={t('budget.categoryName')}
+              style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-input)', color: 'var(--text-primary)' }}
+            />
+            <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
+              style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '9px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.4, flexShrink: 0 }}>
+              <Plus size={16} />
+            </button>
+          </div>
+
+          <div style={{
+            background: 'linear-gradient(135deg, #000000 0%, #18181b 100%)',
+            borderRadius: 16, padding: '24px 20px', color: '#fff', marginBottom: 16,
+            boxShadow: '0 8px 32px rgba(15,23,42,0.18)',
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
+              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Wallet size={18} color="rgba(255,255,255,0.8)" />
+              </div>
+              <div>
+                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 0.5 }}>{t('budget.totalBudget')}</div>
+              </div>
+            </div>
+            <div style={{ fontSize: 28, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
+              {Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: currencyDecimals(currency), maximumFractionDigits: currencyDecimals(currency) })}
+            </div>
+            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{SYMBOLS[currency] || currency} {currency}</div>
+            {hasMultipleMembers && (budgetItems || []).some(i => i.members?.length > 0) && (
+              <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} />
+            )}
+          </div>
+
+          {pieSegments.length > 0 && (
+            <div style={{
+              background: 'var(--bg-card)', borderRadius: 16, padding: '20px 16px',
+              border: '1px solid var(--border-primary)',
+              boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
+              marginBottom: 16,
+            }}>
+              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 16, textAlign: 'center' }}>{t('budget.byCategory')}</div>
+
+              <PieChart segments={pieSegments} size={180} totalLabel={t('budget.total')} />
+
+              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {pieSegments.map(seg => {
+                  const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
+                  return (
+                    <div key={seg.name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
+                      <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{seg.name}</span>
+                      <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 600, whiteSpace: 'nowrap' }}>{pct}%</span>
+                    </div>
+                  )
+                })}
+              </div>
+
+              <div style={{ marginTop: 12, borderTop: '1px solid var(--border-secondary)', paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
+                {pieSegments.map(seg => (
+                  <div key={seg.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{seg.name}</span>
+                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>{fmt(seg.value, currency)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Collab/CollabChat.tsx

@@ -0,0 +1,830 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import ReactDOM from 'react-dom'
+import { ArrowUp, Trash2, Reply, ChevronUp, MessageCircle, Smile, X } from 'lucide-react'
+import { collabApi } from '../../api/client'
+import { useSettingsStore } from '../../store/settingsStore'
+import { addListener, removeListener } from '../../api/websocket'
+import { useTranslation } from '../../i18n'
+import type { User } from '../../types'
+
+interface ChatReaction {
+  emoji: string
+  count: number
+  users: { id: number; username: string }[]
+}
+
+interface ChatMessage {
+  id: number
+  trip_id: number
+  user_id: number
+  text: string
+  reply_to_id: number | null
+  reactions: ChatReaction[]
+  created_at: string
+  user?: { username: string; avatar_url: string | null }
+  reply_to?: ChatMessage | null
+}
+
+// ── Twemoji helper (Apple-style emojis via CDN) ──
+function emojiToCodepoint(emoji) {
+  const codepoints = []
+  for (const c of emoji) {
+    const cp = c.codePointAt(0)
+    if (cp !== 0xfe0f) codepoints.push(cp.toString(16)) // skip variation selector
+  }
+  return codepoints.join('-')
+}
+
+function TwemojiImg({ emoji, size = 20, style = {} }) {
+  const cp = emojiToCodepoint(emoji)
+  const [failed, setFailed] = useState(false)
+
+  if (failed) {
+    return <span style={{ fontSize: size, lineHeight: 1, display: 'inline-block', verticalAlign: 'middle', ...style }}>{emoji}</span>
+  }
+
+  return (
+    <img
+      src={`https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/${cp}.png`}
+      alt={emoji}
+      draggable={false}
+      style={{ width: size, height: size, display: 'inline-block', verticalAlign: 'middle', ...style }}
+      onError={() => setFailed(true)}
+    />
+  )
+}
+
+const EMOJI_CATEGORIES = {
+  'Smileys': ['😀','😂','🥹','😍','🤩','😎','🥳','😭','🤔','👀','🙈','🫠','😴','🤯','🥺','😤','💀','👻','🫡','🤝'],
+  'Reactions': ['❤️','🔥','👍','👎','👏','🎉','💯','✨','⭐','💪','🙏','😱','😂','💖','💕','🤞','✅','❌','⚡','🏆'],
+  'Travel': ['✈️','🏖️','🗺️','🧳','🏔️','🌅','🌴','🚗','🚂','🛳️','🏨','🍽️','🍕','🍹','📸','🎒','⛱️','🌍','🗼','🎌'],
+}
+
+// SQLite stores UTC without 'Z' suffix — append it so JS parses as UTC
+function parseUTC(s) { return new Date(s && !s.endsWith('Z') ? s + 'Z' : s) }
+
+function formatTime(isoString, is12h) {
+  const d = parseUTC(isoString)
+  const h = d.getHours()
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  if (is12h) {
+    const period = h >= 12 ? 'PM' : 'AM'
+    const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+    return `${h12}:${mm} ${period}`
+  }
+  return `${String(h).padStart(2, '0')}:${mm}`
+}
+
+function formatDateSeparator(isoString, t) {
+  const d = parseUTC(isoString)
+  const now = new Date()
+  const yesterday = new Date(); yesterday.setDate(now.getDate() - 1)
+
+  if (d.toDateString() === now.toDateString()) return t('collab.chat.today') || 'Today'
+  if (d.toDateString() === yesterday.toDateString()) return t('collab.chat.yesterday') || 'Yesterday'
+
+  return d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+function shouldShowDateSeparator(msg, prevMsg) {
+  if (!prevMsg) return true
+  const d1 = parseUTC(msg.created_at).toDateString()
+  const d2 = parseUTC(prevMsg.created_at).toDateString()
+  return d1 !== d2
+}
+
+/* ── Emoji Picker ── */
+interface EmojiPickerProps {
+  onSelect: (emoji: string) => void
+  onClose: () => void
+  anchorRef: React.RefObject<HTMLElement | null>
+  containerRef: React.RefObject<HTMLElement | null>
+}
+
+function EmojiPicker({ onSelect, onClose, anchorRef, containerRef }: EmojiPickerProps) {
+  const [cat, setCat] = useState(Object.keys(EMOJI_CATEGORIES)[0])
+  const ref = useRef(null)
+
+  const getPos = () => {
+    const container = containerRef?.current
+    const anchor = anchorRef?.current
+    if (container && anchor) {
+      const cRect = container.getBoundingClientRect()
+      const aRect = anchor.getBoundingClientRect()
+      return { bottom: window.innerHeight - aRect.top + 16, left: cRect.left + cRect.width / 2 - 140 }
+    }
+    return { bottom: 80, left: 0 }
+  }
+  const pos = getPos()
+
+  useEffect(() => {
+    const close = (e) => {
+      if (ref.current && ref.current.contains(e.target)) return
+      if (anchorRef?.current && anchorRef.current.contains(e.target)) return
+      onClose()
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [onClose, anchorRef])
+
+  return ReactDOM.createPortal(
+    <div ref={ref} style={{
+      position: 'fixed', bottom: pos.bottom, left: pos.left, zIndex: 10000,
+      background: 'var(--bg-card)', border: '1px solid var(--border-faint)', borderRadius: 16,
+      boxShadow: '0 8px 32px rgba(0,0,0,0.18)', width: 280, overflow: 'hidden',
+    }}>
+      {/* Category tabs */}
+      <div style={{ display: 'flex', borderBottom: '1px solid var(--border-faint)', padding: '6px 8px', gap: 2 }}>
+        {Object.keys(EMOJI_CATEGORIES).map(c => (
+          <button key={c} onClick={() => setCat(c)} style={{
+            flex: 1, padding: '4px 0', borderRadius: 6, border: 'none', cursor: 'pointer',
+            background: cat === c ? 'var(--bg-hover)' : 'transparent',
+            color: 'var(--text-primary)', fontSize: 10, fontWeight: 600, fontFamily: 'inherit',
+          }}>
+            {c}
+          </button>
+        ))}
+      </div>
+      {/* Emoji grid */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 2, padding: 8 }}>
+        {EMOJI_CATEGORIES[cat].map((emoji, i) => (
+          <button key={i} onClick={() => onSelect(emoji)} style={{
+            width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            background: 'none', border: 'none', cursor: 'pointer', borderRadius: 6,
+            padding: 2, transition: 'transform 0.1s',
+          }}
+            onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.transform = 'scale(1.2)' }}
+            onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.transform = 'scale(1)' }}
+          >
+            <TwemojiImg emoji={emoji} size={20} />
+          </button>
+        ))}
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+/* ── Reaction Quick Menu (right-click) ── */
+const QUICK_REACTIONS = ['❤️', '😂', '👍', '😮', '😢', '🔥', '👏', '🎉']
+
+interface ReactionMenuProps {
+  x: number
+  y: number
+  onReact: (emoji: string) => void
+  onClose: () => void
+}
+
+function ReactionMenu({ x, y, onReact, onClose }: ReactionMenuProps) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose() }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [onClose])
+
+  // Clamp to viewport
+  const menuWidth = 156
+  const clampedLeft = Math.max(menuWidth / 2 + 8, Math.min(x, window.innerWidth - menuWidth / 2 - 8))
+
+  return (
+    <div ref={ref} style={{
+      position: 'fixed', top: y - 80, left: clampedLeft, transform: 'translateX(-50%)', zIndex: 10000,
+      background: 'var(--bg-card)', border: '1px solid var(--border-faint)', borderRadius: 16,
+      boxShadow: '0 8px 24px rgba(0,0,0,0.18)', padding: '6px 8px',
+      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2, width: menuWidth,
+    }}>
+      {QUICK_REACTIONS.map(emoji => (
+        <button key={emoji} onClick={() => onReact(emoji)} style={{
+          width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: 'none', border: 'none', cursor: 'pointer', borderRadius: '50%',
+          padding: 3, transition: 'transform 0.1s, background 0.1s',
+        }}
+          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)'; e.currentTarget.style.background = 'var(--bg-hover)' }}
+          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'none' }}
+        >
+          <TwemojiImg emoji={emoji} size={18} />
+        </button>
+      ))}
+    </div>
+  )
+}
+
+/* ── Message Text with clickable URLs ── */
+interface MessageTextProps {
+  text: string
+}
+
+function MessageText({ text }: MessageTextProps) {
+  const parts = text.split(URL_REGEX)
+  const urls = text.match(URL_REGEX) || []
+  const result = []
+  parts.forEach((part, i) => {
+    if (part) result.push(part)
+    if (urls[i]) result.push(
+      <a key={i} href={urls[i]} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 2, opacity: 0.85 }}>
+        {urls[i]}
+      </a>
+    )
+  })
+  return <>{result}</>
+}
+
+/* ── Link Preview ── */
+const URL_REGEX = /https?:\/\/[^\s<>"']+/g
+const previewCache = {}
+
+interface LinkPreviewProps {
+  url: string
+  tripId: number
+  own: boolean
+  onLoad: (() => void) | undefined
+}
+
+function LinkPreview({ url, tripId, own, onLoad }: LinkPreviewProps) {
+  const [data, setData] = useState(previewCache[url] || null)
+  const [loading, setLoading] = useState(!previewCache[url])
+
+  useEffect(() => {
+    if (previewCache[url]) return
+    collabApi.linkPreview(tripId, url).then(d => {
+      previewCache[url] = d
+      setData(d)
+      setLoading(false)
+      if (d?.title || d?.description || d?.image) onLoad?.()
+    }).catch(() => setLoading(false))
+  }, [url, tripId])
+
+  if (loading || !data || (!data.title && !data.description && !data.image)) return null
+
+  const domain = (() => { try { return new URL(url).hostname.replace('www.', '') } catch { return '' } })()
+
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" style={{
+      display: 'block', textDecoration: 'none', marginTop: 6, borderRadius: 12, overflow: 'hidden',
+      border: own ? '1px solid rgba(255,255,255,0.15)' : '1px solid var(--border-faint)',
+      background: own ? 'rgba(255,255,255,0.1)' : 'var(--bg-secondary)',
+      maxWidth: 280, transition: 'opacity 0.15s',
+    }}
+      onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
+      onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+    >
+      {data.image && (
+        <img src={data.image} alt="" style={{ width: '100%', height: 140, objectFit: 'cover', display: 'block' }}
+          onError={e => e.target.style.display = 'none'} />
+      )}
+      <div style={{ padding: '8px 10px' }}>
+        {domain && (
+          <div style={{ fontSize: 10, fontWeight: 600, color: own ? 'rgba(255,255,255,0.5)' : 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 2 }}>
+            {data.site_name || domain}
+          </div>
+        )}
+        {data.title && (
+          <div style={{ fontSize: 12, fontWeight: 600, color: own ? '#fff' : 'var(--text-primary)', lineHeight: 1.3, marginBottom: 2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+            {data.title}
+          </div>
+        )}
+        {data.description && (
+          <div style={{ fontSize: 11, color: own ? 'rgba(255,255,255,0.7)' : 'var(--text-muted)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+            {data.description}
+          </div>
+        )}
+      </div>
+    </a>
+  )
+}
+
+/* ── Reaction Badge with NOMAD tooltip ── */
+interface ReactionBadgeProps {
+  reaction: ChatReaction
+  currentUserId: number
+  onReact: () => void
+}
+
+function ReactionBadge({ reaction, currentUserId, onReact }: ReactionBadgeProps) {
+  const [hover, setHover] = useState(false)
+  const [pos, setPos] = useState({ top: 0, left: 0 })
+  const ref = useRef(null)
+  const names = reaction.users.map(u => u.username).join(', ')
+
+  return (
+    <>
+      <button ref={ref} onClick={onReact}
+        onMouseEnter={() => {
+          if (ref.current) {
+            const rect = ref.current.getBoundingClientRect()
+            setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
+          }
+          setHover(true)
+        }}
+        onMouseLeave={() => setHover(false)}
+        style={{
+          display: 'inline-flex', alignItems: 'center', gap: 2, padding: '1px 3px',
+          borderRadius: 99, border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+          background: 'transparent', transition: 'transform 0.1s',
+        }}
+      >
+        <TwemojiImg emoji={reaction.emoji} size={16} />
+        {reaction.count > 1 && <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', minWidth: 8 }}>{reaction.count}</span>}
+      </button>
+      {hover && names && ReactDOM.createPortal(
+        <div style={{
+          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
+          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
+          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)',
+        }}>
+          {names}
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
+
+/* ── Main Component ── */
+interface CollabChatProps {
+  tripId: number
+  currentUser: User
+}
+
+export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
+  const { t } = useTranslation()
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+
+  const [messages, setMessages] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [hasMore, setHasMore] = useState(false)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [text, setText] = useState('')
+  const [replyTo, setReplyTo] = useState(null)
+  const [hoveredId, setHoveredId] = useState(null)
+  const [sending, setSending] = useState(false)
+  const [showEmoji, setShowEmoji] = useState(false)
+  const [reactMenu, setReactMenu] = useState(null) // { msgId, x, y }
+  const [deletingIds, setDeletingIds] = useState(new Set())
+
+  const containerRef = useRef(null)
+  const messagesRef = useRef(messages)
+  messagesRef.current = messages
+  const scrollRef = useRef(null)
+  const textareaRef = useRef(null)
+  const emojiBtnRef = useRef(null)
+  const isAtBottom = useRef(true)
+
+  const scrollToBottom = useCallback((behavior = 'auto') => {
+    const el = scrollRef.current
+    if (!el) return
+    requestAnimationFrame(() => el.scrollTo({ top: el.scrollHeight, behavior }))
+  }, [])
+
+  const checkAtBottom = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    isAtBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48
+  }, [])
+
+  /* ── load messages ── */
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    collabApi.getMessages(tripId).then(data => {
+      if (cancelled) return
+      const msgs = (Array.isArray(data) ? data : data.messages || []).map(m => m.deleted ? { ...m, _deleted: true } : m)
+      setMessages(msgs)
+      setHasMore(msgs.length >= 100)
+      setLoading(false)
+      setTimeout(() => scrollToBottom(), 30)
+    }).catch(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [tripId, scrollToBottom])
+
+  /* ── load more ── */
+  const handleLoadMore = useCallback(async () => {
+    if (loadingMore || messages.length === 0) return
+    setLoadingMore(true)
+    const el = scrollRef.current
+    const prevHeight = el ? el.scrollHeight : 0
+    try {
+      const data = await collabApi.getMessages(tripId, messages[0]?.id)
+      const older = (Array.isArray(data) ? data : data.messages || []).map(m => m.deleted ? { ...m, _deleted: true } : m)
+      if (older.length === 0) { setHasMore(false) }
+      else {
+        setMessages(prev => [...older, ...prev])
+        setHasMore(older.length >= 100)
+        requestAnimationFrame(() => { if (el) el.scrollTop = el.scrollHeight - prevHeight })
+      }
+    } catch {} finally { setLoadingMore(false) }
+  }, [tripId, loadingMore, messages])
+
+  /* ── websocket ── */
+  useEffect(() => {
+    const handler = (event) => {
+      if (event.type === 'collab:message:created' && String(event.tripId) === String(tripId)) {
+        setMessages(prev => prev.some(m => m.id === event.message.id) ? prev : [...prev, event.message])
+        if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 30)
+      }
+      if (event.type === 'collab:message:deleted' && String(event.tripId) === String(tripId)) {
+        setMessages(prev => prev.map(m => m.id === event.messageId ? { ...m, _deleted: true } : m))
+        if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 50)
+      }
+      if (event.type === 'collab:message:reacted' && String(event.tripId) === String(tripId)) {
+        setMessages(prev => prev.map(m => m.id === event.messageId ? { ...m, reactions: event.reactions } : m))
+      }
+    }
+    addListener(handler)
+    return () => removeListener(handler)
+  }, [tripId, scrollToBottom])
+
+  /* ── auto-resize textarea ── */
+  const handleTextChange = useCallback((e) => {
+    setText(e.target.value)
+    const ta = textareaRef.current
+    if (ta) {
+      ta.style.height = 'auto'
+      const h = Math.min(ta.scrollHeight, 100)
+      ta.style.height = h + 'px'
+      ta.style.overflowY = ta.scrollHeight > 100 ? 'auto' : 'hidden'
+    }
+  }, [])
+
+  /* ── send ── */
+  const handleSend = useCallback(async () => {
+    const body = text.trim()
+    if (!body || sending) return
+    setSending(true)
+    try {
+      const payload = { text: body }
+      if (replyTo) payload.reply_to = replyTo.id
+      const data = await collabApi.sendMessage(tripId, payload)
+      if (data?.message) {
+        setMessages(prev => prev.some(m => m.id === data.message.id) ? prev : [...prev, data.message])
+      }
+      setText(''); setReplyTo(null); setShowEmoji(false)
+      if (textareaRef.current) textareaRef.current.style.height = 'auto'
+      isAtBottom.current = true
+      setTimeout(() => scrollToBottom('smooth'), 50)
+    } catch {} finally { setSending(false) }
+  }, [text, sending, replyTo, tripId, scrollToBottom])
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
+  }, [handleSend])
+
+  const handleDelete = useCallback(async (msgId) => {
+    const msg = messages.find(m => m.id === msgId)
+    requestAnimationFrame(() => {
+      setDeletingIds(prev => new Set(prev).add(msgId))
+    })
+    setTimeout(async () => {
+      try {
+        await collabApi.deleteMessage(tripId, msgId)
+        setMessages(prev => prev.map(m => m.id === msgId ? { ...m, _deleted: true } : m))
+      } catch {}
+      setDeletingIds(prev => { const s = new Set(prev); s.delete(msgId); return s })
+    }, 400)
+  }, [tripId])
+
+  const handleReact = useCallback(async (msgId, emoji) => {
+    setReactMenu(null)
+    try {
+      const data = await collabApi.reactMessage(tripId, msgId, emoji)
+      setMessages(prev => prev.map(m => m.id === msgId ? { ...m, reactions: data.reactions } : m))
+    } catch {}
+  }, [tripId])
+
+  const handleEmojiSelect = useCallback((emoji) => {
+    setText(prev => prev + emoji)
+    textareaRef.current?.focus()
+  }, [])
+
+  const isOwn = (msg) => String(msg.user_id) === String(currentUser.id)
+
+  // Check if message is only emoji (1-3 emojis, no other text)
+  const isEmojiOnly = (text) => {
+    const emojiRegex = /^(?:\p{Emoji_Presentation}|\p{Extended_Pictographic}[\uFE0F]?(?:\u200D\p{Extended_Pictographic}[\uFE0F]?)*){1,3}$/u
+    return emojiRegex.test(text.trim())
+  }
+
+  /* ── Loading ── */
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ width: 24, height: 24, border: '2px solid var(--border-faint)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin .7s linear infinite' }} />
+        <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+      </div>
+    )
+  }
+
+  /* ── Main ── */
+  return (
+    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
+      {/* Messages */}
+      {messages.length === 0 ? (
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
+          <MessageCircle size={40} strokeWidth={1.2} style={{ opacity: 0.4 }} />
+          <span style={{ fontSize: 14, fontWeight: 600 }}>{t('collab.chat.empty')}</span>
+          <span style={{ fontSize: 12, opacity: 0.6 }}>{t('collab.chat.emptyDesc') || ''}</span>
+        </div>
+      ) : (
+        <div ref={scrollRef} onScroll={checkAtBottom} className="chat-scroll" style={{
+          flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '8px 14px 4px', WebkitOverflowScrolling: 'touch',
+          display: 'flex', flexDirection: 'column', gap: 1,
+        }}>
+          {hasMore && (
+            <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 10px' }}>
+              <button onClick={handleLoadMore} disabled={loadingMore} style={{
+                display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600,
+                color: 'var(--text-muted)', background: 'var(--bg-secondary)', border: '1px solid var(--border-faint)',
+                borderRadius: 99, padding: '5px 14px', cursor: 'pointer', fontFamily: 'inherit',
+              }}>
+                <ChevronUp size={13} />
+                {loadingMore ? '...' : t('collab.chat.loadMore')}
+              </button>
+            </div>
+          )}
+
+          {messages.map((msg, idx) => {
+            const own = isOwn(msg)
+            const prevMsg = messages[idx - 1]
+            const nextMsg = messages[idx + 1]
+            const isNewGroup = idx === 0 || String(prevMsg?.user_id) !== String(msg.user_id)
+            const isLastInGroup = !nextMsg || String(nextMsg?.user_id) !== String(msg.user_id)
+            const showDate = shouldShowDateSeparator(msg, prevMsg)
+            const showAvatar = !own && isLastInGroup
+            const bigEmoji = isEmojiOnly(msg.text)
+            const hasReply = msg.reply_text || msg.reply_to
+            // Deleted message placeholder
+            if (msg._deleted) {
+              return (
+                <React.Fragment key={msg.id}>
+                  {showDate && (
+                    <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
+                      <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+                        {formatDateSeparator(msg.created_at, t)}
+                      </span>
+                    </div>
+                  )}
+                  <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0' }}>
+                    <span style={{ fontSize: 11, color: 'var(--text-faint)', fontStyle: 'italic' }}>
+                      {msg.username} {t('collab.chat.deletedMessage') || 'deleted a message'} · {formatTime(msg.created_at, is12h)}
+                    </span>
+                  </div>
+                </React.Fragment>
+              )
+            }
+
+            // Bubble border radius — iMessage style tails
+            const br = own
+              ? `18px 18px ${isLastInGroup ? '4px' : '18px'} 18px`
+              : `18px 18px 18px ${isLastInGroup ? '4px' : '18px'}`
+
+            return (
+              <React.Fragment key={msg.id}>
+                {/* Date separator */}
+                {showDate && (
+                  <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
+                    <span style={{
+                      fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
+                      background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99,
+                      letterSpacing: 0.3, textTransform: 'uppercase',
+                    }}>
+                      {formatDateSeparator(msg.created_at, t)}
+                    </span>
+                  </div>
+                )}
+
+                <div style={{
+                  display: 'flex', alignItems: own ? 'flex-end' : 'flex-start',
+                  flexDirection: own ? 'row-reverse' : 'row',
+                  gap: 6, marginTop: isNewGroup ? 10 : 1,
+                  paddingLeft: own ? 40 : 0, paddingRight: own ? 0 : 40,
+                  transition: 'transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease',
+                  ...(deletingIds.has(msg.id) ? { transform: 'scale(0.3)', opacity: 0, maxHeight: 0, marginTop: 0, overflow: 'hidden' } : {}),
+                }}>
+                  {/* Avatar slot for others */}
+                  {!own && (
+                    <div style={{ width: 28, flexShrink: 0, alignSelf: 'flex-end' }}>
+                      {showAvatar && (
+                        msg.user_avatar ? (
+                          <img src={msg.user_avatar} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover' }} />
+                        ) : (
+                          <div style={{
+                            width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-tertiary)',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            fontSize: 11, fontWeight: 700, color: 'var(--text-muted)',
+                          }}>
+                            {(msg.username || '?')[0].toUpperCase()}
+                          </div>
+                        )
+                      )}
+                    </div>
+                  )}
+
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: own ? 'flex-end' : 'flex-start', maxWidth: '78%', minWidth: 0 }}>
+                    {/* Username for others at group start */}
+                    {!own && isNewGroup && (
+                      <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 2, paddingLeft: 4 }}>
+                        {msg.username}
+                      </span>
+                    )}
+
+                    {/* Bubble */}
+                    <div
+                      style={{ position: 'relative' }}
+                      onMouseEnter={() => setHoveredId(msg.id)}
+                      onMouseLeave={() => setHoveredId(null)}
+                      onContextMenu={e => { e.preventDefault(); setReactMenu({ msgId: msg.id, x: e.clientX, y: e.clientY }) }}
+                      onTouchEnd={e => {
+                        const now = Date.now()
+                        const lastTap = e.currentTarget.dataset.lastTap || 0
+                        if (now - lastTap < 300) {
+                          e.preventDefault()
+                          const touch = e.changedTouches?.[0]
+                          if (touch) setReactMenu({ msgId: msg.id, x: touch.clientX, y: touch.clientY })
+                        }
+                        e.currentTarget.dataset.lastTap = now
+                      }}
+                    >
+                      {bigEmoji ? (
+                        <div style={{ fontSize: 40, lineHeight: 1.2, padding: '2px 0' }}>
+                          {msg.text}
+                        </div>
+                      ) : (
+                        <div style={{
+                          background: own ? '#007AFF' : 'var(--bg-secondary)',
+                          color: own ? '#fff' : 'var(--text-primary)',
+                          borderRadius: br, padding: hasReply ? '4px 4px 8px 4px' : '8px 14px',
+                          fontSize: 14, lineHeight: 1.4, wordBreak: 'break-word', whiteSpace: 'pre-wrap',
+                        }}>
+                          {/* Inline reply quote */}
+                          {hasReply && (
+                            <div style={{
+                              padding: '5px 10px', marginBottom: 4, borderRadius: 12,
+                              background: own ? 'rgba(255,255,255,0.15)' : 'var(--bg-tertiary)',
+                              fontSize: 12, lineHeight: 1.3,
+                            }}>
+                              <div style={{ fontWeight: 600, fontSize: 11, opacity: 0.7, marginBottom: 1 }}>
+                                {msg.reply_username || ''}
+                              </div>
+                              <div style={{ opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                {(msg.reply_text || '').slice(0, 80)}
+                              </div>
+                            </div>
+                          )}
+                          {hasReply ? (
+                            <div style={{ padding: '0 10px 4px' }}><MessageText text={msg.text} /></div>
+                          ) : <MessageText text={msg.text} />}
+                          {(msg.text.match(URL_REGEX) || []).slice(0, 1).map(url => (
+                            <LinkPreview key={url} url={url} tripId={tripId} own={own} onLoad={() => { if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 50) }} />
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Hover actions */}
+                      <div style={{
+                        position: 'absolute', top: -14,
+                        display: 'flex', gap: 2,
+                        opacity: hoveredId === msg.id ? 1 : 0,
+                        pointerEvents: hoveredId === msg.id ? 'auto' : 'none',
+                        transition: 'opacity .1s',
+                        ...(own ? { left: -6 } : { right: -6 }),
+                      }}>
+                        <button onClick={() => setReplyTo(msg)} title="Reply" style={{
+                          width: 24, height: 24, borderRadius: '50%', border: 'none',
+                          background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                          cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
+                          boxShadow: '0 2px 8px rgba(0,0,0,0.15)', transition: 'transform 0.12s',
+                        }}
+                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)' }}
+                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)' }}
+                        >
+                          <Reply size={11} />
+                        </button>
+                        {own && (
+                          <button onClick={() => handleDelete(msg.id)} title="Delete" style={{
+                            width: 24, height: 24, borderRadius: '50%', border: 'none',
+                            background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)', transition: 'transform 0.12s, background 0.15s, color 0.15s',
+                          }}
+                            onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)'; e.currentTarget.style.background = '#ef4444'; e.currentTarget.style.color = '#fff' }}
+                            onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
+                          >
+                            <Trash2 size={11} />
+                          </button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Reactions — iMessage style floating badge */}
+                    {msg.reactions?.length > 0 && (
+                      <div style={{
+                        display: 'flex', gap: 3, marginTop: -6, marginBottom: 4,
+                        justifyContent: own ? 'flex-end' : 'flex-start',
+                        paddingLeft: own ? 0 : 8, paddingRight: own ? 8 : 0,
+                        position: 'relative', zIndex: 1,
+                      }}>
+                        <div style={{
+                          display: 'inline-flex', alignItems: 'center', gap: 2, padding: '3px 6px',
+                          borderRadius: 99, background: 'var(--bg-card)',
+                          boxShadow: '0 1px 6px rgba(0,0,0,0.12)', border: '1px solid var(--border-faint)',
+                        }}>
+                          {msg.reactions.map(r => {
+                            const myReaction = r.users.some(u => String(u.user_id) === String(currentUser.id))
+                            return (
+                              <ReactionBadge key={r.emoji} reaction={r} currentUserId={currentUser.id} onReact={() => handleReact(msg.id, r.emoji)} />
+                            )
+                          })}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Timestamp — only on last message of group */}
+                    {isLastInGroup && (
+                      <span style={{ fontSize: 9, color: 'var(--text-faint)', marginTop: 2, padding: '0 4px' }}>
+                        {formatTime(msg.created_at, is12h)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </React.Fragment>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Composer */}
+      <div style={{ flexShrink: 0, padding: '8px 12px calc(12px + env(safe-area-inset-bottom, 0px))', borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }}>
+        {/* Reply preview */}
+        {replyTo && (
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
+            padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
+            borderLeft: '3px solid #007AFF', fontSize: 12, color: 'var(--text-muted)',
+          }}>
+            <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+              <strong>{replyTo.username}</strong>: {(replyTo.text || '').slice(0, 60)}
+            </span>
+            <button onClick={() => setReplyTo(null)} style={{
+              background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)',
+              display: 'flex', flexShrink: 0,
+            }}>
+              <X size={14} />
+            </button>
+          </div>
+        )}
+
+        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
+          {/* Emoji button */}
+          <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
+            width: 34, height: 34, borderRadius: '50%', border: 'none',
+            background: showEmoji ? 'var(--bg-hover)' : 'transparent',
+            color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
+          }}>
+            <Smile size={20} />
+          </button>
+
+          <textarea
+            ref={textareaRef}
+            rows={1}
+            style={{
+              flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
+              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
+              background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
+              maxHeight: 100, overflowY: 'hidden',
+            }}
+            placeholder={t('collab.chat.placeholder')}
+            value={text}
+            onChange={handleTextChange}
+            onKeyDown={handleKeyDown}
+          />
+
+          {/* Send */}
+          <button onClick={handleSend} disabled={!text.trim() || sending} style={{
+            width: 34, height: 34, borderRadius: '50%', border: 'none',
+            background: text.trim() ? '#007AFF' : 'var(--border-primary)',
+            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
+            transition: 'background 0.15s',
+          }}>
+            <ArrowUp size={18} strokeWidth={2.5} />
+          </button>
+        </div>
+      </div>
+
+      {/* Emoji picker */}
+      {showEmoji && <EmojiPicker onSelect={handleEmojiSelect} onClose={() => setShowEmoji(false)} anchorRef={emojiBtnRef} containerRef={containerRef} />}
+
+      {/* Reaction quick menu (right-click) */}
+      {reactMenu && ReactDOM.createPortal(
+        <ReactionMenu x={reactMenu.x} y={reactMenu.y} onReact={(emoji) => handleReact(reactMenu.msgId, emoji)} onClose={() => setReactMenu(null)} />,
+        document.body
+      )}
+    </div>
+  )
+}

client/src/components/Collab/CollabPanel.tsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from 'react'
+import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+import { MessageCircle, StickyNote, BarChart3, Sparkles } from 'lucide-react'
+import CollabChat from './CollabChat'
+import CollabNotes from './CollabNotes'
+import CollabPolls from './CollabPolls'
+import WhatsNextWidget from './WhatsNextWidget'
+
+function useIsDesktop(breakpoint = 1024) {
+  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= breakpoint)
+  useEffect(() => {
+    const check = () => setIsDesktop(window.innerWidth >= breakpoint)
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [breakpoint])
+  return isDesktop
+}
+
+const card = {
+  display: 'flex', flexDirection: 'column',
+  background: 'var(--bg-card)', borderRadius: 16, border: '1px solid var(--border-faint)',
+  overflow: 'hidden', minHeight: 0,
+}
+
+interface TripMember {
+  id: number
+  username: string
+  avatar_url?: string | null
+}
+
+interface CollabPanelProps {
+  tripId: number
+  tripMembers?: TripMember[]
+}
+
+export default function CollabPanel({ tripId, tripMembers = [] }: CollabPanelProps) {
+  const { user } = useAuthStore()
+  const { t } = useTranslation()
+  const [mobileTab, setMobileTab] = useState('chat')
+  const isDesktop = useIsDesktop()
+
+  const tabs = [
+    { id: 'chat', label: t('collab.tabs.chat') || 'Chat', icon: MessageCircle },
+    { id: 'notes', label: t('collab.tabs.notes') || 'Notes', icon: StickyNote },
+    { id: 'polls', label: t('collab.tabs.polls') || 'Polls', icon: BarChart3 },
+    { id: 'next', label: t('collab.whatsNext.title') || "What's Next", icon: Sparkles },
+  ]
+
+  if (isDesktop) {
+    return (
+      <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
+        {/* Chat — left, fixed width */}
+        <div style={{ ...card, flex: '0 0 380px' }}>
+          <CollabChat tripId={tripId} currentUser={user} />
+        </div>
+
+        {/* Right column: Notes top, Polls + What's Next bottom */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', minHeight: 0 }}>
+          {/* Notes — top */}
+          <div style={{ ...card, flex: 1 }}>
+            <CollabNotes tripId={tripId} currentUser={user} />
+          </div>
+
+          {/* Polls + What's Next — bottom row */}
+          <div style={{ flex: 1, display: 'flex', gap: 12, overflow: 'hidden', minHeight: 0 }}>
+            <div style={{ ...card, flex: 1 }}>
+              <CollabPolls tripId={tripId} currentUser={user} />
+            </div>
+            <div style={{ ...card, flex: 1 }}>
+              <WhatsNextWidget tripMembers={tripMembers} />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Mobile: tab bar + single panel
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'absolute', inset: 0 }}>
+      <div style={{
+        display: 'flex', gap: 2, padding: '8px 12px', borderBottom: '1px solid var(--border-faint)',
+        background: 'var(--bg-card)', flexShrink: 0,
+      }}>
+        {tabs.map(tab => {
+          const Icon = tab.icon
+          const active = mobileTab === tab.id
+          return (
+            <button key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
+              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+              padding: '8px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
+              background: active ? 'var(--accent)' : 'transparent',
+              color: active ? 'var(--accent-text)' : 'var(--text-muted)',
+              fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
+              transition: 'all 0.15s',
+            }}>
+              {tab.label}
+            </button>
+          )
+        })}
+      </div>
+
+      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+        {mobileTab === 'chat' && <CollabChat tripId={tripId} currentUser={user} />}
+        {mobileTab === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
+        {mobileTab === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
+        {mobileTab === 'next' && <WhatsNextWidget tripMembers={tripMembers} />}
+      </div>
+    </div>
+  )
+}

client/src/components/Collab/CollabPolls.tsx

@@ -0,0 +1,471 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { Plus, Trash2, X, Check, BarChart3, Lock, Clock } from 'lucide-react'
+import { collabApi } from '../../api/client'
+import { addListener, removeListener } from '../../api/websocket'
+import { useTranslation } from '../../i18n'
+import ReactDOM from 'react-dom'
+import type { User } from '../../types'
+
+interface PollVoter {
+  user_id: number
+  username: string
+  avatar_url: string | null
+}
+
+interface PollOption {
+  id: number
+  text: string
+  voters: PollVoter[]
+}
+
+interface Poll {
+  id: number
+  question: string
+  options: PollOption[]
+  multi_choice: boolean
+  is_closed: boolean
+  deadline: string | null
+  created_by: number
+  created_at: string
+}
+
+const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
+
+function timeRemaining(deadline) {
+  if (!deadline) return null
+  const diff = new Date(deadline).getTime() - Date.now()
+  if (diff <= 0) return null
+  const mins = Math.floor(diff / 60000)
+  const hrs = Math.floor(mins / 60)
+  const days = Math.floor(hrs / 24)
+  if (days > 0) return `${days}d ${hrs % 24}h`
+  if (hrs > 0) return `${hrs}h ${mins % 60}m`
+  return `${mins}m`
+}
+
+function isExpired(deadline) {
+  if (!deadline) return false
+  return new Date(deadline).getTime() <= Date.now()
+}
+
+function totalVotes(poll) {
+  return (poll.options || []).reduce((s, o) => s + (o.voters?.length || 0), 0)
+}
+
+// ── Create Poll Modal ────────────────────────────────────────────────────────
+interface CreatePollModalProps {
+  onClose: () => void
+  onCreate: (data: { question: string; options: string[]; multi_choice: boolean }) => Promise<void>
+  t: (key: string) => string
+}
+
+function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
+  const [question, setQuestion] = useState('')
+  const [options, setOptions] = useState(['', ''])
+  const [multiChoice, setMultiChoice] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+
+  const addOption = () => setOptions(prev => [...prev, ''])
+  const removeOption = (i) => setOptions(prev => prev.filter((_, j) => j !== i))
+  const updateOption = (i, v) => setOptions(prev => prev.map((o, j) => j === i ? v : o))
+
+  const canSubmit = question.trim() && options.filter(o => o.trim()).length >= 2 && !submitting
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!canSubmit) return
+    setSubmitting(true)
+    try {
+      await onCreate({ question: question.trim(), options: options.filter(o => o.trim()), multiple_choice: multiChoice })
+      onClose()
+    } catch {} finally { setSubmitting(false) }
+  }
+
+  return ReactDOM.createPortal(
+    <div style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={onClose}>
+      <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onClick={e => e.stopPropagation()} onSubmit={handleSubmit}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
+          <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('collab.polls.new')}</h3>
+          <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}><X size={16} /></button>
+        </div>
+        <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {/* Question */}
+          <div>
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.question')}</div>
+            <input autoFocus value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder') || 'Ask a question...'} style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
+          </div>
+
+          {/* Options */}
+          <div>
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.options')}</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {options.map((opt, i) => (
+                <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+                  <input value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`}
+                    style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
+                  {options.length > 2 && (
+                    <button type="button" onClick={() => removeOption(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={14} /></button>
+                  )}
+                </div>
+              ))}
+              <button type="button" onClick={addOption} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 10, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 12, fontFamily: FONT }}>
+                <Plus size={12} /> {t('collab.polls.addOption')}
+              </button>
+            </div>
+          </div>
+
+          {/* Multi choice toggle */}
+          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+            <div onClick={() => setMultiChoice(!multiChoice)} style={{
+              width: 36, height: 20, borderRadius: 10, padding: 2, cursor: 'pointer',
+              background: multiChoice ? '#007AFF' : 'var(--border-primary)', transition: 'background 0.2s',
+              display: 'flex', alignItems: 'center',
+            }}>
+              <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'transform 0.2s', transform: multiChoice ? 'translateX(16px)' : 'translateX(0)' }} />
+            </div>
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FONT }}>{t('collab.polls.multiChoice')}</span>
+          </label>
+
+          {/* Submit */}
+          <button type="submit" disabled={!canSubmit} style={{
+            width: '100%', borderRadius: 99, padding: '9px 14px', background: canSubmit ? 'var(--accent)' : 'var(--border-primary)',
+            color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 13, fontWeight: 600, border: 'none', cursor: canSubmit ? 'pointer' : 'default', fontFamily: FONT,
+          }}>
+            {submitting ? '...' : t('collab.polls.create')}
+          </button>
+        </div>
+      </form>
+    </div>,
+    document.body
+  )
+}
+
+// ── Voter Chip with custom tooltip ────────────────────────────────────────────
+interface VoterChipProps {
+  voter: PollVoter
+  offset: boolean
+}
+
+function VoterChip({ voter, offset }: VoterChipProps) {
+  const [hover, setHover] = useState(false)
+  const ref = React.useRef(null)
+  const [pos, setPos] = useState({ top: 0, left: 0 })
+
+  return (
+    <>
+      <div ref={ref}
+        onMouseEnter={() => {
+          if (ref.current) {
+            const rect = ref.current.getBoundingClientRect()
+            setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
+          }
+          setHover(true)
+        }}
+        onMouseLeave={() => setHover(false)}
+        style={{
+          width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: 7, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden',
+          border: '1.5px solid var(--bg-card)', marginLeft: offset ? -5 : 0, flexShrink: 0,
+        }}>
+        {voter.avatar_url ? <img src={voter.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (voter.username || '?')[0].toUpperCase()}
+      </div>
+      {hover && ReactDOM.createPortal(
+        <div style={{
+          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
+          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
+          background: 'var(--bg-card)', color: 'var(--text-primary)',
+          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)',
+        }}>
+          {voter.username}
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
+
+// ── Poll Card ────────────────────────────────────────────────────────────────
+interface PollCardProps {
+  poll: Poll
+  currentUser: User
+  onVote: (pollId: number, optionId: number) => Promise<void>
+  onClose: (pollId: number) => Promise<void>
+  onDelete: (pollId: number) => Promise<void>
+  t: (key: string) => string
+}
+
+function PollCard({ poll, currentUser, onVote, onClose, onDelete, t }: PollCardProps) {
+  const total = totalVotes(poll)
+  const isClosed = poll.is_closed || isExpired(poll.deadline)
+  const remaining = timeRemaining(poll.deadline)
+  const hasVoted = (poll.options || []).some(o => (o.voters || []).some(v => String(v.user_id) === String(currentUser.id)))
+
+  return (
+    <div style={{
+      borderRadius: 14, border: '1px solid var(--border-faint)', overflow: 'hidden',
+      background: 'var(--bg-card)', fontFamily: FONT,
+    }}>
+      {/* Header */}
+      <div style={{
+        padding: '10px 12px', display: 'flex', alignItems: 'flex-start', gap: 8,
+        background: isClosed ? 'var(--bg-secondary)' : 'transparent',
+      }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35, wordBreak: 'break-word' }}>
+            {poll.question}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
+            {isClosed && (
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
+                <Lock size={8} /> {t('collab.polls.closed')}
+              </span>
+            )}
+            {remaining && !isClosed && (
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 9, fontWeight: 600, color: '#f59e0b', background: '#f59e0b18', padding: '2px 7px', borderRadius: 99 }}>
+                <Clock size={8} /> {remaining}
+              </span>
+            )}
+            {poll.multiple_choice && (
+              <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
+                {t('collab.polls.multiChoice')}
+              </span>
+            )}
+            <span style={{ fontSize: 9, color: 'var(--text-faint)' }}>
+              {total} {total === 1 ? 'vote' : 'votes'}
+            </span>
+          </div>
+        </div>
+        {/* Actions */}
+        <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
+          {!isClosed && (
+            <button onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
+              style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <Lock size={12} />
+            </button>
+          )}
+          <button onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
+            style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+            onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
+            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+            <Trash2 size={12} />
+          </button>
+        </div>
+      </div>
+
+      {/* Options */}
+      <div style={{ padding: '4px 12px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {(poll.options || []).map((opt, idx) => {
+          const count = opt.voters?.length || 0
+          const pct = total > 0 ? Math.round((count / total) * 100) : 0
+          const myVote = (opt.voters || []).some(v => String(v.user_id) === String(currentUser.id))
+          const isWinner = isClosed && count === Math.max(...(poll.options || []).map(o => o.voters?.length || 0)) && count > 0
+
+          return (
+            <button key={idx} onClick={() => !isClosed && onVote(poll.id, idx)}
+              disabled={isClosed}
+              style={{
+                position: 'relative', display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 12px', borderRadius: 10, border: 'none', cursor: isClosed ? 'default' : 'pointer',
+                background: 'var(--bg-secondary)', fontFamily: FONT, textAlign: 'left', width: '100%',
+                overflow: 'hidden', transition: 'transform 0.1s',
+              }}
+              onMouseEnter={e => { if (!isClosed) e.currentTarget.style.transform = 'scale(1.01)' }}
+              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
+            >
+              {/* Progress bar background */}
+              <div style={{
+                position: 'absolute', left: 0, top: 0, bottom: 0,
+                width: `${pct}%`, borderRadius: 10,
+                background: myVote ? '#007AFF20' : isWinner ? '#10b98118' : 'var(--bg-tertiary)',
+                transition: 'width 0.4s ease',
+              }} />
+
+              {/* Check circle */}
+              <div style={{
+                width: 20, height: 20, borderRadius: '50%', flexShrink: 0, position: 'relative',
+                border: myVote ? '2px solid #007AFF' : '2px solid var(--border-primary)',
+                background: myVote ? '#007AFF' : 'transparent',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                transition: 'all 0.2s',
+              }}>
+                {myVote && <Check size={11} color="#fff" strokeWidth={3} />}
+              </div>
+
+              {/* Label */}
+              <span style={{
+                flex: 1, fontSize: 13, fontWeight: myVote || isWinner ? 600 : 400,
+                color: 'var(--text-primary)', position: 'relative', zIndex: 1,
+              }}>
+                {typeof opt === 'string' ? opt : opt.label || opt}
+              </span>
+
+              {/* Voter avatars */}
+              {(opt.voters || []).length > 0 && (hasVoted || isClosed) && (
+                <div style={{ display: 'flex', position: 'relative', zIndex: 1 }}>
+                  {(opt.voters || []).slice(0, 3).map((v, vi) => (
+                    <VoterChip key={v.user_id || vi} voter={v} offset={vi > 0} />
+                  ))}
+                </div>
+              )}
+
+              {/* Percentage */}
+              {(hasVoted || isClosed) && (
+                <span style={{
+                  fontSize: 12, fontWeight: 700, color: myVote ? '#007AFF' : 'var(--text-muted)',
+                  position: 'relative', zIndex: 1, minWidth: 32, textAlign: 'right',
+                }}>
+                  {pct}%
+                </span>
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ── Main Component ───────────────────────────────────────────────────────────
+interface CollabPollsProps {
+  tripId: number
+  currentUser: User
+}
+
+export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
+  const { t } = useTranslation()
+  const [polls, setPolls] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showForm, setShowForm] = useState(false)
+
+  useEffect(() => {
+    collabApi.getPolls(tripId).then(data => {
+      setPolls(Array.isArray(data) ? data : data.polls || [])
+    }).catch(() => {}).finally(() => setLoading(false))
+  }, [tripId])
+
+  // WebSocket
+  useEffect(() => {
+    const handler = (msg) => {
+      if (!msg?.type) return
+      if (msg.type === 'collab:poll:created' && msg.poll) {
+        setPolls(prev => prev.some(p => p.id === msg.poll.id) ? prev : [msg.poll, ...prev])
+      }
+      if (msg.type === 'collab:poll:voted' && msg.poll) {
+        setPolls(prev => prev.map(p => p.id === msg.poll.id ? msg.poll : p))
+      }
+      if (msg.type === 'collab:poll:closed' && msg.poll) {
+        setPolls(prev => prev.map(p => p.id === msg.poll.id ? { ...p, ...msg.poll, is_closed: true } : p))
+      }
+      if (msg.type === 'collab:poll:deleted') {
+        const id = msg.pollId || msg.poll?.id
+        if (id) setPolls(prev => prev.filter(p => p.id !== id))
+      }
+    }
+    addListener(handler)
+    return () => removeListener(handler)
+  }, [])
+
+  const handleCreate = useCallback(async (data) => {
+    const result = await collabApi.createPoll(tripId, data)
+    const created = result.poll || result
+    setPolls(prev => prev.some(p => p.id === created.id) ? prev : [created, ...prev])
+    setShowForm(false)
+  }, [tripId])
+
+  const handleVote = useCallback(async (pollId, optionIndex) => {
+    try {
+      const result = await collabApi.votePoll(tripId, pollId, optionIndex)
+      const updated = result.poll || result
+      setPolls(prev => prev.map(p => p.id === updated.id ? updated : p))
+    } catch {}
+  }, [tripId])
+
+  const handleClose = useCallback(async (pollId) => {
+    try {
+      await collabApi.closePoll(tripId, pollId)
+      setPolls(prev => prev.map(p => p.id === pollId ? { ...p, is_closed: true } : p))
+    } catch {}
+  }, [tripId])
+
+  const handleDelete = useCallback(async (pollId) => {
+    try {
+      await collabApi.deletePoll(tripId, pollId)
+      setPolls(prev => prev.filter(p => p.id !== pollId))
+    } catch {}
+  }, [tripId])
+
+  const activePolls = polls.filter(p => !p.is_closed && !isExpired(p.deadline))
+  const closedPolls = polls.filter(p => p.is_closed || isExpired(p.deadline))
+
+  // Deadline ticker
+  const [, setTick] = useState(0)
+  useEffect(() => {
+    if (!polls.some(p => p.deadline && !p.is_closed)) return
+    const iv = setInterval(() => setTick(t => t + 1), 30000)
+    return () => clearInterval(iv)
+  }, [polls])
+
+  if (loading) {
+    return (
+      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONT }}>
+        <div style={{ width: 20, height: 20, border: '2px solid var(--border-primary)', borderTopColor: 'var(--text-primary)', borderRadius: '50%', animation: 'collab-poll-spin 0.7s linear infinite' }} />
+        <style>{`@keyframes collab-poll-spin { to { transform: rotate(360deg) } }`}</style>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
+        <h3 style={{ margin: 0, fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+          <BarChart3 size={14} color="var(--text-faint)" />
+          {t('collab.polls.title')}
+        </h3>
+        <button onClick={() => setShowForm(true)} style={{
+          display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
+          background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
+          fontFamily: FONT, border: 'none', cursor: 'pointer',
+        }}>
+          <Plus size={12} /> {t('collab.polls.new')}
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '0 12px 12px' }}>
+        {polls.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 20px', textAlign: 'center', height: '100%' }}>
+            <BarChart3 size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.polls.empty')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.polls.emptyHint')}</div>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {activePolls.length > 0 && activePolls.map(poll => (
+              <PollCard key={poll.id} poll={poll} currentUser={currentUser} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
+            ))}
+            {closedPolls.length > 0 && (
+              <>
+                {activePolls.length > 0 && (
+                  <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, padding: '8px 0 2px' }}>
+                    {t('collab.polls.closedSection') || 'Closed'}
+                  </div>
+                )}
+                {closedPolls.map(poll => (
+                  <PollCard key={poll.id} poll={poll} currentUser={currentUser} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
+                ))}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Create Modal */}
+      {showForm && <CreatePollModal onClose={() => setShowForm(false)} onCreate={handleCreate} t={t} />}
+    </div>
+  )
+}

client/src/components/Collab/WhatsNextWidget.tsx

@@ -0,0 +1,199 @@
+import React, { useMemo } from 'react'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { MapPin, Clock, Calendar, Users, Sparkles } from 'lucide-react'
+
+function formatTime(timeStr, is12h) {
+  if (!timeStr) return ''
+  const [h, m] = timeStr.split(':').map(Number)
+  if (is12h) {
+    const period = h >= 12 ? 'PM' : 'AM'
+    const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+    return `${h12}:${String(m).padStart(2, '0')} ${period}`
+  }
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+}
+
+function formatDayLabel(date, t, locale) {
+  const d = new Date(date + 'T00:00:00')
+  const now = new Date()
+  const tomorrow = new Date(); tomorrow.setDate(now.getDate() + 1)
+
+  if (d.toDateString() === now.toDateString()) return t('collab.whatsNext.today') || 'Today'
+  if (d.toDateString() === tomorrow.toDateString()) return t('collab.whatsNext.tomorrow') || 'Tomorrow'
+
+  return d.toLocaleDateString(locale || undefined, { weekday: 'short', day: 'numeric', month: 'short' })
+}
+
+interface TripMember {
+  id: number
+  username: string
+  avatar_url?: string | null
+}
+
+interface WhatsNextWidgetProps {
+  tripMembers?: TripMember[]
+}
+
+export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetProps) {
+  const { days, assignments } = useTripStore()
+  const { t, locale } = useTranslation()
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+
+  const upcoming = useMemo(() => {
+    const now = new Date()
+    const nowDate = now.toISOString().split('T')[0]
+    const nowTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
+    const items = []
+
+    for (const day of (days || [])) {
+      if (!day.date) continue
+      const dayAssignments = assignments[String(day.id)] || []
+      for (const a of dayAssignments) {
+        if (!a.place) continue
+        // Include: today (future times) + all future days
+        const isFutureDay = day.date > nowDate
+        const isTodayFuture = day.date === nowDate && (!a.place.place_time || a.place.place_time >= nowTime)
+        if (isFutureDay || isTodayFuture) {
+          items.push({
+            id: a.id,
+            name: a.place.name,
+            time: a.place.place_time,
+            endTime: a.place.end_time,
+            date: day.date,
+            dayTitle: day.title,
+            category: a.place.category,
+            participants: (a.participants && a.participants.length > 0)
+              ? a.participants
+              : tripMembers.map(m => ({ user_id: m.id, username: m.username, avatar: m.avatar })),
+            address: a.place.address,
+          })
+        }
+      }
+    }
+
+    items.sort((a, b) => {
+      const da = a.date + (a.time || '99:99')
+      const db = b.date + (b.time || '99:99')
+      return da.localeCompare(db)
+    })
+
+    return items.slice(0, 8)
+  }, [days, assignments, tripMembers])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      {/* Header */}
+      <div style={{
+        padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
+      }}>
+        <Sparkles size={14} color="var(--text-faint)" />
+        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.3, textTransform: 'uppercase' }}>
+          {t('collab.whatsNext.title') || "What's Next"}
+        </span>
+      </div>
+
+      {/* List */}
+      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '8px 10px' }}>
+        {upcoming.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '48px 20px', textAlign: 'center' }}>
+            <Calendar size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.whatsNext.empty')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.whatsNext.emptyHint')}</div>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {upcoming.map((item, idx) => {
+              const prevItem = upcoming[idx - 1]
+              const showDayHeader = !prevItem || prevItem.date !== item.date
+
+              return (
+                <React.Fragment key={item.id}>
+                  {showDayHeader && (
+                    <div style={{
+                      fontSize: 10, fontWeight: 500, color: 'var(--text-faint)',
+                      textTransform: 'uppercase', letterSpacing: 0.5,
+                      padding: idx === 0 ? '0 4px 4px' : '8px 4px 4px',
+                    }}>
+                      {formatDayLabel(item.date, t, locale)}
+                      {item.dayTitle ? ` — ${item.dayTitle}` : ''}
+                    </div>
+                  )}
+
+                  <div style={{
+                    display: 'flex', gap: 10, padding: '8px 10px', borderRadius: 10,
+                    background: 'var(--bg-secondary)', transition: 'background 0.1s',
+                  }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+                  >
+                    {/* Time column */}
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: 44, flexShrink: 0 }}>
+                      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                        {item.time ? formatTime(item.time, is12h) : 'TBD'}
+                      </span>
+                      {item.endTime && (
+                        <>
+                          <span style={{ fontSize: 7, color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.3, margin: '2px 0', textTransform: 'uppercase' }}>
+                            {t('collab.whatsNext.until') || 'bis'}
+                          </span>
+                          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                            {formatTime(item.endTime, is12h)}
+                          </span>
+                        </>
+                      )}
+                    </div>
+
+                    {/* Divider */}
+                    <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-faint)', flexShrink: 0, margin: '2px 0' }} />
+
+                    {/* Details */}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {item.name}
+                      </div>
+                      {item.address && (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 2 }}>
+                          <MapPin size={9} color="var(--text-faint)" style={{ flexShrink: 0 }} />
+                          <span style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {item.address}
+                          </span>
+                        </div>
+                      )}
+
+                      {/* Participants */}
+                      {item.participants.length > 0 && (
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 5 }}>
+                          {item.participants.map(p => (
+                            <div key={p.user_id} style={{
+                              display: 'flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 3px',
+                              borderRadius: 99, background: 'var(--bg-tertiary)', border: '1px solid var(--border-faint)',
+                            }}>
+                              <div style={{
+                                width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-secondary)',
+                                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                fontSize: 7, fontWeight: 700, color: 'var(--text-muted)',
+                                overflow: 'hidden', flexShrink: 0,
+                              }}>
+                                {p.avatar
+                                  ? <img src={`/uploads/avatars/${p.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                  : p.username?.[0]?.toUpperCase()
+                                }
+                              </div>
+                              <span style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)' }}>{p.username}</span>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </React.Fragment>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Dashboard/CurrencyWidget.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect, useCallback } from 'react'
+import { ArrowRightLeft, RefreshCw } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import CustomSelect from '../shared/CustomSelect'
+
+const CURRENCIES = [
+  'EUR','USD','GBP','JPY','CHF','CAD','AUD','NZD','CNY','HKD',
+  'SGD','THB','TRY','SEK','NOK','DKK','PLN','CZK','HUF','RON',
+  'BGN','HRK','ISK','RUB','UAH','BRL','MXN','ARS','CLP','COP',
+  'INR','IDR','MYR','PHP','KRW','TWD','VND','ZAR','EGP','MAD',
+  'NGN','KES','AED','SAR','QAR','KWD','BHD','OMR','ILS',
+]
+
+const CURRENCY_OPTIONS = CURRENCIES.map(c => ({ value: c, label: c }))
+
+export default function CurrencyWidget() {
+  const { t } = useTranslation()
+  const [from, setFrom] = useState(() => localStorage.getItem('currency_from') || 'EUR')
+  const [to, setTo] = useState(() => localStorage.getItem('currency_to') || 'USD')
+  const [amount, setAmount] = useState('100')
+  const [rate, setRate] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const fetchRate = useCallback(async () => {
+    if (from === to) { setRate(1); return }
+    setLoading(true)
+    try {
+      const resp = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
+      const data = await resp.json()
+      setRate(data.rates?.[to] || null)
+    } catch { setRate(null) }
+    finally { setLoading(false) }
+  }, [from, to])
+
+  useEffect(() => { fetchRate() }, [fetchRate])
+  useEffect(() => { localStorage.setItem('currency_from', from) }, [from])
+  useEffect(() => { localStorage.setItem('currency_to', to) }, [to])
+
+  const swap = () => { setFrom(to); setTo(from) }
+  const rawResult = rate && amount ? (parseFloat(amount) * rate).toFixed(2) : null
+  const formatNumber = (num) => {
+    if (!num || num === '—') return '—'
+    return parseFloat(num).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  }
+  const result = rawResult
+
+  return (
+    <div className="rounded-2xl border p-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{t('dashboard.currency')}</span>
+        <button onClick={fetchRate} className="p-1 rounded-md transition-colors" style={{ color: 'var(--text-faint)' }}>
+          <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      {/* Amount */}
+      <div className="rounded-xl px-4 py-3 mb-3" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
+        <input
+          type="number"
+          value={amount}
+          onChange={e => setAmount(e.target.value)}
+          className="w-full text-2xl font-black tabular-nums outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+          style={{ color: 'var(--text-primary)', background: 'transparent', border: 'none' }}
+        />
+      </div>
+
+      {/* From / Swap / To */}
+      <div className="flex items-center gap-2 mb-3">
+        <div className="flex-1" style={{ '--bg-input': 'transparent', '--border-primary': 'transparent' }}>
+          <CustomSelect value={from} onChange={setFrom} options={CURRENCY_OPTIONS} searchable size="sm" />
+        </div>
+        <button onClick={swap} className="p-1.5 rounded-lg shrink-0 transition-colors" style={{ color: 'var(--text-muted)' }}>
+          <ArrowRightLeft size={13} />
+        </button>
+        <div className="flex-1" style={{ '--bg-input': 'transparent', '--border-primary': 'transparent' }}>
+          <CustomSelect value={to} onChange={setTo} options={CURRENCY_OPTIONS} searchable size="sm" />
+        </div>
+      </div>
+
+      {/* Result */}
+      <div className="rounded-xl p-3" style={{ background: 'var(--bg-secondary)' }}>
+        <p className="text-xl font-black tabular-nums" style={{ color: 'var(--text-primary)' }}>
+          {formatNumber(result)} <span className="text-sm font-semibold" style={{ color: 'var(--text-muted)' }}>{to}</span>
+        </p>
+        {rate && <p className="text-[10px] mt-0.5" style={{ color: 'var(--text-faint)' }}>1 {from} = {rate.toFixed(4)} {to}</p>}
+      </div>
+    </div>
+  )
+}

client/src/components/Dashboard/TimezoneWidget.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react'
+import { Clock, Plus, X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+const POPULAR_ZONES = [
+  { label: 'New York', tz: 'America/New_York' },
+  { label: 'London', tz: 'Europe/London' },
+  { label: 'Berlin', tz: 'Europe/Berlin' },
+  { label: 'Paris', tz: 'Europe/Paris' },
+  { label: 'Dubai', tz: 'Asia/Dubai' },
+  { label: 'Mumbai', tz: 'Asia/Kolkata' },
+  { label: 'Bangkok', tz: 'Asia/Bangkok' },
+  { label: 'Tokyo', tz: 'Asia/Tokyo' },
+  { label: 'Sydney', tz: 'Australia/Sydney' },
+  { label: 'Los Angeles', tz: 'America/Los_Angeles' },
+  { label: 'Chicago', tz: 'America/Chicago' },
+  { label: 'São Paulo', tz: 'America/Sao_Paulo' },
+  { label: 'Istanbul', tz: 'Europe/Istanbul' },
+  { label: 'Singapore', tz: 'Asia/Singapore' },
+  { label: 'Hong Kong', tz: 'Asia/Hong_Kong' },
+  { label: 'Seoul', tz: 'Asia/Seoul' },
+  { label: 'Moscow', tz: 'Europe/Moscow' },
+  { label: 'Cairo', tz: 'Africa/Cairo' },
+]
+
+function getTime(tz) {
+  try {
+    return new Date().toLocaleTimeString('de-DE', { timeZone: tz, hour: '2-digit', minute: '2-digit' })
+  } catch { return '—' }
+}
+
+function getOffset(tz) {
+  try {
+    const now = new Date()
+    const local = new Date(now.toLocaleString('en-US', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }))
+    const remote = new Date(now.toLocaleString('en-US', { timeZone: tz }))
+    const diff = (remote - local) / 3600000
+    const sign = diff >= 0 ? '+' : ''
+    return `${sign}${diff}h`
+  } catch { return '' }
+}
+
+export default function TimezoneWidget() {
+  const { t } = useTranslation()
+  const [zones, setZones] = useState(() => {
+    const saved = localStorage.getItem('dashboard_timezones')
+    return saved ? JSON.parse(saved) : [
+      { label: 'New York', tz: 'America/New_York' },
+      { label: 'Tokyo', tz: 'Asia/Tokyo' },
+    ]
+  })
+  const [now, setNow] = useState(Date.now())
+  const [showAdd, setShowAdd] = useState(false)
+
+  useEffect(() => {
+    const i = setInterval(() => setNow(Date.now()), 10000)
+    return () => clearInterval(i)
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('dashboard_timezones', JSON.stringify(zones))
+  }, [zones])
+
+  const addZone = (zone) => {
+    if (!zones.find(z => z.tz === zone.tz)) {
+      setZones([...zones, zone])
+    }
+    setShowAdd(false)
+  }
+
+  const removeZone = (tz) => setZones(zones.filter(z => z.tz !== tz))
+
+  const localTime = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  const rawZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const localZone = rawZone.split('/').pop().replace(/_/g, ' ')
+  // Show abbreviated timezone name (e.g. CET, CEST, EST)
+  const tzAbbr = new Date().toLocaleTimeString('en-US', { timeZoneName: 'short' }).split(' ').pop()
+
+  return (
+    <div className="rounded-2xl border p-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{t('dashboard.timezone')}</span>
+        <button onClick={() => setShowAdd(!showAdd)} className="p-1 rounded-md transition-colors" style={{ color: 'var(--text-faint)' }}>
+          <Plus size={12} />
+        </button>
+      </div>
+
+      {/* Local time */}
+      <div className="mb-3 pb-3" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+        <p className="text-2xl font-black tabular-nums" style={{ color: 'var(--text-primary)' }}>{localTime}</p>
+        <p className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{localZone} ({tzAbbr}) · {t('dashboard.localTime')}</p>
+      </div>
+
+      {/* Zone list */}
+      <div className="space-y-2">
+        {zones.map(z => (
+          <div key={z.tz} className="flex items-center justify-between group">
+            <div>
+              <p className="text-lg font-bold tabular-nums" style={{ color: 'var(--text-primary)' }}>{getTime(z.tz)}</p>
+              <p className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{z.label} <span style={{ color: 'var(--text-muted)' }}>{getOffset(z.tz)}</span></p>
+            </div>
+            <button onClick={() => removeZone(z.tz)} className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all" style={{ color: 'var(--text-faint)' }}>
+              <X size={11} />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Add zone dropdown */}
+      {showAdd && (
+        <div className="mt-2 rounded-xl p-2 max-h-[200px] overflow-auto" style={{ background: 'var(--bg-secondary)' }}>
+          {POPULAR_ZONES.filter(z => !zones.find(existing => existing.tz === z.tz)).map(z => (
+            <button key={z.tz} onClick={() => addZone(z)}
+              className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs text-left transition-colors"
+              style={{ color: 'var(--text-primary)' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+              <span className="font-medium">{z.label}</span>
+              <span className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{getTime(z.tz)}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Files/FileManager.tsx

@@ -0,0 +1,725 @@
+import ReactDOM from 'react-dom'
+import { useState, useCallback, useRef } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check } from 'lucide-react'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { filesApi } from '../../api/client'
+import type { Place, Reservation, TripFile, Day, AssignmentsMap } from '../../types'
+
+function isImage(mimeType) {
+  if (!mimeType) return false
+  return mimeType.startsWith('image/')
+}
+
+function getFileIcon(mimeType) {
+  if (!mimeType) return File
+  if (mimeType === 'application/pdf') return FileText
+  if (isImage(mimeType)) return FileImage
+  return File
+}
+
+function formatSize(bytes) {
+  if (!bytes) return ''
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+function formatDateWithLocale(dateStr, locale) {
+  if (!dateStr) return ''
+  try {
+    return new Date(dateStr).toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' })
+  } catch { return '' }
+}
+
+// Image lightbox
+interface ImageLightboxProps {
+  file: TripFile & { url: string }
+  onClose: () => void
+}
+
+function ImageLightbox({ file, onClose }: ImageLightboxProps) {
+  const { t } = useTranslation()
+  return (
+    <div
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      onClick={onClose}
+    >
+      <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
+        <img
+          src={file.url}
+          alt={file.original_name}
+          style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }}
+        />
+        <div style={{ position: 'absolute', top: -40, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
+          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80%' }}>{file.original_name}</span>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <a href={file.url} target="_blank" rel="noreferrer" style={{ color: 'rgba(255,255,255,0.7)', display: 'flex' }} title={t('files.openTab')}>
+              <ExternalLink size={16} />
+            </a>
+            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}>
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Source badge
+interface SourceBadgeProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  label: string
+}
+
+function SourceBadge({ icon: Icon, label }: SourceBadgeProps) {
+  return (
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 4,
+      fontSize: 10.5, color: '#4b5563',
+      background: 'var(--bg-tertiary)', border: '1px solid var(--border-primary)',
+      borderRadius: 6, padding: '2px 7px',
+      fontWeight: 500, maxWidth: '100%', overflow: 'hidden',
+    }}>
+      <Icon size={10} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+    </span>
+  )
+}
+
+function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avatarUrl?: string | null; size?: number }) {
+  const [hover, setHover] = useState(false)
+  const [pos, setPos] = useState({ top: 0, left: 0 })
+  const ref = useRef<HTMLDivElement>(null)
+
+  const onEnter = () => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect()
+      setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
+    }
+    setHover(true)
+  }
+
+  return (
+    <>
+      <div ref={ref} onMouseEnter={onEnter} onMouseLeave={() => setHover(false)}
+        style={{
+          width: size, height: size, borderRadius: '50%', border: '1.5px solid var(--border-primary)',
+          background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: size * 0.4, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+          cursor: 'default',
+        }}>
+        {avatarUrl
+          ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+          : name?.[0]?.toUpperCase()
+        }
+      </div>
+      {hover && ReactDOM.createPortal(
+        <div style={{
+          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
+          background: 'var(--bg-elevated)', color: 'var(--text-primary)',
+          fontSize: 11, fontWeight: 500, padding: '3px 8px', borderRadius: 6,
+          boxShadow: '0 2px 8px rgba(0,0,0,0.15)', whiteSpace: 'nowrap', zIndex: 9999,
+          pointerEvents: 'none',
+        }}>
+          {name}
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
+
+interface FileManagerProps {
+  files?: TripFile[]
+  onUpload: (fd: FormData) => Promise<any>
+  onDelete: (fileId: number) => Promise<void>
+  onUpdate: (fileId: number, data: Partial<TripFile>) => Promise<void>
+  places: Place[]
+  days?: Day[]
+  assignments?: AssignmentsMap
+  reservations?: Reservation[]
+  tripId: number
+  allowedFileTypes: Record<string, string[]>
+}
+
+export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, days = [], assignments = {}, reservations = [], tripId, allowedFileTypes }: FileManagerProps) {
+  const [uploading, setUploading] = useState(false)
+  const [filterType, setFilterType] = useState('all')
+  const [lightboxFile, setLightboxFile] = useState(null)
+  const [showTrash, setShowTrash] = useState(false)
+  const [trashFiles, setTrashFiles] = useState<TripFile[]>([])
+  const [loadingTrash, setLoadingTrash] = useState(false)
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+
+  const loadTrash = useCallback(async () => {
+    setLoadingTrash(true)
+    try {
+      const data = await filesApi.list(tripId, true)
+      setTrashFiles(data.files || [])
+    } catch { /* */ }
+    setLoadingTrash(false)
+  }, [tripId])
+
+  const toggleTrash = useCallback(() => {
+    if (!showTrash) loadTrash()
+    setShowTrash(v => !v)
+  }, [showTrash, loadTrash])
+
+  const refreshFiles = useCallback(async () => {
+    if (onUpdate) onUpdate(0, {} as any)
+  }, [onUpdate])
+
+  const handleStar = async (fileId: number) => {
+    try {
+      await filesApi.toggleStar(tripId, fileId)
+      refreshFiles()
+    } catch { /* */ }
+  }
+
+  const handleRestore = async (fileId: number) => {
+    try {
+      await filesApi.restore(tripId, fileId)
+      setTrashFiles(prev => prev.filter(f => f.id !== fileId))
+      refreshFiles()
+      toast.success(t('files.toast.restored'))
+    } catch {
+      toast.error(t('files.toast.restoreError'))
+    }
+  }
+
+  const handlePermanentDelete = async (fileId: number) => {
+    if (!confirm(t('files.confirm.permanentDelete'))) return
+    try {
+      await filesApi.permanentDelete(tripId, fileId)
+      setTrashFiles(prev => prev.filter(f => f.id !== fileId))
+      toast.success(t('files.toast.deleted'))
+    } catch {
+      toast.error(t('files.toast.deleteError'))
+    }
+  }
+
+  const handleEmptyTrash = async () => {
+    if (!confirm(t('files.confirm.emptyTrash'))) return
+    try {
+      await filesApi.emptyTrash(tripId)
+      setTrashFiles([])
+      toast.success(t('files.toast.trashEmptied') || 'Trash emptied')
+    } catch {
+      toast.error(t('files.toast.deleteError'))
+    }
+  }
+
+  const [lastUploadedIds, setLastUploadedIds] = useState<number[]>([])
+
+  const onDrop = useCallback(async (acceptedFiles) => {
+    if (acceptedFiles.length === 0) return
+    setUploading(true)
+    const uploadedIds: number[] = []
+    try {
+      for (const file of acceptedFiles) {
+        const formData = new FormData()
+        formData.append('file', file)
+        const result = await onUpload(formData)
+        const fileObj = result?.file || result
+        if (fileObj?.id) uploadedIds.push(fileObj.id)
+      }
+      toast.success(t('files.uploaded', { count: acceptedFiles.length }))
+      // Open assign modal for the last uploaded file
+      const lastId = uploadedIds[uploadedIds.length - 1]
+      if (lastId && (places.length > 0 || reservations.length > 0)) {
+        setAssignFileId(lastId)
+      }
+    } catch {
+      toast.error(t('files.uploadError'))
+    } finally {
+      setUploading(false)
+    }
+  }, [onUpload, toast, t, places, reservations])
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    maxSize: 50 * 1024 * 1024,
+    noClick: false,
+  })
+
+  const handlePaste = useCallback((e) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+    const pastedFiles = []
+    for (const item of Array.from(items)) {
+      if (item.kind === 'file') {
+        const file = item.getAsFile()
+        if (file) pastedFiles.push(file)
+      }
+    }
+    if (pastedFiles.length > 0) {
+      e.preventDefault()
+      onDrop(pastedFiles)
+    }
+  }, [onDrop])
+
+  const filteredFiles = files.filter(f => {
+    if (filterType === 'starred') return !!f.starred
+    if (filterType === 'pdf') return f.mime_type === 'application/pdf'
+    if (filterType === 'image') return isImage(f.mime_type)
+    if (filterType === 'doc') return (f.mime_type || '').includes('word') || (f.mime_type || '').includes('excel') || (f.mime_type || '').includes('text')
+    if (filterType === 'collab') return !!f.note_id
+    return true
+  })
+
+  const handleDelete = async (id) => {
+    try {
+      await onDelete(id)
+      toast.success(t('files.toast.trashed') || 'Moved to trash')
+    } catch {
+      toast.error(t('files.toast.deleteError'))
+    }
+  }
+
+  const [previewFile, setPreviewFile] = useState(null)
+  const [assignFileId, setAssignFileId] = useState<number | null>(null)
+
+  const handleAssign = async (fileId: number, data: { place_id?: number | null; reservation_id?: number | null }) => {
+    try {
+      await filesApi.update(tripId, fileId, data)
+      refreshFiles()
+    } catch {
+      toast.error(t('files.toast.assignError'))
+    }
+  }
+
+  const openFile = (file) => {
+    if (isImage(file.mime_type)) {
+      setLightboxFile(file)
+    } else {
+      setPreviewFile(file)
+    }
+  }
+
+  const renderFileRow = (file: TripFile, isTrash = false) => {
+    const FileIcon = getFileIcon(file.mime_type)
+    const linkedPlace = places?.find(p => p.id === file.place_id)
+    const linkedReservation = file.reservation_id
+      ? (reservations?.find(r => r.id === file.reservation_id) || { title: file.reservation_title })
+      : null
+    const fileUrl = file.url || (file.filename?.startsWith('files/') ? `/uploads/${file.filename}` : `/uploads/files/${file.filename}`)
+
+    return (
+      <div key={file.id} style={{
+        background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
+        padding: '10px 12px', display: 'flex', alignItems: 'flex-start', gap: 10,
+        transition: 'border-color 0.12s',
+        opacity: isTrash ? 0.7 : 1,
+      }}
+        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
+        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-primary)'}
+        className="group"
+      >
+        {/* Icon or thumbnail */}
+        <div
+          onClick={() => !isTrash && openFile({ ...file, url: fileUrl })}
+          style={{
+            flexShrink: 0, width: 36, height: 36, borderRadius: 8,
+            background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: isTrash ? 'default' : 'pointer', overflow: 'hidden',
+          }}
+        >
+          {isImage(file.mime_type)
+            ? <img src={fileUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+            : (() => {
+                const ext = (file.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                const isPdf = file.mime_type === 'application/pdf'
+                return (
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: isPdf ? '#ef44441a' : 'var(--bg-tertiary)' }}>
+                    <span style={{ fontSize: 9, fontWeight: 700, color: isPdf ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                  </div>
+                )
+              })()
+          }
+        </div>
+
+        {/* Info */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+            {file.uploaded_by_name && (
+              <AvatarChip name={file.uploaded_by_name} avatarUrl={file.uploaded_by_avatar} size={20} />
+            )}
+            {!isTrash && file.starred ? <Star size={12} fill="#facc15" color="#facc15" style={{ flexShrink: 0 }} /> : null}
+            <span
+              onClick={() => !isTrash && openFile({ ...file, url: fileUrl })}
+              style={{ fontWeight: 500, fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: isTrash ? 'default' : 'pointer' }}
+            >
+              {file.original_name}
+            </span>
+          </div>
+
+          {file.description && (
+            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.description}</p>
+          )}
+
+          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
+            {file.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatSize(file.file_size)}</span>}
+            <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatDateWithLocale(file.created_at, locale)}</span>
+
+            {linkedPlace && (
+              <SourceBadge icon={MapPin} label={`${t('files.sourcePlan')} · ${linkedPlace.name}`} />
+            )}
+            {linkedReservation && (
+              <SourceBadge icon={Ticket} label={`${t('files.sourceBooking')} · ${linkedReservation.title || t('files.sourceBooking')}`} />
+            )}
+            {file.note_id && (
+              <SourceBadge icon={StickyNote} label={t('files.sourceCollab') || 'Collab Notes'} />
+            )}
+          </div>
+        </div>
+
+        {/* Actions — always visible on mobile, hover on desktop */}
+        <div className="file-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
+          {isTrash ? (
+            <>
+              <button onClick={() => handleRestore(file.id)} title={t('files.restore') || 'Restore'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => e.currentTarget.style.color = '#22c55e'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <RotateCcw size={14} />
+              </button>
+              <button onClick={() => handlePermanentDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <Trash2 size={14} />
+              </button>
+            </>
+          ) : (
+            <>
+              <button onClick={() => handleStar(file.id)} title={file.starred ? t('files.unstar') || 'Unstar' : t('files.star') || 'Star'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: file.starred ? '#facc15' : 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => { if (!file.starred) e.currentTarget.style.color = '#facc15' }} onMouseLeave={e => { if (!file.starred) e.currentTarget.style.color = 'var(--text-faint)' }}>
+                <Star size={14} fill={file.starred ? '#facc15' : 'none'} />
+              </button>
+              <button onClick={() => setAssignFileId(file.id)} title={t('files.assign') || 'Assign'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <Pencil size={14} />
+              </button>
+              <button onClick={() => openFile({ ...file, url: fileUrl })} title={t('common.open')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <ExternalLink size={14} />
+              </button>
+              <button onClick={() => handleDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <Trash2 size={14} />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
+      {/* Lightbox */}
+      {lightboxFile && <ImageLightbox file={lightboxFile} onClose={() => setLightboxFile(null)} />}
+
+      {/* Assign modal */}
+      {assignFileId && ReactDOM.createPortal(
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 5000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          onClick={() => setAssignFileId(null)}>
+          <div style={{
+            background: 'var(--bg-card)', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
+            width: 'min(600px, calc(100vw - 32px))', maxHeight: '70vh', overflow: 'hidden', display: 'flex', flexDirection: 'column',
+          }} onClick={e => e.stopPropagation()}>
+            <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('files.assignTitle')}</div>
+                <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {files.find(f => f.id === assignFileId)?.original_name || ''}
+                </div>
+              </div>
+              <button onClick={() => setAssignFileId(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4, display: 'flex', flexShrink: 0 }}>
+                <X size={18} />
+              </button>
+            </div>
+            <div style={{ padding: '8px 12px 0' }}>
+              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '0 2px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                {t('files.noteLabel') || 'Note'}
+              </div>
+              <input
+                type="text"
+                placeholder={t('files.notePlaceholder')}
+                defaultValue={files.find(f => f.id === assignFileId)?.description || ''}
+                onBlur={e => {
+                  const val = e.target.value.trim()
+                  const file = files.find(f => f.id === assignFileId)
+                  if (file && val !== (file.description || '')) {
+                    handleAssign(file.id, { description: val } as any)
+                  }
+                }}
+                onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
+                style={{
+                  width: '100%', padding: '7px 10px', fontSize: 13, borderRadius: 8,
+                  border: '1px solid var(--border-primary)', background: 'var(--bg-secondary)',
+                  color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
+                }}
+              />
+            </div>
+            <div style={{ overflowY: 'auto', padding: 8 }}>
+              {(() => {
+                const file = files.find(f => f.id === assignFileId)
+                if (!file) return null
+                const assignedPlaceIds = new Set<number>()
+                const dayGroups: { day: Day; dayPlaces: Place[] }[] = []
+                for (const day of days) {
+                  const da = assignments[String(day.id)] || []
+                  const dayPlaces = da.map(a => places.find(p => p.id === a.place?.id || p.id === a.place_id)).filter(Boolean) as Place[]
+                  if (dayPlaces.length > 0) {
+                    dayGroups.push({ day, dayPlaces })
+                    dayPlaces.forEach(p => assignedPlaceIds.add(p.id))
+                  }
+                }
+                const unassigned = places.filter(p => !assignedPlaceIds.has(p.id))
+                const placeBtn = (p: Place) => (
+                  <button key={p.id} onClick={() => handleAssign(file.id, { place_id: file.place_id === p.id ? null : p.id })} style={{
+                    width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: file.place_id === p.id ? 'var(--bg-hover)' : 'none',
+                    border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
+                    borderRadius: 8, fontFamily: 'inherit', fontWeight: file.place_id === p.id ? 600 : 400,
+                    display: 'flex', alignItems: 'center', gap: 6,
+                  }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = file.place_id === p.id ? 'var(--bg-hover)' : 'transparent'}>
+                    <MapPin size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
+                    {file.place_id === p.id && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
+                  </button>
+                )
+
+                const placesSection = places.length > 0 && (
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                      {t('files.assignPlace')}
+                    </div>
+                    {dayGroups.map(({ day, dayPlaces }) => (
+                      <div key={day.id}>
+                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>
+                          {day.title || `${t('dayplan.dayN', { n: day.day_number })}${day.date ? ` · ${day.date}` : ''}`}
+                        </div>
+                        {dayPlaces.map(placeBtn)}
+                      </div>
+                    ))}
+                    {unassigned.length > 0 && (
+                      <div>
+                        {dayGroups.length > 0 && <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>{t('files.unassigned')}</div>}
+                        {unassigned.map(placeBtn)}
+                      </div>
+                    )}
+                  </div>
+                )
+
+                const bookingsSection = reservations.length > 0 && (
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                      {t('files.assignBooking')}
+                    </div>
+                    {reservations.map(r => (
+                      <button key={r.id} onClick={() => handleAssign(file.id, { reservation_id: file.reservation_id === r.id ? null : r.id })} style={{
+                        width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: file.reservation_id === r.id ? 'var(--bg-hover)' : 'none',
+                        border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
+                        borderRadius: 8, fontFamily: 'inherit', fontWeight: file.reservation_id === r.id ? 600 : 400,
+                        display: 'flex', alignItems: 'center', gap: 6,
+                      }}
+                        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                        onMouseLeave={e => e.currentTarget.style.background = file.reservation_id === r.id ? 'var(--bg-hover)' : 'transparent'}>
+                        <Ticket size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
+                        {file.reservation_id === r.id && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
+                      </button>
+                    ))}
+                  </div>
+                )
+
+                const hasBoth = placesSection && bookingsSection
+                return (
+                  <div className={hasBoth ? 'md:flex' : ''}>
+                    <div className={hasBoth ? 'md:w-1/2' : ''} style={{ overflowY: 'auto', maxHeight: '55vh', paddingRight: hasBoth ? 6 : 0 }}>{placesSection}</div>
+                    {hasBoth && <div className="hidden md:block" style={{ width: 1, background: 'var(--border-primary)', flexShrink: 0 }} />}
+                    {hasBoth && <div className="block md:hidden" style={{ height: 1, background: 'var(--border-primary)', margin: '8px 0' }} />}
+                    <div className={hasBoth ? 'md:w-1/2' : ''} style={{ overflowY: 'auto', maxHeight: '55vh', paddingLeft: hasBoth ? 6 : 0 }}>{bookingsSection}</div>
+                  </div>
+                )
+              })()}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* PDF preview modal */}
+      {previewFile && ReactDOM.createPortal(
+        <div
+          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+          onClick={() => setPreviewFile(null)}
+        >
+          <div
+            style={{ width: '100%', maxWidth: 950, height: '94vh', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}
+            onClick={e => e.stopPropagation()}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
+              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+                <a href={previewFile.url || `/uploads/files/${previewFile.filename}`} target="_blank" rel="noreferrer"
+                  style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
+                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>
+                  <ExternalLink size={13} /> {t('files.openTab')}
+                </a>
+                <button onClick={() => setPreviewFile(null)}
+                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6, transition: 'color 0.15s' }}
+                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                  <X size={18} />
+                </button>
+              </div>
+            </div>
+            <object
+              data={`${previewFile.url || `/uploads/files/${previewFile.filename}`}#view=FitH`}
+              type="application/pdf"
+              style={{ flex: 1, width: '100%', border: 'none' }}
+              title={previewFile.original_name}
+            >
+              <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
+                <a href={previewFile.url || `/uploads/files/${previewFile.filename}`} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-primary)', textDecoration: 'underline' }}>PDF herunterladen</a>
+              </p>
+            </object>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Header */}
+      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+        <div>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{showTrash ? (t('files.trash') || 'Trash') : t('files.title')}</h2>
+          <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
+            {showTrash
+              ? `${trashFiles.length} ${trashFiles.length === 1 ? 'file' : 'files'}`
+              : (files.length === 1 ? t('files.countSingular') : t('files.count', { count: files.length }))}
+          </p>
+        </div>
+        <button onClick={toggleTrash} style={{
+          padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)',
+          background: showTrash ? 'var(--accent)' : 'var(--bg-card)',
+          color: showTrash ? 'var(--accent-text)' : 'var(--text-muted)',
+          fontSize: 12, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5,
+          fontFamily: 'inherit',
+        }}>
+          <Trash2 size={13} /> {t('files.trash') || 'Trash'}
+        </button>
+      </div>
+
+      {showTrash ? (
+        /* Trash view */
+        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
+          {trashFiles.length > 0 && (
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
+              <button onClick={handleEmptyTrash} style={{
+                padding: '5px 12px', borderRadius: 8, border: '1px solid #fecaca',
+                background: '#fef2f2', color: '#dc2626', fontSize: 12, fontWeight: 500,
+                cursor: 'pointer', fontFamily: 'inherit',
+              }}>
+                {t('files.emptyTrash') || 'Empty Trash'}
+              </button>
+            </div>
+          )}
+          {loadingTrash ? (
+            <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-faint)' }}>
+              <div style={{ width: 20, height: 20, border: '2px solid var(--text-faint)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }} />
+            </div>
+          ) : trashFiles.length === 0 ? (
+            <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
+              <Trash2 size={40} 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('files.trashEmpty') || 'Trash is empty'}</p>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {trashFiles.map(file => renderFileRow(file, true))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <>
+          {/* Upload zone */}
+          <div
+            {...getRootProps()}
+            style={{
+              margin: '16px 16px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
+              textAlign: 'center', cursor: 'pointer', transition: 'all 0.15s',
+              borderColor: isDragActive ? 'var(--text-secondary)' : 'var(--border-primary)',
+              background: isDragActive ? 'var(--bg-secondary)' : 'var(--bg-card)',
+            }}
+          >
+            <input {...getInputProps()} />
+            <Upload size={24} style={{ margin: '0 auto 8px', color: isDragActive ? 'var(--text-secondary)' : 'var(--text-faint)', display: 'block' }} />
+            {uploading ? (
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: 'var(--text-secondary)' }}>
+                <div style={{ width: 14, height: 14, border: '2px solid var(--text-secondary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
+                {t('files.uploading')}
+              </div>
+            ) : (
+              <>
+                <p style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 500, margin: 0 }}>{t('files.dropzone')}</p>
+                <p style={{ fontSize: 11.5, color: 'var(--text-faint)', marginTop: 3 }}>{t('files.dropzoneHint')}</p>
+                <p style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 6, opacity: 0.7 }}>
+                  {(allowedFileTypes || 'jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv').toUpperCase().split(',').join(', ')} · Max 50 MB
+                </p>
+              </>
+            )}
+          </div>
+
+          {/* Filter tabs */}
+          <div style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>
+            {[
+              { id: 'all', label: t('files.filterAll') },
+              ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star }] : []),
+              { id: 'pdf', label: t('files.filterPdf') },
+              { id: 'image', label: t('files.filterImages') },
+              { id: 'doc', label: t('files.filterDocs') },
+              ...(files.some(f => f.note_id) ? [{ id: 'collab', label: t('files.filterCollab') || 'Collab' }] : []),
+            ].map(tab => (
+              <button key={tab.id} onClick={() => setFilterType(tab.id)} style={{
+                padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer', fontSize: 12,
+                fontFamily: 'inherit', transition: 'all 0.12s',
+                background: filterType === tab.id ? 'var(--accent)' : 'transparent',
+                color: filterType === tab.id ? 'var(--accent-text)' : 'var(--text-muted)',
+                fontWeight: filterType === tab.id ? 600 : 400,
+              }}>{tab.icon ? <tab.icon size={13} fill={filterType === tab.id ? '#facc15' : 'none'} color={filterType === tab.id ? '#facc15' : 'currentColor'} /> : tab.label}</button>
+            ))}
+            <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--text-faint)', alignSelf: 'center' }}>
+              {filteredFiles.length === 1 ? t('files.countSingular') : t('files.count', { count: filteredFiles.length })}
+            </span>
+          </div>
+
+          {/* File list */}
+          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
+            {filteredFiles.length === 0 ? (
+              <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
+                <FileText size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
+                <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.empty')}</p>
+                <p style={{ fontSize: 13, color: 'var(--text-faint)', margin: 0 }}>{t('files.emptyHint')}</p>
+              </div>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {filteredFiles.map(file => renderFileRow(file))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      <style>{`
+        @media (max-width: 767px) {
+          .file-actions button { padding: 8px !important; }
+          .file-actions svg { width: 18px !important; height: 18px !important; }
+        }
+      `}</style>
+    </div>
+  )
+}

client/src/components/Layout/DemoBanner.tsx

@@ -0,0 +1,232 @@
+import React, { useState, useEffect } from 'react'
+import { Info, Github, Shield, Key, Users, Database, Upload, Clock, Puzzle, CalendarDays, Globe, ArrowRightLeft, Map, Briefcase, ListChecks, Wallet, FileText, Plane } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+interface DemoTexts {
+  titleBefore: string
+  titleAfter: string
+  title: string
+  description: string
+  resetIn: string
+  minutes: string
+  uploadNote: string
+  fullVersionTitle: string
+  features: string[]
+  addonsTitle: string
+  addons: [string, string][]
+  whatIs: string
+  whatIsDesc: string
+  selfHost: string
+  selfHostLink: string
+  close: string
+}
+
+const texts: Record<string, DemoTexts> = {
+  de: {
+    titleBefore: 'Willkommen bei ',
+    titleAfter: '',
+    title: 'Willkommen zur TREK Demo',
+    description: 'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
+    resetIn: 'Naechster Reset in',
+    minutes: 'Minuten',
+    uploadNote: 'Datei-Uploads (Fotos, Dokumente, Cover) sind in der Demo deaktiviert.',
+    fullVersionTitle: 'In der Vollversion zusaetzlich:',
+    features: [
+      'Datei-Uploads (Fotos, Dokumente, Cover)',
+      'API-Schluessel (Google Maps, Wetter)',
+      'Benutzer- & Rechteverwaltung',
+      'Automatische Backups',
+      'Addon-Verwaltung (aktivieren/deaktivieren)',
+      'OIDC / SSO Single Sign-On',
+    ],
+    addonsTitle: 'Modulare Addons (in der Vollversion deaktivierbar)',
+    addons: [
+      ['Vacay', 'Urlaubsplaner mit Kalender, Feiertagen & Fusion'],
+      ['Atlas', 'Weltkarte mit besuchten Laendern & Reisestatistiken'],
+      ['Packliste', 'Checklisten pro Reise'],
+      ['Budget', 'Kostenplanung mit Splitting'],
+      ['Dokumente', 'Dateien an Reisen anhaengen'],
+      ['Widgets', 'Waehrungsrechner & Zeitzonen'],
+    ],
+    whatIs: 'Was ist TREK?',
+    whatIsDesc: 'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
+    selfHost: 'Open Source — ',
+    selfHostLink: 'selbst hosten',
+    close: 'Verstanden',
+  },
+  en: {
+    titleBefore: 'Welcome to ',
+    titleAfter: '',
+    title: 'Welcome to the TREK Demo',
+    description: 'You can view, edit and create trips. All changes are automatically reset every hour.',
+    resetIn: 'Next reset in',
+    minutes: 'minutes',
+    uploadNote: 'File uploads (photos, documents, covers) are disabled in demo mode.',
+    fullVersionTitle: 'Additionally in the full version:',
+    features: [
+      'File uploads (photos, documents, covers)',
+      'API key management (Google Maps, Weather)',
+      'User & permission management',
+      'Automatic backups',
+      'Addon management (enable/disable)',
+      'OIDC / SSO single sign-on',
+    ],
+    addonsTitle: 'Modular Addons (can be deactivated in full version)',
+    addons: [
+      ['Vacay', 'Vacation planner with calendar, holidays & user fusion'],
+      ['Atlas', 'World map with visited countries & travel stats'],
+      ['Packing', 'Checklists per trip'],
+      ['Budget', 'Expense tracking with splitting'],
+      ['Documents', 'Attach files to trips'],
+      ['Widgets', 'Currency converter & timezones'],
+    ],
+    whatIs: 'What is TREK?',
+    whatIsDesc: 'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
+    selfHost: 'Open source — ',
+    selfHostLink: 'self-host it',
+    close: 'Got it',
+  },
+}
+
+const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]
+const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft]
+
+export default function DemoBanner(): React.ReactElement | null {
+  const [dismissed, setDismissed] = useState<boolean>(false)
+  const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes())
+  const { language } = useTranslation()
+  const t = texts[language] || texts.en
+
+  useEffect(() => {
+    const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000)
+    return () => clearInterval(interval)
+  }, [])
+
+  if (dismissed) return null
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 9999,
+      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      padding: 16, overflow: 'auto',
+      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+    }} onClick={() => setDismissed(true)}>
+      <div style={{
+        background: 'white', borderRadius: 20, padding: '28px 24px 20px',
+        maxWidth: 480, width: '100%',
+        boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+        maxHeight: '90vh', overflow: 'auto',
+      }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
+
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+          <img src="/icons/icon-dark.svg" alt="" style={{ width: 36, height: 36, borderRadius: 10 }} />
+          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 5 }}>
+            {t.titleBefore}<img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />{t.titleAfter}
+          </h2>
+        </div>
+
+        <p style={{ fontSize: 13, color: '#6b7280', lineHeight: 1.6, margin: '0 0 12px' }}>
+          {t.description}
+        </p>
+
+        {/* Timer + Upload note */}
+        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+          <div style={{
+            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
+            background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 10, padding: '8px 10px',
+          }}>
+            <Clock size={13} style={{ flexShrink: 0, color: '#0284c7' }} />
+            <span style={{ fontSize: 11, color: '#0369a1', fontWeight: 600 }}>
+              {t.resetIn} {minutesLeft} {t.minutes}
+            </span>
+          </div>
+          <div style={{
+            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
+            background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, padding: '8px 10px',
+          }}>
+            <Upload size={13} style={{ flexShrink: 0, color: '#b45309' }} />
+            <span style={{ fontSize: 11, color: '#b45309' }}>{t.uploadNote}</span>
+          </div>
+        </div>
+
+        {/* What is TREK */}
+        <div style={{
+          background: '#f8fafc', borderRadius: 12, padding: '12px 14px', marginBottom: 16,
+          border: '1px solid #e2e8f0',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+            <Map size={14} style={{ color: '#111827' }} />
+            <span style={{ fontSize: 12, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
+              {language === 'de' ? 'Was ist ' : 'What is '}<img src="/text-dark.svg" alt="TREK" style={{ height: 13, marginRight: -2 }} />?
+            </span>
+          </div>
+          <p style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>
+        </div>
+
+        {/* Addons */}
+        <p style={{ fontSize: 10, fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
+          <Puzzle size={12} />
+          {t.addonsTitle}
+        </p>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
+          {t.addons.map(([name, desc], i) => {
+            const Icon = addonIcons[i]
+            return (
+              <div key={name} style={{
+                background: '#f8fafc', borderRadius: 10, padding: '8px 10px',
+                border: '1px solid #f1f5f9',
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
+                  <Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
+                  <span style={{ fontSize: 11, fontWeight: 700, color: '#111827' }}>{name}</span>
+                </div>
+                <p style={{ fontSize: 10, color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Full version features */}
+        <p style={{ fontSize: 10, fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
+          <Shield size={12} />
+          {t.fullVersionTitle}
+        </p>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
+          {t.features.map((text, i) => {
+            const Icon = featureIcons[i]
+            return (
+              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: '#4b5563', padding: '4px 0' }}>
+                <Icon size={13} style={{ flexShrink: 0, color: '#9ca3af' }} />
+                <span>{text}</span>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Footer */}
+        <div style={{
+          paddingTop: 14, borderTop: '1px solid #e5e7eb',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#9ca3af' }}>
+            <Github size={13} />
+            <span>{t.selfHost}</span>
+            <a href="https://github.com/mauriceboe/TREK" target="_blank" rel="noopener noreferrer"
+              style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}>
+              {t.selfHostLink}
+            </a>
+          </div>
+          <button onClick={() => setDismissed(true)} style={{
+            background: '#111827', color: 'white', border: 'none',
+            borderRadius: 10, padding: '8px 20px', fontSize: 12,
+            fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+          }}>
+            {t.close}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Layout/Navbar.tsx

@@ -0,0 +1,248 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
+import { useAuthStore } from '../../store/authStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { addonsApi } from '../../api/client'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe }
+
+interface NavbarProps {
+  tripTitle?: string
+  tripId?: string
+  onBack?: () => void
+  showBack?: boolean
+  onShare?: () => void
+}
+
+interface Addon {
+  id: string
+  name: string
+  icon: string
+  type: string
+}
+
+export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
+  const { user, logout } = useAuthStore()
+  const { settings, updateSetting } = useSettingsStore()
+  const { t, locale } = useTranslation()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
+  const [appVersion, setAppVersion] = useState<string | null>(null)
+  const [globalAddons, setGlobalAddons] = useState<Addon[]>([])
+  const darkMode = settings.dark_mode
+  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  const loadAddons = () => {
+    if (user) {
+      addonsApi.enabled().then(data => {
+        setGlobalAddons(data.addons.filter(a => a.type === 'global'))
+      }).catch(() => {})
+    }
+  }
+  useEffect(loadAddons, [user, location.pathname])
+  // Listen for addon changes from AddonManager
+  useEffect(() => {
+    const handler = () => loadAddons()
+    window.addEventListener('addons-changed', handler)
+    return () => window.removeEventListener('addons-changed', handler)
+  }, [user])
+
+  useEffect(() => {
+    import('../../api/client').then(({ authApi }) => {
+      authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {})
+    })
+  }, [])
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  const toggleDarkMode = () => {
+    updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
+  }
+
+  return (
+    <nav style={{
+      background: dark ? 'rgba(9,9,11,0.95)' : 'rgba(255,255,255,0.95)',
+      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+      borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)'}`,
+      boxShadow: dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)',
+      touchAction: 'manipulation',
+      paddingTop: 'env(safe-area-inset-top, 0px)',
+      height: 'var(--nav-h)',
+    }} className="flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
+      {/* Left side */}
+      <div className="flex items-center gap-3 min-w-0">
+        {showBack && (
+          <button onClick={onBack}
+            className="p-1.5 rounded-lg transition-colors flex items-center gap-1.5 text-sm flex-shrink-0"
+            style={{ color: 'var(--text-muted)' }}
+            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+            <ArrowLeft className="w-4 h-4" />
+            <span className="hidden sm:inline">{t('common.back')}</span>
+          </button>
+        )}
+
+        <Link to="/dashboard" className="flex items-center transition-colors flex-shrink-0">
+          <img src={dark ? '/icons/icon-white.svg' : '/icons/icon-dark.svg'} alt="TREK" className="sm:hidden" style={{ height: 22, width: 22 }} />
+          <img src={dark ? '/logo-light.svg' : '/logo-dark.svg'} alt="TREK" className="hidden sm:block" style={{ height: 28 }} />
+        </Link>
+
+        {/* Global addon nav items */}
+        {globalAddons.length > 0 && !tripTitle && (
+          <>
+            <span style={{ color: 'var(--text-faint)' }}>|</span>
+            <Link to="/dashboard"
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+              style={{
+                color: location.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-muted)',
+                background: location.pathname === '/dashboard' ? 'var(--bg-hover)' : 'transparent',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={e => { if (location.pathname !== '/dashboard') e.currentTarget.style.background = 'transparent' }}>
+              <Briefcase className="w-3.5 h-3.5" />
+              <span className="hidden md:inline">{t('nav.myTrips')}</span>
+            </Link>
+            {globalAddons.map(addon => {
+              const Icon = ADDON_ICONS[addon.icon] || CalendarDays
+              const path = `/${addon.id}`
+              const isActive = location.pathname === path
+              return (
+                <Link key={addon.id} to={path}
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+                  style={{
+                    color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                    background: isActive ? 'var(--bg-hover)' : 'transparent',
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent' }}>
+                  <Icon className="w-3.5 h-3.5" />
+                  <span className="hidden md:inline">{addon.name}</span>
+                </Link>
+              )
+            })}
+          </>
+        )}
+
+        {tripTitle && (
+          <>
+            <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>
+            <span className="text-sm font-medium truncate max-w-48" style={{ color: 'var(--text-muted)' }}>
+              {tripTitle}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Share button */}
+      {onShare && (
+        <button onClick={onShare}
+          className="flex items-center gap-1.5 py-1.5 px-3 rounded-lg border transition-colors text-sm font-medium flex-shrink-0"
+          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)', background: 'var(--bg-card)' }}
+          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+          onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}>
+          <Users className="w-4 h-4" />
+          <span className="hidden sm:inline">{t('nav.share')}</span>
+        </button>
+      )}
+
+      {/* Dark mode toggle (light ↔ dark, overrides auto) */}
+      <button onClick={toggleDarkMode} title={dark ? t('nav.lightMode') : t('nav.darkMode')}
+        className="p-2 rounded-lg transition-colors flex-shrink-0"
+        style={{ color: 'var(--text-muted)' }}
+        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+        {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+      </button>
+
+      {/* User menu */}
+      {user && (
+        <div className="relative">
+          <button onClick={() => setUserMenuOpen(!userMenuOpen)}
+            className="flex items-center gap-2 py-1.5 px-3 rounded-lg transition-colors"
+            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+            {user.avatar_url ? (
+              <img src={user.avatar_url} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover' }} />
+            ) : (
+              <div className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold"
+                style={{ background: dark ? '#e2e8f0' : '#111827', color: dark ? '#0f172a' : '#ffffff' }}>
+                {user.username?.charAt(0).toUpperCase()}
+              </div>
+            )}
+            <span className="text-sm hidden sm:inline max-w-24 truncate" style={{ color: 'var(--text-secondary)' }}>
+              {user.username}
+            </span>
+            <ChevronDown className="w-4 h-4" style={{ color: 'var(--text-faint)' }} />
+          </button>
+
+          {userMenuOpen && ReactDOM.createPortal(
+            <>
+              <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setUserMenuOpen(false)} />
+              <div className="w-52 rounded-xl shadow-xl border overflow-hidden" style={{ position: 'fixed', top: 'var(--nav-h)', right: 8, zIndex: 9999, background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+                <div className="px-4 py-3 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{user.username}</p>
+                  <p className="text-xs truncate" style={{ color: 'var(--text-muted)' }}>{user.email}</p>
+                  {user.role === 'admin' && (
+                    <span className="inline-flex items-center gap-1 text-xs font-medium mt-1" style={{ color: 'var(--text-secondary)' }}>
+                      <Shield className="w-3 h-3" /> {t('nav.administrator')}
+                    </span>
+                  )}
+                </div>
+
+                <div className="py-1">
+                  <Link to="/settings" onClick={() => setUserMenuOpen(false)}
+                    className="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
+                    style={{ color: 'var(--text-secondary)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+                    <Settings className="w-4 h-4" />
+                    {t('nav.settings')}
+                  </Link>
+
+                  {user.role === 'admin' && (
+                    <Link to="/admin" onClick={() => setUserMenuOpen(false)}
+                      className="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
+                      style={{ color: 'var(--text-secondary)' }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+                      <Shield className="w-4 h-4" />
+                      {t('nav.admin')}
+                    </Link>
+                  )}
+                </div>
+
+                <div className="py-1 border-t" style={{ borderColor: 'var(--border-secondary)' }}>
+                  <button onClick={handleLogout}
+                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-red-500 hover:bg-red-500/10 transition-colors">
+                    <LogOut className="w-4 h-4" />
+                    {t('nav.logout')}
+                  </button>
+                  {appVersion && (
+                    <div className="px-4 pt-2 pb-2.5 text-center" style={{ marginTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
+                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--bg-tertiary)', borderRadius: 99, padding: '4px 12px' }}>
+                        <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 10, opacity: 0.5 }} />
+                        <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)' }}>v{appVersion}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>,
+            document.body
+          )}
+        </div>
+      )}
+    </nav>
+  )
+}

client/src/components/Map/MapView.tsx

@@ -0,0 +1,413 @@
+import { useEffect, useRef, useState, useMemo } from 'react'
+import DOM from 'react-dom'
+import { MapContainer, TileLayer, Marker, Tooltip, Polyline, useMap } from 'react-leaflet'
+import MarkerClusterGroup from 'react-leaflet-cluster'
+import L from 'leaflet'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+import { mapsApi } from '../../api/client'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import type { Place } from '../../types'
+
+// Fix default marker icons for vite
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
+  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
+})
+
+/**
+ * Create a round photo-circle marker.
+ * Shows image_url if available, otherwise category icon in colored circle.
+ */
+function escAttr(s) {
+  if (!s) return ''
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function createPlaceIcon(place, orderNumbers, isSelected) {
+  const size = isSelected ? 44 : 36
+  const borderColor = isSelected ? '#111827' : 'white'
+  const borderWidth = isSelected ? 3 : 2.5
+  const shadow = isSelected
+    ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
+    : '0 2px 8px rgba(0,0,0,0.22)'
+  const bgColor = place.category_color || '#6b7280'
+  const icon = place.category_icon || '📍'
+
+  // Number badges (bottom-right), supports multiple numbers for duplicate places
+  let badgeHtml = ''
+  if (orderNumbers && orderNumbers.length > 0) {
+    const label = orderNumbers.join(' · ')
+    badgeHtml = `<span style="
+      position:absolute;bottom:-4px;right:-4px;
+      min-width:18px;height:${orderNumbers.length > 1 ? 16 : 18}px;border-radius:${orderNumbers.length > 1 ? 8 : 9}px;
+      padding:0 ${orderNumbers.length > 1 ? 4 : 3}px;
+      background:rgba(255,255,255,0.94);
+      border:1.5px solid rgba(0,0,0,0.15);
+      box-shadow:0 1px 4px rgba(0,0,0,0.18);
+      display:flex;align-items:center;justify-content:center;
+      font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
+      font-family:-apple-system,system-ui,sans-serif;line-height:1;
+      box-sizing:border-box;white-space:nowrap;
+    ">${label}</span>`
+  }
+
+  if (place.image_url) {
+    return L.divIcon({
+      className: '',
+      html: `<div style="
+        width:${size}px;height:${size}px;border-radius:50%;
+        border:${borderWidth}px solid ${borderColor};
+        box-shadow:${shadow};
+        overflow:visible;background:${bgColor};
+        cursor:pointer;flex-shrink:0;position:relative;
+      ">
+        <div style="width:100%;height:100%;border-radius:50%;overflow:hidden;">
+          <img src="${escAttr(place.image_url)}" style="width:100%;height:100%;object-fit:cover;" />
+        </div>
+        ${badgeHtml}
+      </div>`,
+      iconSize: [size, size],
+      iconAnchor: [size / 2, size / 2],
+      tooltipAnchor: [size / 2 + 6, 0],
+    })
+  }
+
+  return L.divIcon({
+    className: '',
+    html: `<div style="
+      width:${size}px;height:${size}px;border-radius:50%;
+      border:${borderWidth}px solid ${borderColor};
+      box-shadow:${shadow};
+      background:${bgColor};
+      display:flex;align-items:center;justify-content:center;
+      cursor:pointer;position:relative;
+    ">
+      <span style="font-size:${isSelected ? 18 : 15}px;line-height:1;">${icon}</span>
+      ${badgeHtml}
+    </div>`,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    tooltipAnchor: [size / 2 + 6, 0],
+  })
+}
+
+interface SelectionControllerProps {
+  places: Place[]
+  selectedPlaceId: number | null
+  dayPlaces: Place[]
+  paddingOpts: Record<string, number>
+}
+
+function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }: SelectionControllerProps) {
+  const map = useMap()
+  const prev = useRef(null)
+
+  useEffect(() => {
+    if (selectedPlaceId && selectedPlaceId !== prev.current) {
+      // Fit all day places into view (so you see context), but ensure selected is visible
+      const toFit = dayPlaces.length > 0 ? dayPlaces : places.filter(p => p.id === selectedPlaceId)
+      const withCoords = toFit.filter(p => p.lat && p.lng)
+      if (withCoords.length > 0) {
+        try {
+          const bounds = L.latLngBounds(withCoords.map(p => [p.lat, p.lng]))
+          if (bounds.isValid()) {
+            map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+          }
+        } catch {}
+      }
+    }
+    prev.current = selectedPlaceId
+  }, [selectedPlaceId, places, dayPlaces, paddingOpts, map])
+
+  return null
+}
+
+interface MapControllerProps {
+  center: [number, number]
+  zoom: number
+}
+
+function MapController({ center, zoom }: MapControllerProps) {
+  const map = useMap()
+  const prevCenter = useRef(center)
+
+  useEffect(() => {
+    if (prevCenter.current[0] !== center[0] || prevCenter.current[1] !== center[1]) {
+      map.setView(center, zoom)
+      prevCenter.current = center
+    }
+  }, [center, zoom, map])
+
+  return null
+}
+
+// Fit bounds when places change (fitKey triggers re-fit)
+interface BoundsControllerProps {
+  places: Place[]
+  fitKey: number
+  paddingOpts: Record<string, number>
+}
+
+function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps) {
+  const map = useMap()
+  const prevFitKey = useRef(-1)
+
+  useEffect(() => {
+    if (fitKey === prevFitKey.current) return
+    prevFitKey.current = fitKey
+    if (places.length === 0) return
+    try {
+      const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
+      if (bounds.isValid()) map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+    } catch {}
+  }, [fitKey, places, paddingOpts, map])
+
+  return null
+}
+
+interface MapClickHandlerProps {
+  onClick: ((e: L.LeafletMouseEvent) => void) | null
+}
+
+function MapClickHandler({ onClick }: MapClickHandlerProps) {
+  const map = useMap()
+  useEffect(() => {
+    if (!onClick) return
+    map.on('click', onClick)
+    return () => map.off('click', onClick)
+  }, [map, onClick])
+  return null
+}
+
+function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.LeafletMouseEvent) => void) | null }) {
+  const map = useMap()
+  useEffect(() => {
+    if (!onContextMenu) return
+    map.on('contextmenu', onContextMenu)
+    return () => map.off('contextmenu', onContextMenu)
+  }, [map, onContextMenu])
+  return null
+}
+
+// ── Route travel time label ──
+interface RouteLabelProps {
+  midpoint: [number, number]
+  walkingText: string
+  drivingText: string
+}
+
+function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
+  const map = useMap()
+  const [visible, setVisible] = useState(map ? map.getZoom() >= 12 : false)
+
+  useEffect(() => {
+    if (!map) return
+    const check = () => setVisible(map.getZoom() >= 12)
+    check()
+    map.on('zoomend', check)
+    return () => map.off('zoomend', check)
+  }, [map])
+
+  if (!visible || !midpoint) return null
+
+  const icon = L.divIcon({
+    className: 'route-info-pill',
+    html: `<div style="
+      display:flex;align-items:center;gap:5px;
+      background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
+      color:#fff;border-radius:99px;padding:3px 9px;
+      font-size:9px;font-weight:600;white-space:nowrap;
+      font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
+      box-shadow:0 2px 12px rgba(0,0,0,0.3);
+      pointer-events:none;
+      position:relative;left:-50%;top:-50%;
+    ">
+      <span style="display:flex;align-items:center;gap:2px">
+        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="4" r="2"/><path d="M7 21l3-7"/><path d="M10 14l5-5"/><path d="M15 9l-4 7"/><path d="M18 18l-3-7"/></svg>
+        ${walkingText}
+      </span>
+      <span style="opacity:0.3">|</span>
+      <span style="display:flex;align-items:center;gap:2px">
+        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 10l-2-4H7L5 10l-2.5 1.1C1.7 11.3 1 12.1 1 13v3c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
+        ${drivingText}
+      </span>
+    </div>`,
+    iconSize: [0, 0],
+    iconAnchor: [0, 0],
+  })
+
+  return <Marker position={midpoint} icon={icon} interactive={false} zIndexOffset={2000} />
+}
+
+// Module-level photo cache shared with PlaceAvatar
+const mapPhotoCache = new Map()
+const mapPhotoInFlight = new Set()
+
+export function MapView({
+  places = [],
+  dayPlaces = [],
+  route = null,
+  routeSegments = [],
+  selectedPlaceId = null,
+  onMarkerClick,
+  onMapClick,
+  onMapContextMenu = null,
+  center = [48.8566, 2.3522],
+  zoom = 10,
+  tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+  fitKey = 0,
+  dayOrderMap = {},
+  leftWidth = 0,
+  rightWidth = 0,
+  hasInspector = false,
+}) {
+  // Dynamic padding: account for sidebars + bottom inspector
+  const paddingOpts = useMemo(() => {
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+    if (isMobile) return { padding: [40, 20] }
+    const top = 60
+    const bottom = hasInspector ? 320 : 60
+    const left = leftWidth + 40
+    const right = rightWidth + 40
+    return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
+  }, [leftWidth, rightWidth, hasInspector])
+  const [photoUrls, setPhotoUrls] = useState({})
+
+  // Fetch photos for places (Google or Wikimedia Commons fallback)
+  useEffect(() => {
+    places.forEach(place => {
+      if (place.image_url) return
+      const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
+      if (!cacheKey) return
+      if (mapPhotoCache.has(cacheKey)) {
+        const cached = mapPhotoCache.get(cacheKey)
+        if (cached) setPhotoUrls(prev => prev[cacheKey] === cached ? prev : ({ ...prev, [cacheKey]: cached }))
+        return
+      }
+      if (mapPhotoInFlight.has(cacheKey)) return
+      const photoId = place.google_place_id || place.osm_id
+      if (!photoId && !(place.lat && place.lng)) return
+      mapPhotoInFlight.add(cacheKey)
+      mapsApi.placePhoto(photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
+        .then(data => {
+          if (data.photoUrl) {
+            mapPhotoCache.set(cacheKey, data.photoUrl)
+            setPhotoUrls(prev => ({ ...prev, [cacheKey]: data.photoUrl }))
+          } else {
+            mapPhotoCache.set(cacheKey, null)
+          }
+          mapPhotoInFlight.delete(cacheKey)
+        })
+        .catch(() => { mapPhotoCache.set(cacheKey, null); mapPhotoInFlight.delete(cacheKey) })
+    })
+  }, [places])
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={zoom}
+      zoomControl={false}
+      className="w-full h-full"
+      style={{ background: '#e5e7eb' }}
+    >
+      <TileLayer
+        url={tileUrl}
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        maxZoom={19}
+      />
+
+      <MapController center={center} zoom={zoom} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} />
+      <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
+      <MapClickHandler onClick={onMapClick} />
+      <MapContextMenuHandler onContextMenu={onMapContextMenu} />
+
+      <MarkerClusterGroup
+        chunkedLoading
+        maxClusterRadius={30}
+        disableClusteringAtZoom={11}
+        spiderfyOnMaxZoom
+        showCoverageOnHover={false}
+        zoomToBoundsOnClick
+        singleMarkerMode
+        iconCreateFunction={(cluster) => {
+          const count = cluster.getChildCount()
+          const size = count < 10 ? 36 : count < 50 ? 42 : 48
+          return L.divIcon({
+            html: `<div class="marker-cluster-custom"
+              style="width:${size}px;height:${size}px;">
+              <span>${count}</span>
+            </div>`,
+            className: 'marker-cluster-wrapper',
+            iconSize: L.point(size, size),
+          })
+        }}
+      >
+        {places.map((place) => {
+          const isSelected = place.id === selectedPlaceId
+          const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
+          const resolvedPhotoUrl = place.image_url || (cacheKey && photoUrls[cacheKey]) || null
+          const orderNumbers = dayOrderMap[place.id] ?? null
+          const icon = createPlaceIcon({ ...place, image_url: resolvedPhotoUrl }, orderNumbers, isSelected)
+
+          return (
+            <Marker
+              key={place.id}
+              position={[place.lat, place.lng]}
+              icon={icon}
+              eventHandlers={{
+                click: () => onMarkerClick && onMarkerClick(place.id),
+              }}
+              zIndexOffset={isSelected ? 1000 : 0}
+            >
+              <Tooltip
+                direction="right"
+                offset={[0, 0]}
+                opacity={1}
+                className="map-tooltip"
+              >
+                <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+                  <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
+                    {place.name}
+                  </div>
+                  {place.category_name && (() => {
+                    const CatIcon = getCategoryIcon(place.category_icon)
+                    return (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
+                        <CatIcon size={10} style={{ color: place.category_color || 'var(--text-muted)', flexShrink: 0 }} />
+                        <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{place.category_name}</span>
+                      </div>
+                    )
+                  })()}
+                  {place.address && (
+                    <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2, maxWidth: 180, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      {place.address}
+                    </div>
+                  )}
+                </div>
+              </Tooltip>
+            </Marker>
+          )
+        })}
+      </MarkerClusterGroup>
+
+      {route && route.length > 1 && (
+        <>
+          <Polyline
+            positions={route}
+            color="#111827"
+            weight={3}
+            opacity={0.9}
+            dashArray="6, 5"
+          />
+          {routeSegments.map((seg, i) => (
+            <RouteLabel key={i} midpoint={seg.mid} from={seg.from} to={seg.to} walkingText={seg.walkingText} drivingText={seg.drivingText} />
+          ))}
+        </>
+      )}
+    </MapContainer>
+  )
+}

client/src/components/Map/RouteCalculator.ts

@@ -0,0 +1,139 @@
+import type { RouteResult, RouteSegment, Waypoint } from '../../types'
+
+const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
+
+/** Fetches a full route via OSRM and returns coordinates, distance, and duration estimates for driving/walking. */
+export async function calculateRoute(
+  waypoints: Waypoint[],
+  profile: 'driving' | 'walking' | 'cycling' = 'driving',
+  { signal }: { signal?: AbortSignal } = {}
+): Promise<RouteResult> {
+  if (!waypoints || waypoints.length < 2) {
+    throw new Error('At least 2 waypoints required')
+  }
+
+  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
+  const url = `${OSRM_BASE}/driving/${coords}?overview=full&geometries=geojson&steps=false`
+
+  const response = await fetch(url, { signal })
+  if (!response.ok) {
+    throw new Error('Route could not be calculated')
+  }
+
+  const data = await response.json()
+
+  if (data.code !== 'Ok' || !data.routes || data.routes.length === 0) {
+    throw new Error('No route found')
+  }
+
+  const route = data.routes[0]
+  const coordinates: [number, number][] = route.geometry.coordinates.map(([lng, lat]: [number, number]) => [lat, lng])
+
+  const distance: number = route.distance
+  let duration: number
+  if (profile === 'walking') {
+    duration = distance / (5000 / 3600)
+  } else if (profile === 'cycling') {
+    duration = distance / (15000 / 3600)
+  } else {
+    duration = route.duration
+  }
+
+  const walkingDuration = distance / (5000 / 3600)
+  const drivingDuration: number = route.duration
+
+  return {
+    coordinates,
+    distance,
+    duration,
+    distanceText: formatDistance(distance),
+    durationText: formatDuration(duration),
+    walkingText: formatDuration(walkingDuration),
+    drivingText: formatDuration(drivingDuration),
+  }
+}
+
+export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length === 0) return null
+  if (valid.length === 1) {
+    return `https://www.google.com/maps/search/?api=1&query=${valid[0].lat},${valid[0].lng}`
+  }
+  const stops = valid.map((p) => `${p.lat},${p.lng}`).join('/')
+  return `https://www.google.com/maps/dir/${stops}`
+}
+
+/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
+export function optimizeRoute(places: Waypoint[]): Waypoint[] {
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length <= 2) return places
+
+  const visited = new Set<number>()
+  const result: Waypoint[] = []
+  let current = valid[0]
+  visited.add(0)
+  result.push(current)
+
+  while (result.length < valid.length) {
+    let nearestIdx = -1
+    let minDist = Infinity
+    for (let i = 0; i < valid.length; i++) {
+      if (visited.has(i)) continue
+      const d = Math.sqrt(
+        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
+      )
+      if (d < minDist) { minDist = d; nearestIdx = i }
+    }
+    if (nearestIdx === -1) break
+    visited.add(nearestIdx)
+    current = valid[nearestIdx]
+    result.push(current)
+  }
+  return result
+}
+
+/** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
+export async function calculateSegments(
+  waypoints: Waypoint[],
+  { signal }: { signal?: AbortSignal } = {}
+): Promise<RouteSegment[]> {
+  if (!waypoints || waypoints.length < 2) return []
+
+  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
+  const url = `${OSRM_BASE}/driving/${coords}?overview=false&geometries=geojson&steps=false&annotations=distance,duration`
+
+  const response = await fetch(url, { signal })
+  if (!response.ok) throw new Error('Route could not be calculated')
+
+  const data = await response.json()
+  if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')
+
+  const legs = data.routes[0].legs
+  return legs.map((leg: { distance: number; duration: number }, i: number): RouteSegment => {
+    const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
+    const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
+    const mid: [number, number] = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
+    const walkingDuration = leg.distance / (5000 / 3600)
+    return {
+      mid, from, to,
+      walkingText: formatDuration(walkingDuration),
+      drivingText: formatDuration(leg.duration),
+    }
+  })
+}
+
+function formatDistance(meters: number): string {
+  if (meters < 1000) {
+    return `${Math.round(meters)} m`
+  }
+  return `${(meters / 1000).toFixed(1)} km`
+}
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (h > 0) {
+    return `${h} h ${m} min`
+  }
+  return `${m} min`
+}

client/src/components/PDF/TripPDF.tsx

@@ -0,0 +1,425 @@
+// Trip PDF via browser print window
+import { createElement } from 'react'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark } from 'lucide-react'
+import { mapsApi } from '../../api/client'
+import type { Trip, Day, Place, Category, AssignmentsMap, DayNotesMap } from '../../types'
+
+const NOTE_ICON_MAP = { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark }
+function noteIconSvg(iconId) {
+  if (!_renderToStaticMarkup) return ''
+  const Icon = NOTE_ICON_MAP[iconId] || FileText
+  return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' }))
+}
+
+// ── SVG inline icons (for chips) ─────────────────────────────────────────────
+const svgPin   = `<svg width="11" height="11" viewBox="0 0 24 24" fill="#94a3b8" style="flex-shrink:0;margin-top:1px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5" fill="white"/></svg>`
+const svgClock = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
+const svgClock2= `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
+const svgCheck = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L19 7"/></svg>`
+const svgEuro  = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round"><path d="M14 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c2.17 0 4.1-.99 5.4-2.55"/><path d="M5 11h8M5 13h8"/></svg>`
+
+function escHtml(str) {
+  if (!str) return ''
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+function absUrl(url) {
+  if (!url) return null
+  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) return url
+  return window.location.origin + (url.startsWith('/') ? '' : '/') + url
+}
+
+function safeImg(url) {
+  if (!url) return null
+  if (url.startsWith('https://') || url.startsWith('http://')) return url
+  return /\.(jpe?g|png|webp|bmp|tiff?)(\?.*)?$/i.test(url) ? absUrl(url) : null
+}
+
+// Generate SVG string from Lucide icon name (for category thumbnails)
+let _renderToStaticMarkup = null
+async function ensureRenderer() {
+  if (!_renderToStaticMarkup) {
+    const mod = await import('react-dom/server')
+    _renderToStaticMarkup = mod.renderToStaticMarkup
+  }
+}
+function categoryIconSvg(iconName, color = '#6366f1', size = 24) {
+  if (!_renderToStaticMarkup) return ''
+  const Icon = getCategoryIcon(iconName)
+  return _renderToStaticMarkup(
+    createElement(Icon, { size, strokeWidth: 1.8, color: 'rgba(255,255,255,0.92)' })
+  )
+}
+
+function shortDate(d, locale) {
+  if (!d) return ''
+  return new Date(d + 'T00:00:00').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
+}
+
+function longDateRange(days, locale) {
+  const dd = [...days].filter(d => d.date).sort((a, b) => a.day_number - b.day_number)
+  if (!dd.length) return null
+  const f = new Date(dd[0].date + 'T00:00:00')
+  const l = new Date(dd[dd.length - 1].date + 'T00:00:00')
+  return `${f.toLocaleDateString(locale, { day: 'numeric', month: 'long' })} – ${l.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' })}`
+}
+
+function dayCost(assignments, dayId, locale) {
+  const total = (assignments[String(dayId)] || []).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
+  return total > 0 ? `${total.toLocaleString(locale)} EUR` : null
+}
+
+// Pre-fetch Google Place photos for all assigned places
+async function fetchPlacePhotos(assignments) {
+  const photoMap = {} // placeId → photoUrl
+  const allPlaces = Object.values(assignments).flatMap(a => a.map(x => x.place)).filter(Boolean)
+  const unique = [...new Map(allPlaces.map(p => [p.id, p])).values()]
+
+  const toFetch = unique.filter(p => !p.image_url && p.google_place_id)
+
+  await Promise.allSettled(
+    toFetch.map(async (place) => {
+      try {
+        const data = await mapsApi.placePhoto(place.google_place_id)
+        if (data.photoUrl) photoMap[place.id] = data.photoUrl
+      } catch {}
+    })
+  )
+  return photoMap
+}
+
+interface downloadTripPDFProps {
+  trip: Trip
+  days: Day[]
+  places: Place[]
+  assignments: AssignmentsMap
+  categories: Category[]
+  dayNotes: DayNotesMap
+  t: (key: string, params?: Record<string, string | number>) => string
+  locale: string
+}
+
+export async function downloadTripPDF({ trip, days, places, assignments, categories, dayNotes, t: _t, locale: _locale }: downloadTripPDFProps) {
+  await ensureRenderer()
+  const loc = _locale || 'de-DE'
+  const tr = _t || (k => k)
+  const sorted = [...(days || [])].sort((a, b) => a.day_number - b.day_number)
+  const range = longDateRange(sorted, loc)
+  const coverImg = safeImg(trip?.cover_image)
+
+  // Pre-fetch place photos from Google
+  const photoMap = await fetchPlacePhotos(assignments)
+
+  const totalAssigned = new Set(
+    Object.values(assignments || {}).flatMap(a => a.map(x => x.place?.id)).filter(Boolean)
+  ).size
+  const totalCost = Object.values(assignments || {})
+    .flatMap(a => a).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
+
+  // Build day HTML
+  const daysHtml = sorted.map((day, di) => {
+    const assigned = assignments[String(day.id)] || []
+    const notes = (dayNotes || []).filter(n => n.day_id === day.id)
+    const cost = dayCost(assignments, day.id, loc)
+
+    const merged = []
+    assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
+    notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
+    merged.sort((a, b) => a.k - b.k)
+
+    let pi = 0
+    const itemsHtml = merged.length === 0
+      ? `<div class="empty-day">${escHtml(tr('dayplan.emptyDay'))}</div>`
+      : merged.map(item => {
+          if (item.type === 'note') {
+            const note = item.data
+            return `
+              <div class="note-card">
+                <div class="note-line"></div>
+                <span class="note-icon">${noteIconSvg(note.icon)}</span>
+                <div class="note-body">
+                  <div class="note-text">${escHtml(note.text)}</div>
+                  ${note.time ? `<div class="note-time">${escHtml(note.time)}</div>` : ''}
+                </div>
+              </div>`
+          }
+
+          pi++
+          const place = item.data.place
+          if (!place) return ''
+          const cat = categories.find(c => c.id === place.category_id)
+          const color = cat?.color || '#6366f1'
+
+          // Image: direct > google photo > fallback icon
+          const directImg = safeImg(place.image_url)
+          const googleImg = photoMap[place.id] || null
+          const img = directImg || googleImg
+
+          const iconSvg = categoryIconSvg(cat?.icon, color, 24)
+          const thumbHtml = img
+            ? `<img class="place-thumb" src="${escHtml(img)}" />`
+            : `<div class="place-thumb-fallback" style="background:${color}">
+                 ${iconSvg}
+               </div>`
+
+          const chips = [
+            place.place_time ? `<span class="chip">${svgClock}${escHtml(place.place_time)}</span>` : '',
+            place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgEuro}${Number(place.price).toLocaleString('de-DE')} EUR</span>` : '',
+          ].filter(Boolean).join('')
+
+          return `
+            <div class="place-card">
+              <div class="place-bar" style="background:${color}"></div>
+              ${thumbHtml}
+              <div class="place-info">
+                <div class="place-name-row">
+                  <span class="place-num">${pi}</span>
+                  <span class="place-name">${escHtml(place.name)}</span>
+                  ${cat ? `<span class="cat-badge" style="background:${color}">${escHtml(cat.name)}</span>` : ''}
+                </div>
+                ${place.address ? `<div class="info-row">${svgPin}<span class="info-text">${escHtml(place.address)}</span></div>` : ''}
+                ${place.description ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.description)}</span></div>` : ''}
+                ${chips ? `<div class="chips">${chips}</div>` : ''}
+                ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
+              </div>
+            </div>`
+        }).join('')
+
+    return `
+      <div class="day-section${di > 0 ? ' page-break' : ''}">
+        <div class="day-header">
+          <span class="day-tag">${escHtml(tr('dayplan.dayN', { n: day.day_number })).toUpperCase()}</span>
+          <span class="day-title">${escHtml(day.title || tr('dayplan.dayN', { n: day.day_number }))}</span>
+          ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
+          ${cost ? `<span class="day-cost">${cost}</span>` : ''}
+        </div>
+        <div class="day-body">${itemsHtml}</div>
+      </div>`
+  }).join('')
+
+  const html = `<!DOCTYPE html>
+<html lang="${loc.split('-')[0]}">
+<head>
+<meta charset="UTF-8">
+<base href="${window.location.origin}/">
+<title>${escHtml(trip?.title || tr('pdf.travelPlan'))}</title>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Poppins', sans-serif; background: #fff; color: #1e293b; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+  svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+  /* Footer on every printed page */
+  .pdf-footer {
+    position: fixed;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    opacity: 0.3;
+  }
+  .pdf-footer span {
+    font-size: 7px;
+    color: #64748b;
+    letter-spacing: 0.5px;
+  }
+
+  /* ── Cover ─────────────────────────────────────── */
+  .cover {
+    width: 100%; min-height: 100vh;
+    background: #0f172a;
+    display: flex; flex-direction: column; justify-content: flex-end;
+    padding: 52px; position: relative; overflow: hidden;
+  }
+  .cover-bg {
+    position: absolute; inset: 0;
+    background-size: cover; background-position: center;
+    opacity: 0.28;
+  }
+  .cover-dim { position: absolute; inset: 0; background: rgba(8,12,28,0.55); }
+  .cover-brand {
+    position: absolute; top: 36px; right: 52px;
+    z-index: 2;
+  }
+  .cover-body { position: relative; z-index: 1; }
+  .cover-circle {
+    width: 100px; height: 100px; border-radius: 50%;
+    overflow: hidden; border: 2.5px solid rgba(255,255,255,0.25);
+    margin-bottom: 26px; flex-shrink: 0;
+  }
+  .cover-circle img { width: 100%; height: 100%; object-fit: cover; }
+  .cover-circle-ph {
+    width: 100px; height: 100px; border-radius: 50%;
+    background: rgba(255,255,255,0.07);
+    margin-bottom: 26px;
+  }
+  .cover-label { font-size: 9px; font-weight: 600; letter-spacing: 2.5px; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 8px; }
+  .cover-title { font-size: 42px; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; }
+  .cover-desc  { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 18px; max-width: 420px; }
+  .cover-dates { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 30px; }
+  .cover-line  { height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 24px; }
+  .cover-stats { display: flex; gap: 36px; }
+  .cover-stat-num { font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
+  .cover-stat-lbl { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }
+
+  /* ── Day ───────────────────────────────────────── */
+  .page-break { page-break-before: always; }
+  .day-header {
+    background: #0f172a; padding: 11px 28px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .day-tag { font-size: 8px; font-weight: 700; color: #fff; letter-spacing: 0.8px; background: rgba(255,255,255,0.12); border-radius: 4px; padding: 3px 8px; flex-shrink: 0; }
+  .day-title { font-size: 13px; font-weight: 600; color: #fff; flex: 1; }
+  .day-date  { font-size: 9px; color: rgba(255,255,255,0.45); }
+  .day-cost  { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.65); }
+  .day-body  { padding: 12px 28px 6px; }
+
+  /* ── Place card ────────────────────────────────── */
+  .place-card {
+    display: flex; align-items: stretch;
+    border: 1px solid #e2e8f0; border-radius: 8px;
+    margin-bottom: 8px; overflow: hidden;
+    background: #fff; page-break-inside: avoid;
+  }
+  .place-bar { width: 4px; flex-shrink: 0; }
+  .place-thumb {
+    width: 52px; height: 52px; object-fit: cover;
+    margin: 8px; border-radius: 6px; flex-shrink: 0;
+  }
+  .place-thumb-fallback {
+    width: 52px; height: 52px; margin: 8px; border-radius: 8px;
+    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+  }
+  .place-thumb-fallback svg { width: 24px; height: 24px; }
+  .place-info { flex: 1; padding: 9px 10px 8px 0; min-width: 0; }
+
+  .place-name-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
+  .place-num {
+    width: 16px; height: 16px; border-radius: 50%;
+    background: #1e293b; color: #fff; font-size: 8px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  }
+  .place-name { font-size: 11.5px; font-weight: 600; color: #1e293b; flex: 1; }
+  .cat-badge { font-size: 7.5px; font-weight: 600; color: #fff; border-radius: 99px; padding: 2px 7px; flex-shrink: 0; white-space: nowrap; }
+
+  .info-row { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 2px; padding-left: 21px; }
+  .info-row svg { flex-shrink: 0; margin-top: 1px; }
+  .info-spacer { width: 13px; flex-shrink: 0; }
+  .info-text { font-size: 9px; color: #64748b; line-height: 1.5; }
+  .info-text.muted { color: #94a3b8; }
+  .info-text.italic { font-style: italic; }
+
+  .chips { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 21px; margin-top: 4px; }
+  .chip { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 600; background: #f1f5f9; color: #374151; border-radius: 99px; padding: 2px 7px; white-space: nowrap; }
+  .chip svg { flex-shrink: 0; }
+  .chip-green { background: #ecfdf5; color: #059669; }
+  .chip-amber { background: #fffbeb; color: #d97706; }
+
+  /* ── Note card ─────────────────────────────────── */
+  .note-card {
+    display: flex; align-items: center; gap: 8px;
+    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
+    padding: 8px 10px; margin-bottom: 7px; page-break-inside: avoid;
+  }
+  .note-line { width: 3px; border-radius: 99px; background: #94a3b8; align-self: stretch; flex-shrink: 0; }
+  .note-icon { flex-shrink: 0; }
+  .note-body { flex: 1; min-width: 0; }
+  .note-text { font-size: 9.5px; color: #334155; line-height: 1.55; }
+  .note-time { font-size: 8px; color: #94a3b8; margin-top: 2px; }
+
+  .empty-day { font-size: 9.5px; color: #cbd5e1; font-style: italic; text-align: center; padding: 14px 0; }
+
+  /* ── Print ─────────────────────────────────────── */
+  @media print {
+    body { margin: 0; }
+    .cover { min-height: 100vh; page-break-after: always; }
+    @page { margin: 0; }
+  }
+</style>
+</head>
+<body>
+
+<!-- Footer on every page -->
+<div class="pdf-footer">
+  <span>made with</span>
+  <img src="${absUrl('/logo-dark.svg')}" style="height:10px;opacity:0.6;" />
+</div>
+
+<!-- Cover -->
+<div class="cover">
+  ${coverImg ? `<div class="cover-bg" style="background-image:url('${escHtml(coverImg)}')"></div>` : ''}
+  <div class="cover-dim"></div>
+  <div class="cover-brand"><img src="${absUrl('/logo-light.svg')}" style="height:28px;opacity:0.5;" /></div>
+  <div class="cover-body">
+    ${coverImg
+      ? `<div class="cover-circle"><img src="${escHtml(coverImg)}" /></div>`
+      : `<div class="cover-circle-ph"></div>`}
+    <div class="cover-label">${escHtml(tr('pdf.travelPlan'))}</div>
+    <div class="cover-title">${escHtml(trip?.title || 'My Trip')}</div>
+    ${trip?.description ? `<div class="cover-desc">${escHtml(trip.description)}</div>` : ''}
+    ${range ? `<div class="cover-dates">${range}</div>` : ''}
+    <div class="cover-line"></div>
+    <div class="cover-stats">
+      <div>
+        <div class="cover-stat-num">${sorted.length}</div>
+        <div class="cover-stat-lbl">${escHtml(tr('dashboard.days'))}</div>
+      </div>
+      <div>
+        <div class="cover-stat-num">${places?.length || 0}</div>
+        <div class="cover-stat-lbl">${escHtml(tr('dashboard.places'))}</div>
+      </div>
+      <div>
+        <div class="cover-stat-num">${totalAssigned}</div>
+        <div class="cover-stat-lbl">${escHtml(tr('pdf.planned'))}</div>
+      </div>
+      ${totalCost > 0 ? `<div>
+        <div class="cover-stat-num">${totalCost.toLocaleString('de-DE')}</div>
+        <div class="cover-stat-lbl">${escHtml(tr('pdf.costLabel'))}</div>
+      </div>` : ''}
+    </div>
+  </div>
+</div>
+
+<!-- Days -->
+${daysHtml}
+
+</body></html>`
+
+  // Open in modal with srcdoc iframe (no URL loading = no X-Frame-Options issue)
+  const overlay = document.createElement('div')
+  overlay.id = 'pdf-preview-overlay'
+  overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:8px;'
+  overlay.onclick = (e) => { if (e.target === overlay) overlay.remove() }
+
+  const card = document.createElement('div')
+  card.style.cssText = 'width:100%;max-width:1000px;height:95vh;background:var(--bg-card);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);'
+
+  const header = document.createElement('div')
+  header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-primary);flex-shrink:0;'
+  header.innerHTML = `
+    <span style="font-size:13px;font-weight:600;color:var(--text-primary)">${escHtml(trip?.title || tr('pdf.travelPlan'))}</span>
+    <div style="display:flex;align-items:center;gap:8px">
+      <button id="pdf-print-btn" style="display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit">${tr('pdf.saveAsPdf')}</button>
+      <button id="pdf-close-btn" style="background:none;border:none;cursor:pointer;color:var(--text-faint);display:flex;padding:4px;border-radius:6px">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+  `
+
+  const iframe = document.createElement('iframe')
+  iframe.style.cssText = 'flex:1;width:100%;border:none;'
+  iframe.sandbox = 'allow-same-origin allow-modals'
+  iframe.srcdoc = html
+
+  card.appendChild(header)
+  card.appendChild(iframe)
+  overlay.appendChild(card)
+  document.body.appendChild(overlay)
+
+  header.querySelector('#pdf-close-btn').onclick = () => overlay.remove()
+  header.querySelector('#pdf-print-btn').onclick = () => { iframe.contentWindow?.print() }
+}

client/src/components/Packing/PackingListPanel.tsx

@@ -0,0 +1,556 @@
+import { useState, useMemo, useRef } from 'react'
+import { useTripStore } from '../../store/tripStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import {
+  CheckSquare, Square, Trash2, Plus, ChevronDown, ChevronRight,
+  Sparkles, X, Pencil, Check, MoreHorizontal, CheckCheck, RotateCcw, Luggage,
+} from 'lucide-react'
+import type { PackingItem } from '../../types'
+
+const VORSCHLAEGE = [
+  { name: 'Passport', category: 'Documents' },
+  { name: 'Travel Insurance', category: 'Documents' },
+  { name: 'Visa Documents', category: 'Documents' },
+  { name: 'Flight Tickets', category: 'Documents' },
+  { name: 'Hotel Bookings', category: 'Documents' },
+  { name: 'Vaccination Card', category: 'Documents' },
+  { name: 'T-Shirts (5x)', category: 'Clothing' },
+  { name: 'Pants (2x)', category: 'Clothing' },
+  { name: 'Underwear (7x)', category: 'Clothing' },
+  { name: 'Socks (7x)', category: 'Clothing' },
+  { name: 'Jacket', category: 'Clothing' },
+  { name: 'Swimwear', category: 'Clothing' },
+  { name: 'Sport Shoes', category: 'Clothing' },
+  { name: 'Toothbrush', category: 'Toiletries' },
+  { name: 'Toothpaste', category: 'Toiletries' },
+  { name: 'Shampoo', category: 'Toiletries' },
+  { name: 'Sunscreen', category: 'Toiletries' },
+  { name: 'Deodorant', category: 'Toiletries' },
+  { name: 'Razor', category: 'Toiletries' },
+  { name: 'Phone Charger', category: 'Electronics' },
+  { name: 'Travel Adapter', category: 'Electronics' },
+  { name: 'Headphones', category: 'Electronics' },
+  { name: 'Camera', category: 'Electronics' },
+  { name: 'Power Bank', category: 'Electronics' },
+  { name: 'First Aid Kit', category: 'Health' },
+  { name: 'Prescription Medication', category: 'Health' },
+  { name: 'Pain Medication', category: 'Health' },
+  { name: 'Insect Repellent', category: 'Health' },
+  { name: 'Cash', category: 'Finances' },
+  { name: 'Credit Card', category: 'Finances' },
+]
+
+// Cycling color palette — works in light & dark mode
+const KAT_COLORS = [
+  '#3b82f6', // blue
+  '#a855f7', // purple
+  '#ec4899', // pink
+  '#22c55e', // green
+  '#f97316', // orange
+  '#06b6d4', // cyan
+  '#ef4444', // red
+  '#eab308', // yellow
+  '#8b5cf6', // violet
+  '#14b8a6', // teal
+]
+// Stable color assignment: category name → index via simple hash
+function katColor(kat, allCategories) {
+  const idx = allCategories ? allCategories.indexOf(kat) : -1
+  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
+  // Fallback: hash-based
+  let h = 0
+  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
+  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
+}
+
+// ── Artikel-Zeile ──────────────────────────────────────────────────────────
+interface ArtikelZeileProps {
+  item: PackingItem
+  tripId: number
+  categories: string[]
+  onCategoryChange: () => void
+}
+
+function ArtikelZeile({ item, tripId, categories, onCategoryChange }: ArtikelZeileProps) {
+  const [editing, setEditing] = useState(false)
+  const [editName, setEditName] = useState(item.name)
+  const [hovered, setHovered] = useState(false)
+  const [showCatPicker, setShowCatPicker] = useState(false)
+  const { togglePackingItem, updatePackingItem, deletePackingItem } = useTripStore()
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  const handleToggle = () => togglePackingItem(tripId, item.id, !item.checked)
+
+  const handleSaveName = async () => {
+    if (!editName.trim()) { setEditing(false); setEditName(item.name); return }
+    try { await updatePackingItem(tripId, item.id, { name: editName.trim() }); setEditing(false) }
+    catch { toast.error(t('packing.toast.saveError')) }
+  }
+
+  const handleDelete = async () => {
+    try { await deletePackingItem(tripId, item.id) }
+    catch { toast.error(t('packing.toast.deleteError')) }
+  }
+
+  const handleCatChange = async (cat) => {
+    setShowCatPicker(false)
+    if (cat === item.category) return
+    try { await updatePackingItem(tripId, item.id, { category: cat }) }
+    catch { toast.error(t('common.error')) }
+  }
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => { setHovered(false); setShowCatPicker(false) }}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 8,
+        padding: '6px 10px', borderRadius: 10, position: 'relative',
+        background: hovered ? 'var(--bg-secondary)' : 'transparent',
+        transition: 'background 0.1s',
+      }}
+    >
+      <button onClick={handleToggle} style={{
+        flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex',
+        color: item.checked ? '#10b981' : 'var(--text-faint)', transition: 'color 0.15s',
+      }}>
+        {item.checked ? <CheckSquare size={18} /> : <Square size={18} />}
+      </button>
+
+      {editing ? (
+        <input
+          type="text" value={editName} autoFocus
+          onChange={e => setEditName(e.target.value)}
+          onBlur={handleSaveName}
+          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(item.name) } }}
+          style={{ flex: 1, fontSize: 13.5, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
+        />
+      ) : (
+        <span
+          onClick={() => !item.checked && setEditing(true)}
+          style={{
+            flex: 1, fontSize: 13.5,
+            cursor: item.checked ? 'default' : 'text',
+            color: item.checked ? 'var(--text-faint)' : 'var(--text-primary)',
+            textDecoration: item.checked ? 'line-through' : 'none',
+          }}
+        >
+          {item.name}
+        </span>
+      )}
+
+      <div style={{ display: 'flex', gap: 2, alignItems: 'center', opacity: hovered ? 1 : 0, transition: 'opacity 0.12s', flexShrink: 0 }}>
+        <div style={{ position: 'relative' }}>
+          <button
+            onClick={() => setShowCatPicker(p => !p)}
+            title={t('packing.changeCategory')}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '3px 5px', borderRadius: 6, display: 'flex', alignItems: 'center', color: 'var(--text-faint)', fontSize: 10, gap: 2 }}
+          >
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: katColor(item.category || t('packing.defaultCategory'), categories), display: 'inline-block' }} />
+          </button>
+          {showCatPicker && (
+            <div style={{
+              position: 'absolute', right: 0, top: '100%', zIndex: 50, background: 'var(--bg-card)',
+              border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+              padding: 4, minWidth: 140,
+            }}>
+              {categories.map(cat => (
+                <button key={cat} onClick={() => handleCatChange(cat)} style={{
+                  display: 'flex', alignItems: 'center', gap: 7, width: '100%',
+                  padding: '6px 10px', background: cat === (item.category || t('packing.defaultCategory')) ? 'var(--bg-tertiary)' : 'none',
+                  border: 'none', cursor: 'pointer', fontSize: 12.5, fontFamily: 'inherit',
+                  color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
+                }}>
+                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(cat, categories), flexShrink: 0 }} />
+                  {cat}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <button onClick={() => setEditing(true)} title={t('common.rename')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '3px 4px', borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-secondary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+          <Pencil size={13} />
+        </button>
+
+        <button onClick={handleDelete} title={t('common.delete')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '3px 4px', borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+          onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+          <Trash2 size={13} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ── Kategorie-Gruppe ───────────────────────────────────────────────────────
+interface KategorieGruppeProps {
+  kategorie: string
+  items: PackingItem[]
+  tripId: number
+  allCategories: string[]
+  onRename: (oldName: string, newName: string) => Promise<void>
+  onDeleteAll: (items: PackingItem[]) => Promise<void>
+}
+
+function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll }: KategorieGruppeProps) {
+  const [offen, setOffen] = useState(true)
+  const [editingName, setEditingName] = useState(false)
+  const [editKatName, setEditKatName] = useState(kategorie)
+  const [showMenu, setShowMenu] = useState(false)
+  const { togglePackingItem } = useTripStore()
+  const toast = useToast()
+  const { t } = useTranslation()
+  const abgehakt = items.filter(i => i.checked).length
+  const alleAbgehakt = abgehakt === items.length
+  const dot = katColor(kategorie, allCategories)
+
+  const handleSaveKatName = async () => {
+    const neu = editKatName.trim()
+    if (!neu || neu === kategorie) { setEditingName(false); setEditKatName(kategorie); return }
+    try { await onRename(kategorie, neu); setEditingName(false) }
+    catch { toast.error(t('packing.toast.renameError')) }
+  }
+
+  const handleCheckAll = async () => {
+    for (const item of Array.from(items)) {
+      if (!item.checked) await togglePackingItem(tripId, item.id, true)
+    }
+  }
+  const handleUncheckAll = async () => {
+    for (const item of Array.from(items)) {
+      if (item.checked) await togglePackingItem(tripId, item.id, false)
+    }
+  }
+  const handleDeleteAll = async () => {
+    await onDeleteAll(items)
+    setShowMenu(false)
+  }
+
+  return (
+    <div style={{ marginBottom: 6, background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border-secondary)', overflow: 'visible' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderBottom: offen ? '1px solid var(--border-secondary)' : 'none' }}>
+        <button onClick={() => setOffen(o => !o)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', color: 'var(--text-faint)', flexShrink: 0 }}>
+          {offen ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
+        </button>
+
+        <span style={{ width: 10, height: 10, borderRadius: '50%', background: dot, flexShrink: 0 }} />
+
+        {editingName ? (
+          <input
+            autoFocus value={editKatName}
+            onChange={e => setEditKatName(e.target.value)}
+            onBlur={handleSaveKatName}
+            onKeyDown={e => { if (e.key === 'Enter') handleSaveKatName(); if (e.key === 'Escape') { setEditingName(false); setEditKatName(kategorie) } }}
+            style={{ flex: 1, fontSize: 12.5, fontWeight: 600, border: 'none', borderBottom: '2px solid var(--text-primary)', outline: 'none', background: 'transparent', fontFamily: 'inherit', color: 'var(--text-primary)', padding: '0 2px' }}
+          />
+        ) : (
+          <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.04em', flex: 1 }}>
+            {kategorie}
+          </span>
+        )}
+
+        <span style={{
+          fontSize: 11, fontWeight: 600, padding: '1px 8px', borderRadius: 99,
+          background: alleAbgehakt ? 'rgba(22,163,74,0.12)' : 'var(--bg-tertiary)',
+          color: alleAbgehakt ? '#16a34a' : 'var(--text-muted)',
+        }}>
+          {abgehakt}/{items.length}
+        </span>
+
+        <div style={{ position: 'relative' }}>
+          <button onClick={() => setShowMenu(m => !m)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+            onMouseEnter={e => e.currentTarget.style.color = 'var(--text-secondary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+            <MoreHorizontal size={15} />
+          </button>
+          {showMenu && (
+            <div style={{ position: 'absolute', right: 0, top: '100%', zIndex: 50, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.1)', padding: 4, minWidth: 170 }}
+              onMouseLeave={() => setShowMenu(false)}>
+              <MenuItem icon={<Pencil size={13} />} label={t('packing.menuRename')} onClick={() => { setEditingName(true); setShowMenu(false) }} />
+              <MenuItem icon={<CheckCheck size={13} />} label={t('packing.menuCheckAll')} onClick={() => { handleCheckAll(); setShowMenu(false) }} />
+              <MenuItem icon={<RotateCcw size={13} />} label={t('packing.menuUncheckAll')} onClick={() => { handleUncheckAll(); setShowMenu(false) }} />
+              <div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
+              <MenuItem icon={<Trash2 size={13} />} label={t('packing.menuDeleteCat')} danger onClick={handleDeleteAll} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {offen && (
+        <div style={{ padding: '4px 4px 6px' }}>
+          {items.map(item => (
+            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface MenuItemProps {
+  icon: React.ReactNode
+  label: string
+  onClick: () => void
+  danger: boolean
+}
+
+function MenuItem({ icon, label, onClick, danger }: MenuItemProps) {
+  return (
+    <button onClick={onClick} style={{
+      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+      padding: '7px 10px', background: 'none', border: 'none', cursor: 'pointer',
+      fontSize: 12.5, fontFamily: 'inherit', borderRadius: 7, textAlign: 'left',
+      color: danger ? '#ef4444' : 'var(--text-secondary)',
+    }}
+      onMouseEnter={e => e.currentTarget.style.background = danger ? '#fef2f2' : 'var(--bg-tertiary)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'none'}
+    >
+      {icon}{label}
+    </button>
+  )
+}
+
+// ── Haupt-Panel ────────────────────────────────────────────────────────────
+interface PackingListPanelProps {
+  tripId: number
+  items: PackingItem[]
+}
+
+export default function PackingListPanel({ tripId, items }: PackingListPanelProps) {
+  const [neuerName, setNeuerName] = useState('')
+  const [neueKategorie, setNeueKategorie] = useState('')
+  const [zeigeVorschlaege, setZeigeVorschlaege] = useState(false)
+  const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
+  const [showKatDropdown, setShowKatDropdown] = useState(false)
+  const katInputRef = useRef(null)
+  const { addPackingItem, updatePackingItem, deletePackingItem } = useTripStore()
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  const allCategories = useMemo(() => {
+    const cats = new Set(items.map(i => i.category || t('packing.defaultCategory')))
+    return Array.from(cats).sort()
+  }, [items, t])
+
+  const gruppiert = useMemo(() => {
+    const filtered = items.filter(i => {
+      if (filter === 'offen') return !i.checked
+      if (filter === 'erledigt') return i.checked
+      return true
+    })
+    const groups = {}
+    for (const item of filtered) {
+      const kat = item.category || t('packing.defaultCategory')
+      if (!groups[kat]) groups[kat] = []
+      groups[kat].push(item)
+    }
+    return groups
+  }, [items, filter, t])
+
+  const abgehakt = items.filter(i => i.checked).length
+  const fortschritt = items.length > 0 ? Math.round((abgehakt / items.length) * 100) : 0
+
+  const handleAdd = async (e) => {
+    e.preventDefault()
+    if (!neuerName.trim()) return
+    const kat = neueKategorie.trim() || (allCategories[0] || t('packing.defaultCategory'))
+    try {
+      await addPackingItem(tripId, { name: neuerName.trim(), category: kat })
+      setNeuerName('')
+    } catch { toast.error(t('packing.toast.addError')) }
+  }
+
+  const vorschlaege = t('packing.suggestions.items') || VORSCHLAEGE
+
+  const handleVorschlag = async (v) => {
+    try { await addPackingItem(tripId, { name: v.name, category: v.category || v.kategorie }) }
+    catch { toast.error(t('packing.toast.addError')) }
+  }
+
+  const handleRenameCategory = async (oldName, newName) => {
+    const toUpdate = items.filter(i => (i.category || t('packing.defaultCategory')) === oldName)
+    for (const item of toUpdate) {
+      await updatePackingItem(tripId, item.id, { category: newName })
+    }
+  }
+
+  const handleDeleteCategory = async (catItems) => {
+    for (const item of catItems) {
+      try { await deletePackingItem(tripId, item.id) } catch {}
+    }
+  }
+
+  const handleClearChecked = async () => {
+    if (!confirm(t('packing.confirm.clearChecked', { count: abgehakt }))) return
+    for (const item of items.filter(i => i.checked)) {
+      try { await deletePackingItem(tripId, item.id) } catch {}
+    }
+  }
+
+  const vorhandeneNamen = new Set(items.map(i => i.name.toLowerCase()))
+  const verfuegbareVorschlaege = vorschlaege.filter(v => !vorhandeneNamen.has(v.name.toLowerCase()))
+
+  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
+
+      {/* ── Header ── */}
+      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
+          <div>
+            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
+            <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
+              {items.length === 0 ? t('packing.empty') : t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
+            </p>
+          </div>
+          <div style={{ display: 'flex', gap: 6 }}>
+            {abgehakt > 0 && (
+              <button onClick={handleClearChecked} style={{
+                fontSize: 11.5, padding: '5px 10px', borderRadius: 99, border: '1px solid rgba(239,68,68,0.3)',
+                background: 'rgba(239,68,68,0.1)', color: '#ef4444', cursor: 'pointer', fontFamily: 'inherit',
+              }}>
+                <span className="hidden sm:inline">{t('packing.clearChecked', { count: abgehakt })}</span>
+                <span className="sm:hidden">{t('packing.clearCheckedShort', { count: abgehakt })}</span>
+              </button>
+            )}
+            <button onClick={() => setZeigeVorschlaege(v => !v)} style={{
+              display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
+              border: '1px solid', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+              background: zeigeVorschlaege ? 'var(--text-primary)' : 'var(--bg-card)',
+              borderColor: zeigeVorschlaege ? 'var(--text-primary)' : 'var(--border-primary)',
+              color: zeigeVorschlaege ? 'var(--bg-primary)' : 'var(--text-muted)',
+            }}>
+              <Sparkles size={12} /> {t('packing.suggestions')}
+            </button>
+          </div>
+        </div>
+
+          {items.length > 0 && (
+          <div style={{ marginBottom: 14 }}>
+            <div style={{ height: 5, background: 'var(--bg-tertiary)', borderRadius: 99, overflow: 'hidden' }}>
+              <div style={{
+                height: '100%', borderRadius: 99, transition: 'width 0.4s ease',
+                background: fortschritt === 100 ? '#10b981' : 'linear-gradient(90deg, var(--text-primary) 0%, var(--text-muted) 100%)',
+                width: `${fortschritt}%`,
+              }} />
+            </div>
+            {fortschritt === 100 && (
+              <p style={{ fontSize: 11.5, color: '#10b981', marginTop: 4, fontWeight: 600, margin: '4px 0 0' }}>{t('packing.allPacked')}</p>
+            )}
+          </div>
+        )}
+
+        <form onSubmit={handleAdd} style={{ display: 'flex', gap: 6 }}>
+          <input
+            type="text" value={neuerName} onChange={e => setNeuerName(e.target.value)}
+            placeholder={t('packing.addPlaceholder')}
+            style={{ flex: 1, padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13.5, fontFamily: 'inherit', outline: 'none', color: 'var(--text-primary)' }}
+          />
+          <div style={{ position: 'relative' }}>
+            <input
+              ref={katInputRef}
+              type="text" value={neueKategorie}
+              onChange={e => { setNeueKategorie(e.target.value); setShowKatDropdown(true) }}
+              onFocus={() => setShowKatDropdown(true)}
+              onBlur={() => setTimeout(() => setShowKatDropdown(false), 150)}
+              placeholder={allCategories[0] || t('packing.categoryPlaceholder')}
+              style={{ width: 120, padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', color: 'var(--text-secondary)' }}
+            />
+            {showKatDropdown && allCategories.length > 0 && (
+              <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.1)', zIndex: 50, padding: 4, marginTop: 2 }}>
+                {allCategories.filter(c => !neueKategorie || c.toLowerCase().includes(neueKategorie.toLowerCase())).map(cat => (
+                  <button key={cat} type="button" onMouseDown={() => setNeueKategorie(cat)} style={{
+                    display: 'flex', alignItems: 'center', gap: 6, width: '100%',
+                    padding: '6px 10px', background: 'none', border: 'none', cursor: 'pointer',
+                    fontSize: 12.5, fontFamily: 'inherit', color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
+                  }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                  >
+                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(cat, allCategories), flexShrink: 0 }} />
+                    {cat}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button type="submit" style={{ padding: '8px 12px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <Plus size={16} />
+          </button>
+        </form>
+      </div>
+
+      {/* ── Vorschläge ── */}
+      {zeigeVorschlaege && (
+        <div style={{ borderBottom: '1px solid rgba(0,0,0,0.06)', background: 'var(--bg-secondary)', padding: '10px 20px', flexShrink: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>{t('packing.suggestionsTitle')}</span>
+            <button onClick={() => setZeigeVorschlaege(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex' }}>
+              <X size={14} style={{ color: 'var(--text-faint)' }} />
+            </button>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, maxHeight: 110, overflowY: 'auto' }}>
+            {verfuegbareVorschlaege.map((v, i) => (
+              <button key={i} onClick={() => handleVorschlag(v)} style={{
+                fontSize: 12, padding: '4px 10px', borderRadius: 99, border: '1px solid var(--border-primary)',
+                background: 'var(--bg-card)', cursor: 'pointer', color: 'var(--text-secondary)', fontFamily: 'inherit', transition: 'all 0.1s',
+              }}
+                onMouseEnter={e => { e.currentTarget.style.background = 'var(--text-primary)'; e.currentTarget.style.color = 'white'; e.currentTarget.style.borderColor = 'var(--text-primary)' }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-secondary)'; e.currentTarget.style.borderColor = 'var(--border-primary)' }}
+              >
+                + {v.name}
+              </button>
+            ))}
+            {verfuegbareVorschlaege.length === 0 && <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: 0 }}>{t('packing.allSuggested')}</p>}
+          </div>
+        </div>
+      )}
+
+      {/* ── Filter-Tabs ── */}
+      {items.length > 0 && (
+        <div style={{ display: 'flex', gap: 4, padding: '10px 16px 0', flexShrink: 0 }}>
+          {[['alle', t('packing.filterAll')], ['offen', t('packing.filterOpen')], ['erledigt', t('packing.filterDone')]].map(([id, label]) => (
+            <button key={id} onClick={() => setFilter(id)} style={{
+              padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer',
+              fontSize: 12, fontFamily: 'inherit', fontWeight: filter === id ? 600 : 400,
+              background: filter === id ? 'var(--text-primary)' : 'transparent',
+              color: filter === id ? 'var(--bg-primary)' : 'var(--text-muted)',
+            }}>{label}</button>
+          ))}
+        </div>
+      )}
+
+      {/* ── Liste ── */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 12px 16px' }}>
+        {items.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+            <Luggage size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 10px' }} />
+            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('packing.emptyTitle')}</p>
+            <p style={{ fontSize: 13, color: 'var(--text-faint)', margin: 0 }}>{t('packing.emptyHint')}</p>
+          </div>
+        ) : Object.keys(gruppiert).length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-faint)' }}>
+            <p style={{ fontSize: 13, margin: 0 }}>{t('packing.emptyFiltered')}</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {Object.entries(gruppiert).map(([kat, katItems]) => (
+              <KategorieGruppe
+                key={kat}
+                kategorie={kat}
+                items={katItems}
+                tripId={tripId}
+                allCategories={allCategories}
+                onRename={handleRenameCategory}
+                onDeleteAll={handleDeleteCategory}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Photos/PhotoGallery.tsx

@@ -0,0 +1,217 @@
+import { useState, useMemo } from 'react'
+import { PhotoLightbox } from './PhotoLightbox'
+import { PhotoUpload } from './PhotoUpload'
+import { Upload, Camera } from 'lucide-react'
+import Modal from '../shared/Modal'
+import { useTranslation } from '../../i18n'
+import type { Photo, Place, Day } from '../../types'
+
+interface PhotoGalleryProps {
+  photos: Photo[]
+  onUpload: (fd: FormData) => Promise<void>
+  onDelete: (photoId: number) => Promise<void>
+  onUpdate: (photoId: number, data: Partial<Photo>) => Promise<void>
+  places: Place[]
+  days: Day[]
+  tripId: number
+}
+
+export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, places, days, tripId }: PhotoGalleryProps) {
+  const { t } = useTranslation()
+  const [lightboxIndex, setLightboxIndex] = useState(null)
+  const [showUpload, setShowUpload] = useState(false)
+  const [filterDayId, setFilterDayId] = useState('')
+
+  const filteredPhotos = useMemo(() => {
+    return photos.filter(photo => {
+      if (filterDayId && String(photo.day_id) !== String(filterDayId)) return false
+      return true
+    })
+  }, [photos, filterDayId])
+
+  const handlePhotoClick = (photo) => {
+    const idx = filteredPhotos.findIndex(p => p.id === photo.id)
+    setLightboxIndex(idx)
+  }
+
+  const handleDelete = async (photoId) => {
+    await onDelete(photoId)
+    if (lightboxIndex !== null) {
+      const newPhotos = filteredPhotos.filter(p => p.id !== photoId)
+      if (newPhotos.length === 0) {
+        setLightboxIndex(null)
+      } else if (lightboxIndex >= newPhotos.length) {
+        setLightboxIndex(newPhotos.length - 1)
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+      {/* Header */}
+      <div style={{ padding: '16px 24px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0, flexWrap: 'wrap' }}>
+        <div style={{ marginRight: 'auto' }}>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#111827' }}>Fotos</h2>
+          <p style={{ margin: '2px 0 0', fontSize: 12.5, color: '#9ca3af' }}>
+            {photos.length} Foto{photos.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+
+        <select
+          value={filterDayId}
+          onChange={e => setFilterDayId(e.target.value)}
+          className="border border-gray-200 rounded-lg px-3 py-1.5 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-slate-900"
+        >
+          <option value="">{t('photos.allDays')}</option>
+          {(days || []).map(day => (
+            <option key={day.id} value={day.id}>
+              Tag {day.day_number}{day.date ? ` · ${formatDate(day.date)}` : ''}
+            </option>
+          ))}
+        </select>
+
+        {filterDayId && (
+          <button
+            onClick={() => setFilterDayId('')}
+            className="text-xs text-gray-500 hover:text-gray-700 underline"
+          >
+            {t('common.reset')}
+          </button>
+        )}
+
+        <button
+          onClick={() => setShowUpload(true)}
+          className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium whitespace-nowrap"
+        >
+          <Upload className="w-4 h-4" />
+          Fotos hochladen
+        </button>
+      </div>
+
+      {/* Gallery Grid */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {filteredPhotos.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '60px 20px', color: '#9ca3af' }}>
+            <Camera size={40} style={{ color: '#d1d5db', display: 'block', margin: '0 auto 12px' }} />
+            <p style={{ fontSize: 14, fontWeight: 600, color: '#374151', margin: '0 0 4px' }}>{t('photos.noPhotos')}</p>
+            <p style={{ fontSize: 13, color: '#9ca3af', margin: '0 0 20px' }}>{t('photos.uploadHint')}</p>
+            <button
+              onClick={() => setShowUpload(true)}
+              className="flex items-center gap-2 bg-slate-900 text-white px-6 py-3 rounded-xl hover:bg-slate-700 font-medium"
+              style={{ display: 'inline-flex', margin: '0 auto' }}
+            >
+              <Upload className="w-4 h-4" />
+              Fotos hochladen
+            </button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2">
+            {filteredPhotos.map(photo => (
+              <PhotoThumbnail
+                key={photo.id}
+                photo={photo}
+                days={days}
+                places={places}
+                onClick={() => handlePhotoClick(photo)}
+              />
+            ))}
+
+            {/* Upload tile */}
+            <button
+              onClick={() => setShowUpload(true)}
+              className="aspect-square rounded-xl border-2 border-dashed border-gray-200 hover:border-slate-400 flex flex-col items-center justify-center gap-2 text-gray-400 hover:text-slate-700 transition-colors"
+            >
+              <Upload className="w-6 h-6" />
+              <span className="text-xs">{t('common.add')}</span>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Lightbox */}
+      {lightboxIndex !== null && (
+        <PhotoLightbox
+          photos={filteredPhotos}
+          initialIndex={lightboxIndex}
+          onClose={() => setLightboxIndex(null)}
+          onUpdate={onUpdate}
+          onDelete={handleDelete}
+          days={days}
+          places={places}
+          tripId={tripId}
+        />
+      )}
+
+      {/* Upload Modal */}
+      <Modal
+        isOpen={showUpload}
+        onClose={() => setShowUpload(false)}
+        title="Fotos hochladen"
+        size="lg"
+      >
+        <PhotoUpload
+          tripId={tripId}
+          days={days}
+          places={places}
+          onUpload={async (formData) => {
+            await onUpload(formData)
+            setShowUpload(false)
+          }}
+          onClose={() => setShowUpload(false)}
+        />
+      </Modal>
+    </div>
+  )
+}
+
+interface PhotoThumbnailProps {
+  photo: Photo
+  days: Day[]
+  places: Place[]
+  onClick: () => void
+}
+
+function PhotoThumbnail({ photo, days, places, onClick }: PhotoThumbnailProps) {
+  const day = days?.find(d => d.id === photo.day_id)
+  const place = places?.find(p => p.id === photo.place_id)
+
+  return (
+    <div
+      className="aspect-square rounded-xl overflow-hidden cursor-pointer relative group bg-gray-100"
+      onClick={onClick}
+    >
+      <img
+        src={photo.url}
+        alt={photo.caption || photo.original_name}
+        className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+        loading="lazy"
+        onError={e => {
+          (e.target as HTMLImageElement).style.display = 'none'
+          const next = (e.target as HTMLImageElement).nextSibling as HTMLElement; if (next) next.style.display = 'flex'
+        }}
+      />
+
+      {/* Fallback */}
+      <div className="hidden absolute inset-0 items-center justify-center text-gray-400 text-2xl">
+        🖼️
+      </div>
+
+      {/* Hover overlay */}
+      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-200 flex flex-col justify-end p-2 opacity-0 group-hover:opacity-100">
+        {photo.caption && (
+          <p className="text-white text-xs font-medium truncate">{photo.caption}</p>
+        )}
+        {(day || place) && (
+          <p className="text-white/70 text-xs truncate">
+            {day ? `Tag ${day.day_number}` : ''}{day && place ? ' · ' : ''}{place?.name || ''}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return new Date(dateStr + 'T00:00:00').toLocaleDateString('de-DE', { day: 'numeric', month: 'short' })
+}

client/src/components/Photos/PhotoLightbox.tsx

@@ -0,0 +1,241 @@
+import { useState, useEffect, useCallback } from 'react'
+import { X, ChevronLeft, ChevronRight, Edit2, Trash2, Check } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import type { Photo, Place, Day } from '../../types'
+
+interface PhotoLightboxProps {
+  photos: Photo[]
+  initialIndex: number
+  onClose: () => void
+  onUpdate: (photoId: number, data: Partial<Photo>) => Promise<void>
+  onDelete: (photoId: number) => Promise<void>
+  days: Day[]
+  places: Place[]
+  tripId: number
+}
+
+export function PhotoLightbox({ photos, initialIndex, onClose, onUpdate, onDelete, days, places, tripId }: PhotoLightboxProps) {
+  const { t } = useTranslation()
+  const [index, setIndex] = useState(initialIndex || 0)
+  const [editCaption, setEditCaption] = useState(false)
+  const [caption, setCaption] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+
+  const photo = photos[index]
+
+  useEffect(() => {
+    setIndex(initialIndex || 0)
+  }, [initialIndex])
+
+  useEffect(() => {
+    if (photo) setCaption(photo.caption || '')
+  }, [photo])
+
+  const prev = useCallback(() => {
+    setIndex(i => Math.max(0, i - 1))
+    setEditCaption(false)
+  }, [])
+
+  const next = useCallback(() => {
+    setIndex(i => Math.min(photos.length - 1, i + 1))
+    setEditCaption(false)
+  }, [photos.length])
+
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowLeft') prev()
+      if (e.key === 'ArrowRight') next()
+    }
+    window.addEventListener('keydown', handleKey)
+    return () => window.removeEventListener('keydown', handleKey)
+  }, [onClose, prev, next])
+
+  const handleSaveCaption = async () => {
+    setIsSaving(true)
+    try {
+      await onUpdate(photo.id, { caption })
+      setEditCaption(false)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Foto löschen?')) return
+    await onDelete(photo.id)
+    if (photos.length <= 1) {
+      onClose()
+    } else {
+      setIndex(i => Math.min(i, photos.length - 2))
+    }
+  }
+
+  if (!photo) return null
+
+  const day = days?.find(d => d.id === photo.day_id)
+  const place = places?.find(p => p.id === photo.place_id)
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
+      onClick={onClose}
+    >
+      {/* Main area */}
+      <div
+        className="relative flex flex-col w-full h-full max-w-5xl mx-auto"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Top bar */}
+        <div className="flex items-center justify-between p-4 flex-shrink-0">
+          <div className="text-white/60 text-sm">
+            {index + 1} / {photos.length}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleDelete}
+              className="p-2 text-white/60 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors"
+              title={t('common.delete')}
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+            <button
+              onClick={onClose}
+              className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Image area */}
+        <div className="flex-1 flex items-center justify-center relative min-h-0 px-16">
+          {/* Prev button */}
+          {index > 0 && (
+            <button
+              onClick={prev}
+              className="absolute left-4 top-1/2 -translate-y-1/2 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-10"
+            >
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+          )}
+
+          <img
+            src={photo.url}
+            alt={photo.caption || photo.original_name}
+            className="max-h-full max-w-full object-contain rounded-lg select-none"
+            draggable={false}
+          />
+
+          {/* Next button */}
+          {index < photos.length - 1 && (
+            <button
+              onClick={next}
+              className="absolute right-4 top-1/2 -translate-y-1/2 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-10"
+            >
+              <ChevronRight className="w-6 h-6" />
+            </button>
+          )}
+        </div>
+
+        {/* Bottom info */}
+        <div className="flex-shrink-0 p-4">
+          {/* Caption */}
+          <div className="flex items-center gap-2 mb-2">
+            {editCaption ? (
+              <>
+                <input
+                  type="text"
+                  value={caption}
+                  onChange={e => setCaption(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleSaveCaption()}
+                  placeholder="Beschriftung hinzufügen..."
+                  className="flex-1 bg-white/10 text-white border border-white/20 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-white/40"
+                  autoFocus
+                />
+                <button
+                  onClick={handleSaveCaption}
+                  disabled={isSaving}
+                  className="p-1.5 bg-slate-900 text-white rounded-lg hover:bg-slate-700"
+                >
+                  <Check className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => { setEditCaption(false); setCaption(photo.caption || '') }}
+                  className="p-1.5 text-white/60 hover:text-white"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </>
+            ) : (
+              <>
+                <p
+                  className="text-white text-sm flex-1 cursor-pointer hover:text-white/80"
+                  onClick={() => setEditCaption(true)}
+                >
+                  {photo.caption || <span className="text-white/40 italic">Beschriftung hinzufügen...</span>}
+                </p>
+                <button
+                  onClick={() => setEditCaption(true)}
+                  className="p-1.5 text-white/40 hover:text-white/70"
+                >
+                  <Edit2 className="w-3.5 h-3.5" />
+                </button>
+              </>
+            )}
+          </div>
+
+          {/* Metadata */}
+          <div className="flex items-center gap-4 text-white/40 text-xs">
+            <span>{photo.original_name}</span>
+            {photo.created_at && (
+              <span>{formatDate(photo.created_at)}</span>
+            )}
+            {day && <span>📅 Tag {day.day_number}</span>}
+            {place && <span>📍 {place.name}</span>}
+            {photo.file_size && <span>{formatSize(photo.file_size)}</span>}
+          </div>
+        </div>
+
+        {/* Thumbnail strip */}
+        {photos.length > 1 && (
+          <div className="flex-shrink-0 px-4 pb-4">
+            <div className="flex gap-1.5 overflow-x-auto pb-1">
+              {photos.map((p, i) => (
+                <button
+                  key={p.id}
+                  onClick={() => { setIndex(i); setEditCaption(false) }}
+                  className={`flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden transition-all ${
+                    i === index
+                      ? 'ring-2 ring-white scale-105'
+                      : 'opacity-50 hover:opacity-75'
+                  }`}
+                >
+                  <img
+                    src={p.url}
+                    alt=""
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  try {
+    return new Date(dateStr).toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric' })
+  } catch { return '' }
+}
+
+function formatSize(bytes) {
+  if (!bytes) return ''
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}

client/src/components/Photos/PhotoUpload.tsx

@@ -0,0 +1,202 @@
+import { useState, useCallback } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { Upload, X, Image } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import type { Place, Day } from '../../types'
+
+interface PhotoUploadProps {
+  tripId: number
+  days: Day[]
+  places: Place[]
+  onUpload: (fd: FormData) => Promise<void>
+  onClose: () => void
+}
+
+export function PhotoUpload({ tripId, days, places, onUpload, onClose }: PhotoUploadProps) {
+  const { t } = useTranslation()
+  const [files, setFiles] = useState([])
+  const [dayId, setDayId] = useState('')
+  const [placeId, setPlaceId] = useState('')
+  const [caption, setCaption] = useState('')
+  const [uploading, setUploading] = useState(false)
+  const [progress, setProgress] = useState(0)
+
+  const onDrop = useCallback((acceptedFiles) => {
+    const withPreview = acceptedFiles.map(file =>
+      Object.assign(file, { preview: URL.createObjectURL(file) })
+    )
+    setFiles(prev => [...prev, ...withPreview])
+  }, [])
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { 'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.heic'] },
+    maxFiles: 30,
+    maxSize: 10 * 1024 * 1024,
+  })
+
+  const removeFile = (index) => {
+    setFiles(prev => {
+      URL.revokeObjectURL(prev[index].preview)
+      return prev.filter((_, i) => i !== index)
+    })
+  }
+
+  const handleUpload = async () => {
+    if (files.length === 0) return
+    setUploading(true)
+    setProgress(0)
+
+    try {
+      const formData = new FormData()
+      files.forEach(file => formData.append('photos', file))
+      if (dayId) formData.append('day_id', dayId)
+      if (placeId) formData.append('place_id', placeId)
+      if (caption) formData.append('caption', caption)
+
+      await onUpload(formData)
+      files.forEach(f => URL.revokeObjectURL(f.preview))
+      setFiles([])
+    } catch (err: unknown) {
+      console.error('Upload failed:', err)
+    } finally {
+      setUploading(false)
+      setProgress(0)
+    }
+  }
+
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Dropzone */}
+      <div
+        {...getRootProps()}
+        className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
+          isDragActive
+            ? 'border-slate-900 bg-slate-50'
+            : 'border-gray-300 hover:border-slate-400 hover:bg-gray-50'
+        }`}
+      >
+        <input {...getInputProps()} />
+        <Upload className={`w-10 h-10 mx-auto mb-3 ${isDragActive ? 'text-slate-900' : 'text-gray-400'}`} />
+        {isDragActive ? (
+          <p className="text-slate-700 font-medium">Fotos hier ablegen...</p>
+        ) : (
+          <>
+            <p className="text-gray-600 font-medium">Fotos hier ablegen</p>
+            <p className="text-gray-400 text-sm mt-1">{t('photos.clickToSelect')}</p>
+            <p className="text-gray-400 text-xs mt-2">JPG, PNG, WebP · max. 10 MB · bis zu 30 Fotos</p>
+          </>
+        )}
+      </div>
+
+      {/* Preview grid */}
+      {files.length > 0 && (
+        <div>
+          <p className="text-sm font-medium text-gray-700 mb-2">{files.length} Foto{files.length !== 1 ? 's' : ''} ausgewählt</p>
+          <div className="grid grid-cols-4 sm:grid-cols-6 gap-2 max-h-48 overflow-y-auto">
+            {files.map((file, idx) => (
+              <div key={idx} className="relative aspect-square group">
+                <img
+                  src={file.preview}
+                  alt={file.name}
+                  className="w-full h-full object-cover rounded-lg"
+                />
+                <button
+                  onClick={() => removeFile(idx)}
+                  className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+                <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 rounded-b-lg opacity-0 group-hover:opacity-100 transition-opacity truncate">
+                  {formatSize(file.size)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Options */}
+      {files.length > 0 && (
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">Tag verknüpfen</label>
+            <select
+              value={dayId}
+              onChange={e => setDayId(e.target.value)}
+              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
+            >
+              <option value="">Kein Tag</option>
+              {(days || []).map(day => (
+                <option key={day.id} value={day.id}>Tag {day.day_number}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">{t('photos.linkPlace')}</label>
+            <select
+              value={placeId}
+              onChange={e => setPlaceId(e.target.value)}
+              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
+            >
+              <option value="">{t('photos.noPlace')}</option>
+              {(places || []).map(place => (
+                <option key={place.id} value={place.id}>{place.name}</option>
+              ))}
+            </select>
+          </div>
+          <div className="col-span-2">
+            <label className="block text-xs font-medium text-gray-700 mb-1">Beschriftung (für alle)</label>
+            <input
+              type="text"
+              value={caption}
+              onChange={e => setCaption(e.target.value)}
+              placeholder="Optionale Beschriftung..."
+              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Upload progress */}
+      {uploading && (
+        <div className="bg-slate-50 rounded-lg p-3">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="w-4 h-4 border-2 border-slate-900 border-t-transparent rounded-full animate-spin" />
+            <span className="text-sm text-slate-900">Wird hochgeladen...</span>
+          </div>
+          <div className="w-full bg-slate-200 rounded-full h-1.5">
+            <div
+              className="bg-slate-900 h-1.5 rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex justify-end gap-3">
+        <button
+          onClick={onClose}
+          className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50"
+        >
+          {t('common.cancel')}
+        </button>
+        <button
+          onClick={handleUpload}
+          disabled={files.length === 0 || uploading}
+          className="flex items-center gap-2 px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
+        >
+          <Upload className="w-4 h-4" />
+          {uploading ? t('common.uploading') : t('photos.uploadN', { n: files.length })}
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/Planner/DayDetailPanel.tsx

@@ -0,0 +1,644 @@
+import React, { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Hash, Pencil, Plane, Utensils, Train, Car, Ship, Ticket, FileText, Users } from 'lucide-react'
+
+const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
+const RES_TYPE_COLORS = { flight: '#3b82f6', hotel: '#8b5cf6', restaurant: '#ef4444', train: '#06b6d4', car: '#6b7280', cruise: '#0ea5e9', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
+import { weatherApi, accommodationsApi } from '../../api/client'
+import CustomSelect from '../shared/CustomSelect'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
+
+const WEATHER_ICON_MAP = {
+  Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
+  Thunderstorm: CloudLightning, Snow: CloudSnow, Mist: Wind, Fog: Wind, Haze: Wind,
+}
+
+interface WIconProps {
+  main: string
+  size?: number
+}
+
+function WIcon({ main, size = 14 }: WIconProps) {
+  const Icon = WEATHER_ICON_MAP[main] || Cloud
+  return <Icon size={size} strokeWidth={1.8} />
+}
+
+function cTemp(c, f) { return Math.round(f ? c * 9 / 5 + 32 : c) }
+
+function formatTime12(val, is12h) {
+  if (!val) return val
+  const [h, m] = val.split(':').map(Number)
+  if (isNaN(h) || isNaN(m)) return val
+  if (!is12h) return val
+  const period = h >= 12 ? 'PM' : 'AM'
+  const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+  return `${h12}:${String(m).padStart(2, '0')} ${period}`
+}
+
+interface DayDetailPanelProps {
+  day: Day
+  days: Day[]
+  places: Place[]
+  categories?: Category[]
+  tripId: number
+  assignments: AssignmentsMap
+  reservations?: Reservation[]
+  lat: number | null
+  lng: number | null
+  onClose: () => void
+  onAccommodationChange: () => void
+}
+
+export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange }: DayDetailPanelProps) {
+  const { t, language } = useTranslation()
+  const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit'
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  const fmtTime = (v) => formatTime12(v, is12h)
+  const unit = isFahrenheit ? '°F' : '°C'
+  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_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 =>
+          days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+        )
+        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_out: hotelForm.check_out || null,
+        confirmation: hotelForm.confirmation || null,
+      })
+      setAccommodation(data.accommodation)
+      setAccommodations(prev => [...prev, data.accommodation])
+      setShowHotelPicker(false)
+      setHotelForm({ check_in: '', 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)
+      setAccommodations(prev => prev.filter(a => a.id !== accommodation.id))
+      setAccommodation(null)
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  if (!day) return null
+
+  const formattedDate = day.date ? new Date(day.date + 'T00:00:00').toLocaleDateString(
+    language === 'de' ? 'de-DE' : 'en-US',
+    { weekday: 'long', day: 'numeric', month: 'long' }
+  ) : null
+
+  const placesWithCoords = places.filter(p => p.lat && p.lng)
+  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+
+  return (
+    <div style={{ position: 'fixed', bottom: 20, left: '50%', transform: 'translateX(-50%)', width: 'min(800px, calc(100vw - 32px))', zIndex: 50, ...font }}>
+      <div style={{
+        background: 'var(--bg-elevated)',
+        backdropFilter: 'blur(40px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+        borderRadius: 20,
+        boxShadow: '0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06)',
+        overflow: 'hidden', maxHeight: '60vh', display: 'flex', flexDirection: 'column',
+      }}>
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 16px 14px 20px', borderBottom: '1px solid var(--border-faint)' }}>
+          <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Calendar size={20} style={{ color: 'var(--text-primary)' }} />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+              {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
+            </div>
+            {formattedDate && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 1 }}>{formattedDate}</div>}
+          </div>
+          <button onClick={onClose} style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
+            <X size={14} style={{ color: 'var(--text-muted)' }} />
+          </button>
+        </div>
+
+        {/* Scrollable content */}
+        <div style={{ overflowY: 'auto', padding: '14px 20px 18px' }}>
+
+          {/* ── Weather ── */}
+          {day.date && lat && lng && (
+            loading ? (
+              <div style={{ textAlign: 'center', padding: 16, color: 'var(--text-faint)', fontSize: 12 }}>
+                <div style={{ width: 18, height: 18, border: '2px solid var(--border-primary)', borderTopColor: 'var(--text-primary)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 6px' }} />
+              </div>
+            ) : weather ? (
+              <div>
+                {/* Summary row */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                    <WIcon main={weather.main} size={20} />
+                  </div>
+                  <div style={{ flex: 1, display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
+                    <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
+                      {weather.type === 'climate' ? 'Ø ' : ''}{cTemp(weather.temp, isFahrenheit)}{unit}
+                    </span>
+                    {weather.temp_max != null && (
+                      <span style={{ fontSize: 12, color: 'var(--text-faint)' }}>
+                        {cTemp(weather.temp_min, isFahrenheit)}° / {cTemp(weather.temp_max, isFahrenheit)}°
+                      </span>
+                    )}
+                    {weather.description && (
+                      <span style={{ fontSize: 12, color: 'var(--text-muted)', textTransform: 'capitalize' }}>{weather.description}</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* Chips row */}
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: weather.hourly ? 10 : 0 }}>
+                  {weather.precipitation_probability_max != null && (
+                    <Chip icon={Droplets} value={`${weather.precipitation_probability_max}%`} />
+                  )}
+                  {weather.precipitation_sum > 0 && (
+                    <Chip icon={CloudRain} value={`${weather.precipitation_sum.toFixed(1)} mm`} />
+                  )}
+                  {weather.wind_max != null && (
+                    <Chip icon={Wind} value={isFahrenheit ? `${Math.round(weather.wind_max * 0.621371)} mph` : `${Math.round(weather.wind_max)} km/h`} />
+                  )}
+                  {weather.sunrise && <Chip icon={Sunrise} value={weather.sunrise} />}
+                  {weather.sunset && <Chip icon={Sunset} value={weather.sunset} />}
+                </div>
+
+                {/* Hourly scroll */}
+                {weather.hourly?.length > 0 && (
+                  <div style={{ overflowX: 'auto', margin: '0 -6px', padding: '0 6px 4px' }}>
+                    <div style={{ display: 'inline-flex', gap: 2 }}>
+                      {weather.hourly.filter((_, i) => i % 2 === 0).map(h => (
+                        <div key={h.hour} style={{
+                          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+                          width: 44, padding: '5px 2px', borderRadius: 8,
+                          background: h.precipitation_probability > 50 ? 'rgba(59,130,246,0.07)' : 'transparent',
+                        }}>
+                          <span style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500 }}>{String(h.hour).padStart(2, '0')}</span>
+                          <WIcon main={h.main} size={12} />
+                          <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-primary)' }}>{cTemp(h.temp, isFahrenheit)}°</span>
+                          {h.precipitation_probability > 0 && (
+                            <span style={{ fontSize: 8, color: '#3b82f6', fontWeight: 500 }}>{h.precipitation_probability}%</span>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {weather.type === 'climate' && (
+                  <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 6, fontStyle: 'italic' }}>{t('day.climateHint')}</div>
+                )}
+              </div>
+            ) : (
+              <div style={{ fontSize: 12, color: 'var(--text-faint)', textAlign: 'center', padding: 8 }}>{t('day.noWeather')}</div>
+            )
+          )}
+
+          {/* ── Reservations for this day's assignments ── */}
+          {(() => {
+            const dayAssignments = assignments[String(day.id)] || []
+            const dayReservations = reservations.filter(r => dayAssignments.some(a => a.id === r.assignment_id))
+            if (dayReservations.length === 0) return null
+            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 style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {dayReservations.map(r => {
+                    const linkedAssignment = dayAssignments.find(a => a.id === r.assignment_id)
+                    const confirmed = r.status === 'confirmed'
+                    return (
+                      <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8, background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.15)' : 'rgba(217,119,6,0.15)'}` }}>
+                        {(() => { const TIcon = RES_TYPE_ICONS[r.type] || FileText; return <TIcon size={12} style={{ color: RES_TYPE_COLORS[r.type] || 'var(--text-faint)', flexShrink: 0 }} /> })()}
+                        <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6, overflow: 'hidden' }}>
+                          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</span>
+                          {linkedAssignment?.place && <span style={{ fontSize: 9, color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>· {linkedAssignment.place.name}</span>}
+                        </div>
+                        {r.reservation_time?.includes('T') && (
+                          <span style={{ fontSize: 10, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+                            {new Date(r.reservation_time).toLocaleTimeString(language === 'de' ? 'de-DE' : 'en-US', { hour: '2-digit', minute: '2-digit', hour12: is12h })}
+                            {r.reservation_end_time && ` – ${fmtTime(r.reservation_end_time)}`}
+                          </span>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )
+          })()}
+
+          {/* Divider before accommodation */}
+          <div style={{ height: 1, background: 'var(--border-faint)', margin: '12px 0' }} />
+
+          {/* ── Accommodation ── */}
+          <div>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>
+
+            {dayAccommodations.length > 0 ? (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {dayAccommodations.map(acc => {
+                  const isCheckInDay = acc.start_day_id === day.id
+                  const isCheckOutDay = acc.end_day_id === day.id
+                  const isMiddleDay = !isCheckInDay && !isCheckOutDay
+                  const dayLabel = isCheckInDay && isCheckOutDay ? t('day.checkIn') + ' & ' + t('day.checkOut')
+                    : isCheckInDay ? t('day.checkIn')
+                    : isCheckOutDay ? t('day.checkOut')
+                    : null
+                  const linked = reservations.find(r => r.accommodation_id === acc.id)
+                  const confirmed = linked?.status === 'confirmed'
+
+                  return (
+                    <div key={acc.id} style={{ borderRadius: 12, background: 'var(--bg-secondary)', overflow: 'hidden' }}>
+                      {/* Day label */}
+                      {dayLabel && (
+                        <div style={{ padding: '4px 12px 0', display: 'flex', alignItems: 'center', gap: 4 }}>
+                          {isCheckInDay && <LogIn size={9} style={{ color: '#22c55e' }} />}
+                          {isCheckOutDay && !isCheckInDay && <LogOut size={9} style={{ color: '#ef4444' }} />}
+                          <span style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: isCheckOutDay && !isCheckInDay ? '#ef4444' : '#22c55e' }}>{dayLabel}</span>
+                        </div>
+                      )}
+                      {/* Hotel header */}
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px' }}>
+                        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                          {acc.place_image ? (
+                            <img src={acc.place_image} style={{ width: '100%', height: '100%', borderRadius: 10, objectFit: 'cover' }} />
+                          ) : (
+                            <Hotel size={16} style={{ color: 'var(--text-muted)' }} />
+                          )}
+                        </div>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_name}</div>
+                          {acc.place_address && <div style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_address}</div>}
+                        </div>
+                        <button onClick={() => { setAccommodation(acc); setHotelForm({ check_in: acc.check_in || '', check_out: acc.check_out || '', confirmation: acc.confirmation || '', place_id: acc.place_id }); setHotelDayRange({ start: acc.start_day_id, end: acc.end_day_id }); setShowHotelPicker('edit') }}
+                          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
+                          <Pencil size={12} style={{ color: 'var(--text-faint)' }} />
+                        </button>
+                        <button onClick={() => { setAccommodation(acc); handleRemoveAccommodation() }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
+                          <X size={12} style={{ color: 'var(--text-faint)' }} />
+                        </button>
+                      </div>
+                      {/* Details grid */}
+                      <div style={{ display: 'flex', gap: 0, margin: '0 12px 8px', borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border-faint)' }}>
+                        {acc.check_in && (
+                          <div style={{ flex: 1, padding: '8px 10px', borderRight: '1px solid var(--border-faint)', textAlign: 'center' }}>
+                            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{fmtTime(acc.check_in)}</div>
+                            <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
+                              <LogIn size={8} /> {t('day.checkIn')}
+                            </div>
+                          </div>
+                        )}
+                        {acc.check_out && (
+                          <div style={{ flex: 1, padding: '8px 10px', borderRight: acc.confirmation ? '1px solid var(--border-faint)' : 'none', textAlign: 'center' }}>
+                            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{fmtTime(acc.check_out)}</div>
+                            <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
+                              <LogOut size={8} /> {t('day.checkOut')}
+                            </div>
+                          </div>
+                        )}
+                        {acc.confirmation && (
+                          <div style={{ flex: 1, padding: '8px 10px', textAlign: 'center' }}>
+                            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{acc.confirmation}</div>
+                            <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
+                              <Hash size={8} /> {t('day.confirmation')}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      {/* Linked booking */}
+                      {linked && (
+                        <div style={{ margin: '0 12px 8px', padding: '6px 10px', borderRadius: 8, background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.15)' : 'rgba(217,119,6,0.15)'}`, display: 'flex', alignItems: 'center', gap: 8 }}>
+                          <div style={{ width: 6, height: 6, borderRadius: '50%', background: confirmed ? '#16a34a' : '#d97706', flexShrink: 0 }} />
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.title}</div>
+                            <div style={{ fontSize: 9, color: 'var(--text-faint)', display: 'flex', gap: 6, marginTop: 1 }}>
+                              <span>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
+                              {linked.confirmation_number && <span>#{linked.confirmation_number}</span>}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+                {/* Add another hotel */}
+                <button onClick={() => setShowHotelPicker(true)} style={{
+                  width: '100%', padding: 8, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
+                  background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+                  fontSize: 10, color: 'var(--text-faint)', fontFamily: 'inherit',
+                }}>
+                  <Hotel size={10} /> {t('day.addAccommodation')}
+                </button>
+              </div>
+            ) : (
+              <button onClick={() => setShowHotelPicker(true)} style={{
+                width: '100%', padding: 10, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
+                background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+                fontSize: 11, color: 'var(--text-faint)', fontFamily: 'inherit',
+              }}>
+                <Hotel size={12} /> {t('day.addAccommodation')}
+              </button>
+            )}
+
+            {/* 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 }}
+                onClick={() => setShowHotelPicker(false)}>
+                <div onClick={e => e.stopPropagation()} style={{
+                  width: '100%', maxWidth: 900, borderRadius: 16, overflow: 'hidden',
+                  background: 'var(--bg-card)', boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
+                  ...font,
+                }}>
+                  {/* Popup Header */}
+                  <div style={{ padding: '16px 18px 12px', borderBottom: '1px solid var(--border-faint)', display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <Hotel size={16} style={{ color: 'var(--text-primary)' }} />
+                    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', flex: 1 }}>{showHotelPicker === 'edit' ? t('day.editAccommodation') : t('day.addAccommodation')}</span>
+                    <button onClick={() => setShowHotelPicker(false)} style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 8, width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
+                      <X size={12} style={{ color: 'var(--text-muted)' }} />
+                    </button>
+                  </div>
+
+                  {/* Day Range */}
+                  <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-faint)', background: 'var(--bg-secondary)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{t('day.hotelDayRange')}</div>
+                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <CustomSelect
+                          value={hotelDayRange.start}
+                          onChange={v => setHotelDayRange(prev => ({ start: v, end: Math.max(v, prev.end) }))}
+                          options={days.map((d, i) => ({
+                            value: d.id,
+                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short' })}` : ''}`,
+                          }))}
+                          size="sm"
+                        />
+                      </div>
+                      <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>→</span>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <CustomSelect
+                          value={hotelDayRange.end}
+                          onChange={v => setHotelDayRange(prev => ({ start: Math.min(prev.start, v), end: v }))}
+                          options={days.map((d, i) => ({
+                            value: d.id,
+                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short' })}` : ''}`,
+                          }))}
+                          size="sm"
+                        />
+                      </div>
+                      <button onClick={() => setHotelDayRange({ start: days[0]?.id, end: days[days.length - 1]?.id })} style={{
+                        padding: '6px 14px', borderRadius: 8, border: 'none', fontSize: 11, fontWeight: 600, cursor: 'pointer', flexShrink: 0,
+                        background: hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id ? 'var(--text-primary)' : 'var(--bg-card)',
+                        color: hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id ? 'var(--bg-card)' : 'var(--text-muted)',
+                      }}>
+                        {t('day.allDays')}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Check-in / Check-out / Confirmation */}
+                  <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                    <div style={{ flex: 1, minWidth: 100 }}>
+                      <label style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkIn')}</label>
+                      <CustomTimePicker value={hotelForm.check_in} onChange={v => setHotelForm(f => ({ ...f, check_in: v }))} placeholder="14:00" />
+                    </div>
+                    <div style={{ flex: 1, minWidth: 100 }}>
+                      <label style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkOut')}</label>
+                      <CustomTimePicker value={hotelForm.check_out} onChange={v => setHotelForm(f => ({ ...f, check_out: v }))} placeholder="11:00" />
+                    </div>
+                    <div style={{ flex: 2, minWidth: 120 }}>
+                      <label style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.confirmation')}</label>
+                      <input type="text" value={hotelForm.confirmation} onChange={e => setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
+                        placeholder="ABC-12345" style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box', height: 38 }} />
+                    </div>
+                  </div>
+
+                  {/* Category Filter */}
+                  {categories.length > 0 && (
+                    <div style={{ padding: '8px 18px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                      <button onClick={() => setHotelCategoryFilter('')} style={{
+                        padding: '3px 10px', borderRadius: 6, border: 'none', fontSize: 10, fontWeight: 600, cursor: 'pointer',
+                        background: !hotelCategoryFilter ? 'var(--text-primary)' : 'var(--bg-secondary)',
+                        color: !hotelCategoryFilter ? 'var(--bg-card)' : 'var(--text-muted)',
+                      }}>{t('day.allDays')}</button>
+
+                      {categories.map(c => (
+                        <button key={c.id} onClick={() => setHotelCategoryFilter(c.id)} style={{
+                          padding: '3px 10px', borderRadius: 6, border: 'none', fontSize: 10, fontWeight: 600, cursor: 'pointer',
+                          background: hotelCategoryFilter === c.id ? c.color || 'var(--text-primary)' : 'var(--bg-secondary)',
+                          color: hotelCategoryFilter === c.id ? '#fff' : 'var(--text-muted)',
+                        }}>{c.name}</button>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Place List */}
+                  <div style={{ maxHeight: 250, overflowY: 'auto' }}>
+                    {(() => {
+                      const filtered = hotelCategoryFilter ? places.filter(p => p.category_id === hotelCategoryFilter) : places
+                      return filtered.length === 0 ? (
+                        <div style={{ padding: 20, textAlign: 'center', fontSize: 12, color: 'var(--text-faint)' }}>{t('day.noPlacesForHotel')}</div>
+                      ) : filtered.map(p => (
+                      <button key={p.id} onClick={() => handleSelectPlace(p.id)} style={{
+                        display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 18px',
+                        border: 'none', borderBottom: '1px solid var(--border-faint)',
+                        background: hotelForm.place_id === p.id ? 'var(--bg-hover)' : 'none',
+                        cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
+                        transition: 'background 0.1s',
+                        outline: hotelForm.place_id === p.id ? '2px solid var(--accent)' : 'none',
+                        outlineOffset: -2, borderRadius: hotelForm.place_id === p.id ? 8 : 0,
+                      }}
+                        onMouseEnter={e => { if (hotelForm.place_id !== p.id) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                        onMouseLeave={e => { if (hotelForm.place_id !== p.id) e.currentTarget.style.background = 'none' }}
+                      >
+                        <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                          {p.image_url ? (
+                            <img src={p.image_url} style={{ width: '100%', height: '100%', borderRadius: 8, objectFit: 'cover' }} />
+                          ) : (
+                            <MapPin size={13} style={{ color: 'var(--text-faint)' }} />
+                          )}
+                        </div>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
+                          {p.address && <div style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.address}</div>}
+                        </div>
+                      </button>
+                    ))
+                    })()}
+                  </div>
+
+                {/* Save / Cancel */}
+                <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border-faint)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+                  <button onClick={() => setShowHotelPicker(false)} style={{ padding: '7px 16px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={async () => {
+                    if (showHotelPicker === 'edit' && accommodation) {
+                      // Update existing
+                      await accommodationsApi.update(tripId, accommodation.id, {
+                        place_id: hotelForm.place_id,
+                        start_day_id: hotelDayRange.start,
+                        end_day_id: hotelDayRange.end,
+                        check_in: hotelForm.check_in || null,
+                        check_out: hotelForm.check_out || null,
+                        confirmation: hotelForm.confirmation || null,
+                      })
+                      setShowHotelPicker(false)
+                      setHotelForm({ check_in: '', check_out: '', confirmation: '', place_id: null })
+                      // Reload
+                      accommodationsApi.list(tripId).then(d => {
+                        setAccommodations(d.accommodations || [])
+                        const acc = (d.accommodations || []).find(a => days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id))
+                        setAccommodation(acc || null)
+                      })
+                      onAccommodationChange?.()
+                    } else {
+                      await handleSaveAccommodation()
+                    }
+                  }} disabled={!hotelForm.place_id} style={{
+                    padding: '7px 20px', borderRadius: 8, border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                    background: hotelForm.place_id ? 'var(--text-primary)' : 'var(--bg-tertiary)',
+                    color: hotelForm.place_id ? 'var(--bg-card)' : 'var(--text-faint)',
+                  }}>
+                    {t('common.save')}
+                  </button>
+                </div>
+
+                </div>
+              </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/PlaceFormModal.tsx

@@ -0,0 +1,479 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import Modal from '../shared/Modal'
+import CustomSelect from '../shared/CustomSelect'
+import { mapsApi } from '../../api/client'
+import { useAuthStore } from '../../store/authStore'
+import { useToast } from '../shared/Toast'
+import { Search, Paperclip, X, AlertTriangle } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import CustomTimePicker from '../shared/CustomTimePicker'
+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
+}
+
+const DEFAULT_FORM: PlaceFormData = {
+  name: '',
+  description: '',
+  address: '',
+  lat: '',
+  lng: '',
+  category_id: '',
+  place_time: '',
+  end_time: '',
+  notes: '',
+  transport_mode: 'walking',
+  website: '',
+}
+
+interface PlaceFormModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: PlaceFormData, 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
+  assignmentId: number | null
+  dayAssignments?: Assignment[]
+}
+
+export default function PlaceFormModal({
+  isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
+  onCategoryCreated, assignmentId, dayAssignments = [],
+}: PlaceFormModalProps) {
+  const [form, setForm] = useState(DEFAULT_FORM)
+  const [mapsSearch, setMapsSearch] = useState('')
+  const [mapsResults, setMapsResults] = useState([])
+  const [isSearchingMaps, setIsSearchingMaps] = useState(false)
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [showNewCategory, setShowNewCategory] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [pendingFiles, setPendingFiles] = useState([])
+  const fileRef = useRef(null)
+  const toast = useToast()
+  const { t, language } = useTranslation()
+  const { hasMapsKey } = useAuthStore()
+
+  useEffect(() => {
+    if (place) {
+      setForm({
+        name: place.name || '',
+        description: place.description || '',
+        address: place.address || '',
+        lat: place.lat || '',
+        lng: place.lng || '',
+        category_id: place.category_id || '',
+        place_time: place.place_time || '',
+        end_time: place.end_time || '',
+        notes: place.notes || '',
+        transport_mode: place.transport_mode || 'walking',
+        website: place.website || '',
+      })
+    } else if (prefillCoords) {
+      setForm({
+        ...DEFAULT_FORM,
+        lat: String(prefillCoords.lat),
+        lng: String(prefillCoords.lng),
+        name: prefillCoords.name || '',
+        address: prefillCoords.address || '',
+      })
+    } else {
+      setForm(DEFAULT_FORM)
+    }
+    setPendingFiles([])
+  }, [place, prefillCoords, isOpen])
+
+  const handleChange = (field, value) => {
+    setForm(prev => ({ ...prev, [field]: value }))
+  }
+
+  const handleMapsSearch = async () => {
+    if (!mapsSearch.trim()) return
+    setIsSearchingMaps(true)
+    try {
+      const result = await mapsApi.search(mapsSearch, language)
+      setMapsResults(result.places || [])
+    } catch (err: unknown) {
+      toast.error(t('places.mapsSearchError'))
+    } finally {
+      setIsSearchingMaps(false)
+    }
+  }
+
+  const handleSelectMapsResult = (result) => {
+    setForm(prev => ({
+      ...prev,
+      name: result.name || prev.name,
+      address: result.address || prev.address,
+      lat: result.lat || prev.lat,
+      lng: result.lng || prev.lng,
+      google_place_id: result.google_place_id || prev.google_place_id,
+      osm_id: result.osm_id || prev.osm_id,
+      website: result.website || prev.website,
+      phone: result.phone || prev.phone,
+    }))
+    setMapsResults([])
+    setMapsSearch('')
+  }
+
+  const handleCreateCategory = async () => {
+    if (!newCategoryName.trim()) return
+    try {
+      const cat = await onCategoryCreated?.({ name: newCategoryName, color: '#6366f1', icon: 'MapPin' })
+      if (cat) setForm(prev => ({ ...prev, category_id: cat.id }))
+      setNewCategoryName('')
+      setShowNewCategory(false)
+    } catch (err: unknown) {
+      toast.error(t('places.categoryCreateError'))
+    }
+  }
+
+  const handleFileAdd = (e) => {
+    const files = Array.from((e.target as HTMLInputElement).files || [])
+    setPendingFiles(prev => [...prev, ...files])
+    e.target.value = ''
+  }
+
+  const handleRemoveFile = (idx) => {
+    setPendingFiles(prev => prev.filter((_, i) => i !== idx))
+  }
+
+  // Paste support for files/images
+  const handlePaste = (e) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith('image/') || item.type === 'application/pdf') {
+        e.preventDefault()
+        const file = item.getAsFile()
+        if (file) setPendingFiles(prev => [...prev, file])
+        return
+      }
+    }
+  }
+
+  const hasTimeError = place && form.place_time && form.end_time && form.place_time.length >= 5 && form.end_time.length >= 5 && form.end_time <= form.place_time
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!form.name.trim()) {
+      toast.error(t('places.nameRequired'))
+      return
+    }
+    setIsSaving(true)
+    try {
+      await onSave({
+        ...form,
+        lat: form.lat ? parseFloat(form.lat) : null,
+        lng: form.lng ? parseFloat(form.lng) : null,
+        category_id: form.category_id || null,
+        _pendingFiles: pendingFiles.length > 0 ? pendingFiles : undefined,
+      })
+      onClose()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : t('places.saveError'))
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={place ? t('places.editPlace') : t('places.addPlace')}
+      size="lg"
+    >
+      <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
+        {/* 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)' }}>
+              {t('places.osmActive')}
+            </p>
+          )}
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={mapsSearch}
+              onChange={e => setMapsSearch(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), handleMapsSearch())}
+              placeholder={t('places.mapsSearchPlaceholder')}
+              className="flex-1 border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 bg-white"
+            />
+            <button
+              type="button"
+              onClick={handleMapsSearch}
+              disabled={isSearchingMaps}
+              className="bg-slate-900 text-white px-3 py-1.5 rounded-lg text-sm hover:bg-slate-700 disabled:opacity-60"
+            >
+              {isSearchingMaps ? '...' : <Search className="w-4 h-4" />}
+            </button>
+          </div>
+          {mapsResults.length > 0 && (
+            <div className="bg-white rounded-lg border border-slate-200 overflow-hidden max-h-40 overflow-y-auto mt-2">
+              {mapsResults.map((result, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => handleSelectMapsResult(result)}
+                  className="w-full text-left px-3 py-2 hover:bg-slate-50 border-b border-slate-100 last:border-0"
+                >
+                  <div className="font-medium text-sm">{result.name}</div>
+                  <div className="text-xs text-slate-500 truncate">{result.address}</div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Name */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formName')} *</label>
+          <input
+            type="text"
+            value={form.name}
+            onChange={e => handleChange('name', e.target.value)}
+            required
+            placeholder={t('places.formNamePlaceholder')}
+            className="form-input"
+          />
+        </div>
+
+        {/* Description */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formDescription')}</label>
+          <textarea
+            value={form.description}
+            onChange={e => handleChange('description', e.target.value)}
+            rows={2}
+            placeholder={t('places.formDescriptionPlaceholder')}
+            className="form-input" style={{ resize: 'none' }}
+          />
+        </div>
+
+        {/* Address + Coordinates */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formAddress')}</label>
+          <input
+            type="text"
+            value={form.address}
+            onChange={e => handleChange('address', e.target.value)}
+            placeholder={t('places.formAddressPlaceholder')}
+            className="form-input"
+          />
+          <div className="grid grid-cols-2 gap-2 mt-2">
+            <input
+              type="number"
+              step="any"
+              value={form.lat}
+              onChange={e => handleChange('lat', e.target.value)}
+              placeholder={t('places.formLat')}
+              className="form-input"
+            />
+            <input
+              type="number"
+              step="any"
+              value={form.lng}
+              onChange={e => handleChange('lng', e.target.value)}
+              placeholder={t('places.formLng')}
+              className="form-input"
+            />
+          </div>
+        </div>
+
+        {/* Category */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formCategory')}</label>
+          {!showNewCategory ? (
+            <div className="flex gap-2">
+              <CustomSelect
+                value={form.category_id}
+                onChange={value => handleChange('category_id', value)}
+                placeholder={t('places.noCategory')}
+                options={[
+                  { value: '', label: t('places.noCategory') },
+                  ...(categories || []).map(c => ({
+                    value: c.id,
+                    label: c.name,
+                  })),
+                ]}
+                style={{ flex: 1 }}
+                size="sm"
+              />
+            </div>
+          ) : (
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={newCategoryName}
+                onChange={e => setNewCategoryName(e.target.value)}
+                placeholder={t('places.categoryNamePlaceholder')}
+                className="form-input" style={{ flex: 1 }}
+              />
+              <button type="button" onClick={handleCreateCategory} className="bg-slate-900 text-white px-3 rounded-lg hover:bg-slate-700 text-sm">
+                OK
+              </button>
+              <button type="button" onClick={() => setShowNewCategory(false)} className="text-gray-500 px-2 text-sm">
+                {t('common.cancel')}
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Time — only shown when editing, not when creating */}
+        {place && (
+          <TimeSection
+            form={form}
+            handleChange={handleChange}
+            assignmentId={assignmentId}
+            dayAssignments={dayAssignments}
+            hasTimeError={hasTimeError}
+            t={t}
+          />
+        )}
+
+        {/* Website */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formWebsite')}</label>
+          <input
+            type="url"
+            value={form.website}
+            onChange={e => handleChange('website', e.target.value)}
+            placeholder="https://..."
+            className="form-input"
+          />
+        </div>
+
+        {/* File Attachments */}
+        {true && (
+          <div className="border border-gray-200 rounded-xl p-3 space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="block text-sm font-medium text-gray-700">{t('files.title')}</label>
+              <button type="button" onClick={() => fileRef.current?.click()}
+                className="flex items-center gap-1 text-xs text-slate-500 hover:text-slate-700 transition-colors">
+                <Paperclip size={12} /> {t('files.attach')}
+              </button>
+            </div>
+            <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileAdd} />
+            {pendingFiles.length > 0 && (
+              <div className="space-y-1">
+                {pendingFiles.map((file, idx) => (
+                  <div key={idx} className="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-slate-50 text-xs">
+                    <Paperclip size={10} className="text-slate-400 shrink-0" />
+                    <span className="truncate flex-1 text-slate-600">{file.name}</span>
+                    <button type="button" onClick={() => handleRemoveFile(idx)} className="text-slate-400 hover:text-red-500 shrink-0">
+                      <X size={12} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            {pendingFiles.length === 0 && (
+              <p className="text-xs text-slate-400">{t('files.pasteHint')}</p>
+            )}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-2 border-t border-gray-100">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="submit"
+            disabled={isSaving || hasTimeError}
+            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
+          >
+            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  )
+}
+
+interface TimeSectionProps {
+  form: PlaceFormData
+  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void
+  assignmentId: number | null
+  dayAssignments: Assignment[]
+  hasTimeError: boolean
+  t: (key: string, params?: Record<string, string | number>) => string
+}
+
+function TimeSection({ form, handleChange, assignmentId, dayAssignments, hasTimeError, t }: TimeSectionProps) {
+
+  const collisions = useMemo(() => {
+    if (!assignmentId || !form.place_time || form.place_time.length < 5) return []
+    // Find the day_id for the current assignment
+    const current = dayAssignments.find(a => a.id === assignmentId)
+    if (!current) return []
+    const myStart = form.place_time
+    const myEnd = form.end_time && form.end_time.length >= 5 ? form.end_time : null
+    return dayAssignments.filter(a => {
+      if (a.id === assignmentId) return false
+      if (a.day_id !== current.day_id) return false
+      const aStart = a.place?.place_time
+      const aEnd = a.place?.end_time
+      if (!aStart) return false
+      // Check overlap: two intervals overlap if start < otherEnd AND otherStart < end
+      const s1 = myStart, e1 = myEnd || myStart
+      const s2 = aStart, e2 = aEnd || aStart
+      return s1 < (e2 || '23:59') && s2 < (e1 || '23:59') && s1 !== e2 && s2 !== e1
+    })
+  }, [assignmentId, dayAssignments, form.place_time, form.end_time])
+
+  return (
+    <div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.startTime')}</label>
+          <CustomTimePicker
+            value={form.place_time}
+            onChange={v => handleChange('place_time', v)}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.endTime')}</label>
+          <CustomTimePicker
+            value={form.end_time}
+            onChange={v => handleChange('end_time', v)}
+          />
+        </div>
+      </div>
+      {hasTimeError && (
+        <div className="flex items-center gap-1.5 mt-2 px-2.5 py-1.5 rounded-lg text-xs" style={{ background: 'var(--bg-warning, #fef3c7)', color: 'var(--text-warning, #92400e)' }}>
+          <AlertTriangle size={13} className="shrink-0" />
+          {t('places.endTimeBeforeStart')}
+        </div>
+      )}
+      {collisions.length > 0 && (
+        <div className="flex items-start gap-1.5 mt-2 px-2.5 py-1.5 rounded-lg text-xs" style={{ background: 'var(--bg-warning, #fef3c7)', color: 'var(--text-warning, #92400e)' }}>
+          <AlertTriangle size={13} className="shrink-0 mt-0.5" />
+          <span>
+            {t('places.timeCollision')}{' '}
+            {collisions.map(a => a.place?.name).filter(Boolean).join(', ')}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/PlaceInspector.tsx

@@ -0,0 +1,717 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { X, Clock, MapPin, ExternalLink, Phone, Euro, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Users } from 'lucide-react'
+import PlaceAvatar from '../shared/PlaceAvatar'
+import { mapsApi } from '../../api/client'
+import { useSettingsStore } from '../../store/settingsStore'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { useTranslation } from '../../i18n'
+import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
+
+const detailsCache = new Map()
+
+function getSessionCache(key) {
+  try {
+    const raw = sessionStorage.getItem(key)
+    return raw ? JSON.parse(raw) : undefined
+  } catch { return undefined }
+}
+
+function setSessionCache(key, value) {
+  try { sessionStorage.setItem(key, JSON.stringify(value)) } catch {}
+}
+
+function usePlaceDetails(googlePlaceId, osmId, language) {
+  const [details, setDetails] = useState(null)
+  const detailId = googlePlaceId || osmId
+  const cacheKey = `gdetails_${detailId}_${language}`
+  useEffect(() => {
+    if (!detailId) { setDetails(null); return }
+    if (detailsCache.has(cacheKey)) { setDetails(detailsCache.get(cacheKey)); return }
+    const cached = getSessionCache(cacheKey)
+    if (cached) { detailsCache.set(cacheKey, cached); setDetails(cached); return }
+    mapsApi.details(detailId, language).then(data => {
+      detailsCache.set(cacheKey, data.place)
+      setSessionCache(cacheKey, data.place)
+      setDetails(data.place)
+    }).catch(() => {})
+  }, [detailId, language])
+  return details
+}
+
+function getWeekdayIndex(dateStr) {
+  // weekdayDescriptions[0] = Monday … [6] = Sunday
+  const d = dateStr ? new Date(dateStr + 'T12:00:00') : new Date()
+  const jsDay = d.getDay()
+  return jsDay === 0 ? 6 : jsDay - 1
+}
+
+function convertHoursLine(line, timeFormat) {
+  if (!line) return ''
+  const hasAmPm = /\d{1,2}:\d{2}\s*(AM|PM)/i.test(line)
+
+  if (timeFormat === '12h' && !hasAmPm) {
+    // 24h → 12h: "10:00" → "10:00 AM", "21:00" → "9:00 PM", "Uhr" entfernen
+    return line.replace(/\s*Uhr/g, '').replace(/(\d{1,2}):(\d{2})/g, (match, h, m) => {
+      const hour = parseInt(h)
+      if (isNaN(hour)) return match
+      const period = hour >= 12 ? 'PM' : 'AM'
+      const h12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+      return `${h12}:${m} ${period}`
+    })
+  }
+  if (timeFormat !== '12h' && hasAmPm) {
+    // 12h → 24h: "10:00 AM" → "10:00", "9:00 PM" → "21:00"
+    return line.replace(/(\d{1,2}):(\d{2})\s*(AM|PM)/gi, (_, h, m, p) => {
+      let hour = parseInt(h)
+      if (p.toUpperCase() === 'PM' && hour !== 12) hour += 12
+      if (p.toUpperCase() === 'AM' && hour === 12) hour = 0
+      return `${String(hour).padStart(2, '0')}:${m}`
+    })
+  }
+  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`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+interface TripMember {
+  id: number
+  username: string
+  avatar_url?: string | null
+}
+
+interface PlaceInspectorProps {
+  place: Place | null
+  categories: Category[]
+  days: Day[]
+  selectedDayId: number | null
+  selectedAssignmentId: number | null
+  assignments: AssignmentsMap
+  reservations?: Reservation[]
+  onClose: () => void
+  onEdit: () => void
+  onDelete: () => void
+  onAssignToDay: (placeId: number, dayId: number) => void
+  onRemoveAssignment: (assignmentId: number, dayId: number) => void
+  files: TripFile[]
+  onFileUpload: (fd: FormData) => Promise<void>
+  tripMembers?: TripMember[]
+  onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
+  onUpdatePlace: (placeId: number, data: Partial<Place>) => void
+}
+
+export default function PlaceInspector({
+  place, categories, days, selectedDayId, selectedAssignmentId, assignments, reservations = [],
+  onClose, onEdit, onDelete, onAssignToDay, onRemoveAssignment,
+  files, onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace,
+}: PlaceInspectorProps) {
+  const { t, locale, language } = useTranslation()
+  const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+  const [hoursExpanded, setHoursExpanded] = useState(false)
+  const [filesExpanded, setFilesExpanded] = useState(false)
+  const [isUploading, setIsUploading] = useState(false)
+  const [editingName, setEditingName] = useState(false)
+  const [nameValue, setNameValue] = useState('')
+  const nameInputRef = useRef(null)
+  const fileInputRef = useRef(null)
+  const googleDetails = usePlaceDetails(place?.google_place_id, place?.osm_id, language)
+
+  const startNameEdit = () => {
+    if (!onUpdatePlace) return
+    setNameValue(place.name || '')
+    setEditingName(true)
+    setTimeout(() => nameInputRef.current?.focus(), 0)
+  }
+
+  const commitNameEdit = () => {
+    if (!editingName) return
+    const trimmed = nameValue.trim()
+    setEditingName(false)
+    if (!trimmed || trimmed === place.name) return
+    onUpdatePlace(place.id, { name: trimmed })
+  }
+
+  const handleNameKeyDown = (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); commitNameEdit() }
+    if (e.key === 'Escape') setEditingName(false)
+  }
+
+  if (!place) return null
+
+  const category = categories?.find(c => c.id === place.category_id)
+  const dayAssignments = selectedDayId ? (assignments[String(selectedDayId)] || []) : []
+  const assignmentInDay = selectedDayId ? dayAssignments.find(a => a.place?.id === place.id) : null
+
+  const openingHours = googleDetails?.opening_hours || null
+  const openNow = googleDetails?.open_now ?? null
+  const selectedDay = days?.find(d => d.id === selectedDayId)
+  const weekdayIndex = getWeekdayIndex(selectedDay?.date)
+
+  const placeFiles = (files || []).filter(f => String(f.place_id) === String(place.id))
+
+  const handleFileUpload = useCallback(async (e) => {
+    const selectedFiles = Array.from((e.target as HTMLInputElement).files || [])
+    if (!selectedFiles.length || !onFileUpload) return
+    setIsUploading(true)
+    try {
+      for (const file of selectedFiles) {
+        const fd = new FormData()
+        fd.append('file', file)
+        fd.append('place_id', place.id)
+        await onFileUpload(fd)
+      }
+      setFilesExpanded(true)
+    } catch (err: unknown) {
+      console.error('Upload failed', err)
+    } finally {
+      setIsUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    }
+  }, [onFileUpload, place.id])
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 20,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: 'min(800px, calc(100vw - 32px))',
+        zIndex: 50,
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+      }}
+    >
+      <div style={{
+        background: 'var(--bg-elevated)',
+        backdropFilter: 'blur(40px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+        borderRadius: 20,
+        boxShadow: '0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06)',
+        overflow: 'hidden',
+        maxHeight: '60vh',
+        display: 'flex',
+        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>
+
+        {/* Content — scrollable */}
+        <div style={{ overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+
+          {/* Info-Chips — hidden on mobile, shown on desktop */}
+          <div className="hidden sm:flex" style={{ flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
+            {googleDetails?.rating && (() => {
+              const shortReview = (googleDetails.reviews || []).find(r => r.text && r.text.length > 5)
+              return (
+                <Chip
+                  icon={<Star size={12} fill="#facc15" color="#facc15" />}
+                  text={<>
+                    {googleDetails.rating.toFixed(1)}
+                    {googleDetails.rating_count ? <span style={{ opacity: 0.5 }}> ({googleDetails.rating_count.toLocaleString('de-DE')})</span> : ''}
+                    {shortReview && <span className="hidden md:inline" style={{ opacity: 0.6, fontWeight: 400, fontStyle: 'italic', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> · „{shortReview.text}"</span>}
+                  </>}
+                  color="var(--text-secondary)" bg="var(--bg-hover)"
+                />
+              )
+            })()}
+            {place.price > 0 && (
+              <Chip icon={<Euro size={12} />} text={`${place.price} ${place.currency || '€'}`} color="#059669" bg="#ecfdf5" />
+            )}
+          </div>
+
+          {/* Telefon */}
+          {(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' }}>
+                <Phone size={12} /> {place.phone || googleDetails.phone}
+              </a>
+            </div>
+          )}
+
+          {/* Description / Summary */}
+          {(place.description || place.notes || googleDetails?.summary) && (
+            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
+              <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0, lineHeight: '1.5', padding: '8px 12px' }}>
+                {place.description || place.notes || googleDetails?.summary}
+              </p>
+            </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' }}>
+                        {res.reservation_time && (
+                          <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(res.reservation_time).toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })}</div>
+                          </div>
+                        )}
+                        {res.reservation_time?.includes('T') && (
+                          <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 }}>
+                              {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                              {res.reservation_end_time && ` – ${res.reservation_end_time}`}
+                            </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 style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4 }}>{res.notes}</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>
+            )
+          })()}
+
+          {/* 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>
+          )}
+
+
+          {/* 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 => (
+                    <a key={f.id} href={`/uploads/files/${f.filename}`} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer' }}>
+                      {(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>}
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          </div>
+
+        </div>
+
+        {/* Footer actions */}
+        <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border-faint)', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+          {selectedDayId && (
+            assignmentInDay ? (
+              <ActionButton onClick={() => onRemoveAssignment(selectedDayId, assignmentInDay.id)} variant="ghost" icon={<Minus size={13} />}
+                label={<><span className="hidden sm:inline">{t('inspector.removeFromDay')}</span><span className="sm:hidden">Remove</span></>} />
+            ) : (
+              <ActionButton onClick={() => onAssignToDay(place.id)} variant="primary" icon={<Plus size={13} />} label={t('inspector.addToDay')} />
+            )
+          )}
+          {googleDetails?.google_maps_url && (
+            <ActionButton onClick={() => window.open(googleDetails.google_maps_url, '_blank')} variant="ghost" icon={<Navigation size={13} />}
+              label={<span className="hidden sm:inline">{t('inspector.google')}</span>} />
+          )}
+          {!googleDetails?.google_maps_url && place.lat && place.lng && (
+            <ActionButton onClick={() => window.open(`https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`, '_blank')} variant="ghost" icon={<Navigation size={13} />}
+              label={<span className="hidden sm:inline">Google Maps</span>} />
+          )}
+          {(place.website || googleDetails?.website) && (
+            <ActionButton onClick={() => window.open(place.website || googleDetails?.website, '_blank')} variant="ghost" icon={<ExternalLink size={13} />}
+              label={<span className="hidden sm:inline">{t('inspector.website')}</span>} />
+          )}
+          <div style={{ flex: 1 }} />
+          <ActionButton onClick={onEdit} variant="ghost" icon={<Edit2 size={13} />} label={<span className="hidden sm:inline">{t('common.edit')}</span>} />
+          <ActionButton onClick={onDelete} variant="danger" icon={<Trash2 size={13} />} label={<span className="hidden sm:inline">{t('common.delete')}</span>} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface ChipProps {
+  icon: React.ReactNode
+  text: React.ReactNode
+  color?: string
+  bg?: string
+}
+
+function Chip({ icon, text, color = 'var(--text-secondary)', bg = 'var(--bg-hover)' }: ChipProps) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 9px', borderRadius: 99, background: bg, color, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
+      <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</span>
+    </div>
+  )
+}
+
+interface RowProps {
+  icon: React.ReactNode
+  children: React.ReactNode
+}
+
+function Row({ icon, children }: RowProps) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <div style={{ flexShrink: 0 }}>{icon}</div>
+      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
+    </div>
+  )
+}
+
+interface ActionButtonProps {
+  onClick: () => void
+  variant: 'primary' | 'ghost' | 'danger'
+  icon: React.ReactNode
+  label: React.ReactNode
+}
+
+function ActionButton({ onClick, variant, icon, label }: ActionButtonProps) {
+  const base = {
+    primary: { background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', hoverBg: 'var(--text-secondary)' },
+    ghost: { background: 'var(--bg-hover)', color: 'var(--text-secondary)', border: 'none', hoverBg: 'var(--bg-tertiary)' },
+    danger: { background: 'rgba(239,68,68,0.08)', color: '#dc2626', border: 'none', hoverBg: 'rgba(239,68,68,0.16)' },
+  }
+  const s = base[variant] || base.ghost
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 5,
+        padding: '6px 12px', borderRadius: 10, minHeight: 30,
+        fontSize: 12, fontWeight: 500, cursor: 'pointer',
+        fontFamily: 'inherit', transition: 'background 0.15s, opacity 0.15s',
+        background: s.background, color: s.color, border: s.border,
+      }}
+      onMouseEnter={e => e.currentTarget.style.background = s.hoverBg}
+      onMouseLeave={e => e.currentTarget.style.background = s.background}
+    >
+      {icon}{label}
+    </button>
+  )
+}
+
+interface ParticipantsBoxProps {
+  tripMembers: TripMember[]
+  participantIds: number[]
+  allJoined: boolean
+  onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
+  selectedAssignmentId: number | null
+  selectedDayId: number | null
+  t: (key: string) => string
+}
+
+function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticipants, selectedAssignmentId, selectedDayId, t }: ParticipantsBoxProps) {
+  const [showAdd, setShowAdd] = React.useState(false)
+  const [hoveredId, setHoveredId] = React.useState(null)
+
+  // Active participants: if allJoined, show all members; otherwise show only those in participantIds
+  const activeMembers = allJoined ? tripMembers : tripMembers.filter(m => participantIds.includes(m.id))
+  const availableToAdd = allJoined ? [] : tripMembers.filter(m => !participantIds.includes(m.id))
+
+  const handleRemove = (userId) => {
+    if (!onSetParticipants) return
+    let newIds
+    if (allJoined) {
+      newIds = tripMembers.filter(m => m.id !== userId).map(m => m.id)
+    } else {
+      newIds = participantIds.filter(id => id !== userId)
+    }
+    if (newIds.length === tripMembers.length) newIds = []
+    onSetParticipants(selectedAssignmentId, selectedDayId, newIds)
+  }
+
+  const handleAdd = (userId) => {
+    if (!onSetParticipants) return
+    const newIds = [...participantIds, userId]
+    if (newIds.length === tripMembers.length) {
+      onSetParticipants(selectedAssignmentId, selectedDayId, [])
+    } else {
+      onSetParticipants(selectedAssignmentId, selectedDayId, newIds)
+    }
+    setShowAdd(false)
+  }
+
+  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 }}>
+        <Users size={10} /> {t('inspector.participants')}
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center' }}>
+        {activeMembers.map(member => {
+          const isHovered = hoveredId === member.id
+          const canRemove = activeMembers.length > 1
+          return (
+            <div key={member.id}
+              onMouseEnter={() => setHoveredId(member.id)}
+              onMouseLeave={() => setHoveredId(null)}
+              onClick={() => { if (canRemove) handleRemove(member.id) }}
+              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)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700,
+                color: 'var(--text-muted)', 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>
+              <span style={{ textDecoration: isHovered && canRemove ? 'line-through' : 'none' }}>{member.username}</span>
+            </div>
+          )
+        })}
+
+        {/* Add button */}
+        {availableToAdd.length > 0 && (
+          <div style={{ position: 'relative' }}>
+            <button onClick={() => setShowAdd(!showAdd)} 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',
+            }}
+              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={{
+                position: 'absolute', top: 26, left: 0, zIndex: 100,
+                background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 140,
+              }}>
+                {availableToAdd.map(member => (
+                  <button key={member.id} onClick={() => handleAdd(member.id)} 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',
+                    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)',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700,
+                      color: 'var(--text-muted)', 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>
+                    {member.username}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Planner/PlacesSidebar.tsx

@@ -0,0 +1,270 @@
+import ReactDOM from 'react-dom'
+import { useState } from 'react'
+import DOM from 'react-dom'
+import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation } from 'lucide-react'
+import PlaceAvatar from '../shared/PlaceAvatar'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { useTranslation } from '../../i18n'
+import CustomSelect from '../shared/CustomSelect'
+import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
+import type { Place, Category, Day, AssignmentsMap } from '../../types'
+
+interface PlacesSidebarProps {
+  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
+  days: Day[]
+  isMobile: boolean
+}
+
+export default function PlacesSidebar({
+  places, categories, assignments, selectedDayId, selectedPlaceId,
+  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, days, isMobile,
+}: PlacesSidebarProps) {
+  const { t } = useTranslation()
+  const ctxMenu = useContextMenu()
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState('all')
+  const [categoryFilter, setCategoryFilter] = useState('')
+  const [dayPickerPlace, setDayPickerPlace] = useState(null)
+
+  // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
+  const plannedIds = new Set(
+    Object.values(assignments).flatMap(da => da.map(a => a.place?.id).filter(Boolean))
+  )
+
+  const filtered = places.filter(p => {
+    if (filter === 'unplanned' && plannedIds.has(p.id)) return false
+    if (categoryFilter && String(p.category_id) !== String(categoryFilter)) return false
+    if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
+        !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
+    return true
+  })
+
+  const isAssignedToSelectedDay = (placeId) =>
+    selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+      {/* Kopfbereich */}
+      <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
+        <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>
+
+        {/* Filter-Tabs */}
+        <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
+          {[{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }].map(f => (
+            <button key={f.id} onClick={() => setFilter(f.id)} style={{
+              padding: '4px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
+              fontSize: 11, fontWeight: 500, fontFamily: 'inherit',
+              background: filter === f.id ? 'var(--accent)' : 'var(--bg-tertiary)',
+              color: filter === f.id ? 'var(--accent-text)' : 'var(--text-muted)',
+            }}>{f.label}</button>
+          ))}
+        </div>
+
+        {/* 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)}
+            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>
+
+        {/* Kategoriefilter */}
+        {categories.length > 0 && (
+          <div style={{ marginTop: 6 }}>
+            <CustomSelect
+              value={categoryFilter}
+              onChange={setCategoryFilter}
+              placeholder={t('places.allCategories')}
+              size="sm"
+              options={[
+                { value: '', label: t('places.allCategories') },
+                ...categories.map(c => ({ value: String(c.id), label: c.name }))
+              ]}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Anzahl */}
+      <div style={{ padding: '6px 16px', flexShrink: 0 }}>
+        <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
+      </div>
+
+      {/* Liste */}
+      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+        {filtered.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
+            <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
+              {filter === 'unplanned' ? t('places.allPlanned') : t('places.noneFound')}
+            </span>
+            <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 inDay = isAssignedToSelectedDay(place.id)
+            const isPlanned = plannedIds.has(place.id)
+
+            return (
+              <div
+                key={place.id}
+                draggable
+                onDragStart={e => {
+                  e.dataTransfer.setData('placeId', String(place.id))
+                  e.dataTransfer.effectAllowed = 'copy'
+                  // Backup in window für Cross-Component Drag (dataTransfer geht bei Re-Render verloren)
+                  window.__dragData = { placeId: String(place.id) }
+                }}
+                onClick={() => {
+                  if (isMobile && days?.length > 0) {
+                    setDayPickerPlace(place)
+                  } else {
+                    onPlaceClick(isSelected ? null : place.id)
+                  }
+                }}
+                onContextMenu={e => ctxMenu.open(e, [
+                  onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
+                  selectedDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selectedDayId) },
+                  place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
+                  (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`, '_blank') },
+                  { divider: true },
+                  onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+                ])}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 10,
+                  padding: '9px 14px 9px 16px',
+                  cursor: 'grab',
+                  background: isSelected ? 'var(--border-faint)' : 'transparent',
+                  borderBottom: '1px solid var(--border-faint)',
+                  transition: 'background 0.1s',
+                }}
+                onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}
+              >
+                <PlaceAvatar place={place} category={cat} size={34} />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
+                    {cat && (() => {
+                      const CatIcon = getCategoryIcon(cat.icon)
+                      return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
+                    })()}
+                    <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+                      {place.name}
+                    </span>
+                  </div>
+                  {(place.description || place.address || cat?.name) && (
+                    <div style={{ marginTop: 2 }}>
+                      <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
+                        {place.description || place.address || cat?.name}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+                  {!inDay && selectedDayId && (
+                    <button
+                      onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
+                      style={{
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        width: 20, height: 20, borderRadius: 6,
+                        background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
+                        color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
+                      }}
+                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
+                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
+                    ><Plus size={12} strokeWidth={2.5} /></button>
+                  )}
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      {dayPickerPlace && days?.length > 0 && ReactDOM.createPortal(
+        <div
+          onClick={() => setDayPickerPlace(null)}
+          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: '60vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'env(safe-area-inset-bottom)' }}
+          >
+            <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>
+              <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2 }}>{t('places.assignToDay')}</div>
+            </div>
+            <div style={{ flex: 1, overflowY: 'auto', padding: '8px 12px 16px' }}>
+              {days.map((day, i) => {
+                return (
+                  <button
+                    key={day.id}
+                    onClick={() => { onAssignToDay(dayPickerPlace.id, day.id); setDayPickerPlace(null) }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 10, width: '100%',
+                      padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer',
+                      background: 'transparent', fontFamily: 'inherit', textAlign: 'left',
+                      transition: 'background 0.1s',
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  >
+                    <div style={{
+                      width: 32, height: 32, borderRadius: '50%', background: 'var(--bg-tertiary)',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', flexShrink: 0,
+                    }}>{i + 1}</div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 13, fontWeight: 600, 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:00').toLocaleDateString()}</div>}
+                    </div>
+                    {(assignments[String(day.id)] || []).some(a => a.place?.id === dayPickerPlace.id) && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>✓</span>}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+      <ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
+    </div>
+  )
+}

client/src/components/Planner/ReservationModal.tsx

@@ -0,0 +1,509 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import Modal from '../shared/Modal'
+import CustomSelect from '../shared/CustomSelect'
+import { Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
+
+const TYPE_OPTIONS = [
+  { value: 'flight',     labelKey: 'reservations.type.flight',     Icon: Plane },
+  { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
+  { value: 'restaurant', labelKey: 'reservations.type.restaurant', Icon: Utensils },
+  { value: 'train',      labelKey: 'reservations.type.train',      Icon: Train },
+  { value: 'car',        labelKey: 'reservations.type.car',        Icon: Car },
+  { value: 'cruise',     labelKey: 'reservations.type.cruise',     Icon: Ship },
+  { value: 'event',      labelKey: 'reservations.type.event',      Icon: Ticket },
+  { value: 'tour',       labelKey: 'reservations.type.tour',       Icon: Users },
+  { value: 'other',      labelKey: 'reservations.type.other',      Icon: FileText },
+]
+
+function buildAssignmentOptions(days, assignments, t, locale) {
+  const options = []
+  for (const day of (days || [])) {
+    const da = (assignments?.[String(day.id)] || []).slice().sort((a, b) => a.order_index - b.order_index)
+    if (da.length === 0) continue
+    const dayLabel = day.title || t('dayplan.dayN', { n: day.day_number })
+    const dateStr = day.date ? ` · ${formatDate(day.date, locale)}` : ''
+    const groupLabel = `${dayLabel}${dateStr}`
+    // Group header (non-selectable)
+    options.push({ value: `_header_${day.id}`, label: groupLabel, disabled: true, isHeader: true })
+    for (let i = 0; i < da.length; i++) {
+      const place = da[i].place
+      if (!place) continue
+      const timeStr = place.place_time ? ` · ${place.place_time}${place.end_time ? ' – ' + place.end_time : ''}` : ''
+      options.push({
+        value: da[i].id,
+        label: `  ${i + 1}. ${place.name}${timeStr}`,
+        searchLabel: place.name,
+        groupLabel,
+        dayDate: day.date || null,
+      })
+    }
+  }
+  return options
+}
+
+interface ReservationModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: Record<string, string | number | null>) => Promise<void> | void
+  reservation: Reservation | null
+  days: Day[]
+  places: Place[]
+  assignments: AssignmentsMap
+  selectedDayId: number | null
+  files?: TripFile[]
+  onFileUpload: (fd: FormData) => Promise<void>
+  onFileDelete: (fileId: number) => Promise<void>
+  accommodations?: Accommodation[]
+}
+
+export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [] }: ReservationModalProps) {
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const fileInputRef = useRef(null)
+
+  const [form, setForm] = useState({
+    title: '', type: 'other', status: 'pending',
+    reservation_time: '', reservation_end_time: '', location: '', confirmation_number: '',
+    notes: '', assignment_id: '', accommodation_id: '',
+    meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
+    meta_train_number: '', meta_platform: '', meta_seat: '',
+    meta_check_in_time: '', meta_check_out_time: '',
+    hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
+  })
+  const [isSaving, setIsSaving] = useState(false)
+  const [uploadingFile, setUploadingFile] = useState(false)
+  const [pendingFiles, setPendingFiles] = useState([])
+
+  const assignmentOptions = useMemo(
+    () => buildAssignmentOptions(days, assignments, t, locale),
+    [days, assignments, t, locale]
+  )
+
+  useEffect(() => {
+    if (reservation) {
+      const meta = typeof reservation.metadata === 'string' ? JSON.parse(reservation.metadata || '{}') : (reservation.metadata || {})
+      setForm({
+        title: reservation.title || '',
+        type: reservation.type || 'other',
+        status: reservation.status || 'pending',
+        reservation_time: reservation.reservation_time ? reservation.reservation_time.slice(0, 16) : '',
+        reservation_end_time: reservation.reservation_end_time || '',
+        location: reservation.location || '',
+        confirmation_number: reservation.confirmation_number || '',
+        notes: reservation.notes || '',
+        assignment_id: reservation.assignment_id || '',
+        accommodation_id: reservation.accommodation_id || '',
+        meta_airline: meta.airline || '',
+        meta_flight_number: meta.flight_number || '',
+        meta_departure_airport: meta.departure_airport || '',
+        meta_arrival_airport: meta.arrival_airport || '',
+        meta_train_number: meta.train_number || '',
+        meta_platform: meta.platform || '',
+        meta_seat: meta.seat || '',
+        meta_check_in_time: meta.check_in_time || '',
+        meta_check_out_time: meta.check_out_time || '',
+        hotel_place_id: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.place_id || '' })(),
+        hotel_start_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.start_day_id || '' })(),
+        hotel_end_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.end_day_id || '' })(),
+      })
+    } else {
+      setForm({
+        title: '', type: 'other', status: 'pending',
+        reservation_time: '', reservation_end_time: '', location: '', confirmation_number: '',
+        notes: '', assignment_id: '', accommodation_id: '',
+        meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
+        meta_train_number: '', meta_platform: '', meta_seat: '',
+        meta_check_in_time: '', meta_check_out_time: '',
+      })
+      setPendingFiles([])
+    }
+  }, [reservation, isOpen, selectedDayId])
+
+  const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }))
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!form.title.trim()) return
+    setIsSaving(true)
+    try {
+      const metadata: Record<string, string> = {}
+      if (form.type === 'flight') {
+        if (form.meta_airline) metadata.airline = form.meta_airline
+        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
+        if (form.meta_departure_airport) metadata.departure_airport = form.meta_departure_airport
+        if (form.meta_arrival_airport) metadata.arrival_airport = form.meta_arrival_airport
+      } else if (form.type === 'hotel') {
+        if (form.meta_check_in_time) metadata.check_in_time = form.meta_check_in_time
+        if (form.meta_check_out_time) metadata.check_out_time = form.meta_check_out_time
+      } else if (form.type === 'train') {
+        if (form.meta_train_number) metadata.train_number = form.meta_train_number
+        if (form.meta_platform) metadata.platform = form.meta_platform
+        if (form.meta_seat) metadata.seat = form.meta_seat
+      }
+      const saveData: Record<string, any> = {
+        title: form.title, type: form.type, status: form.status,
+        reservation_time: form.reservation_time, reservation_end_time: form.reservation_end_time,
+        location: form.location, confirmation_number: form.confirmation_number,
+        notes: form.notes,
+        assignment_id: form.assignment_id || null,
+        accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
+        metadata: Object.keys(metadata).length > 0 ? metadata : null,
+      }
+      // If hotel with place + days, pass hotel data for auto-creation or update
+      if (form.type === 'hotel' && form.hotel_place_id && form.hotel_start_day && form.hotel_end_day) {
+        saveData.create_accommodation = {
+          place_id: form.hotel_place_id,
+          start_day_id: form.hotel_start_day,
+          end_day_id: form.hotel_end_day,
+          check_in: form.meta_check_in_time || null,
+          check_out: form.meta_check_out_time || null,
+          confirmation: form.confirmation_number || null,
+        }
+      }
+      const saved = await onSave(saveData)
+      if (!reservation?.id && saved?.id && pendingFiles.length > 0) {
+        for (const file of pendingFiles) {
+          const fd = new FormData()
+          fd.append('file', file)
+          fd.append('reservation_id', saved.id)
+          fd.append('description', form.title)
+          await onFileUpload(fd)
+        }
+      }
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleFileChange = async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0]
+    if (!file) return
+    if (reservation?.id) {
+      setUploadingFile(true)
+      try {
+        const fd = new FormData()
+        fd.append('file', file)
+        fd.append('reservation_id', reservation.id)
+        fd.append('description', reservation.title)
+        await onFileUpload(fd)
+        toast.success(t('reservations.toast.fileUploaded'))
+      } catch {
+        toast.error(t('reservations.toast.uploadError'))
+      } finally {
+        setUploadingFile(false)
+        e.target.value = ''
+      }
+    } else {
+      setPendingFiles(prev => [...prev, file])
+      e.target.value = ''
+    }
+  }
+
+  const attachedFiles = reservation?.id ? files.filter(f => f.reservation_id === reservation.id) : []
+
+  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' }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')} size="2xl">
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+
+        {/* Type selector */}
+        <div>
+          <label style={labelStyle}>{t('reservations.bookingType')}</label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+            {TYPE_OPTIONS.map(({ value, labelKey, Icon }) => (
+              <button key={value} type="button" onClick={() => set('type', value)} style={{
+                display: 'flex', alignItems: 'center', gap: 4,
+                padding: '5px 10px', borderRadius: 99, border: '1px solid',
+                fontSize: 11, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.12s',
+                background: form.type === value ? 'var(--text-primary)' : 'var(--bg-card)',
+                borderColor: form.type === value ? 'var(--text-primary)' : 'var(--border-primary)',
+                color: form.type === value ? 'var(--bg-primary)' : 'var(--text-muted)',
+              }}>
+                <Icon size={11} /> {t(labelKey)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Title */}
+        <div>
+          <label style={labelStyle}>{t('reservations.titleLabel')} *</label>
+          <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
+            placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
+        </div>
+
+        {/* Assignment Picker + Date (hidden for hotels) */}
+        {form.type !== 'hotel' && (
+        <div style={{ display: 'flex', gap: 8 }}>
+          {assignmentOptions.length > 0 && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>
+                <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
+                {t('reservations.linkAssignment')}
+              </label>
+              <CustomSelect
+                value={form.assignment_id}
+                onChange={value => {
+                  set('assignment_id', value)
+                  const opt = assignmentOptions.find(o => o.value === value)
+                  if (opt?.dayDate) {
+                    setForm(prev => {
+                      if (prev.reservation_time) return prev
+                      return { ...prev, reservation_time: opt.dayDate }
+                    })
+                  }
+                }}
+                placeholder={t('reservations.pickAssignment')}
+                options={[
+                  { value: '', label: t('reservations.noAssignment') },
+                  ...assignmentOptions,
+                ]}
+                searchable
+                size="sm"
+              />
+            </div>
+          )}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>{t('reservations.date')}</label>
+            <CustomDatePicker
+              value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
+              onChange={d => {
+                const [, t] = (form.reservation_time || '').split('T')
+                set('reservation_time', d ? (t ? `${d}T${t}` : d) : '')
+              }}
+            />
+          </div>
+        </div>
+        )}
+
+        {/* Start Time + End Time + Status */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          {form.type !== 'hotel' && (
+            <>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.startTime')}</label>
+                <CustomTimePicker
+                  value={(() => { const [, t] = (form.reservation_time || '').split('T'); return t || '' })()}
+                  onChange={t => {
+                    const [d] = (form.reservation_time || '').split('T')
+                    const date = d || new Date().toISOString().split('T')[0]
+                    set('reservation_time', t ? `${date}T${t}` : date)
+                  }}
+                />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.endTime')}</label>
+                <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
+              </div>
+            </>
+          )}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>{t('reservations.status')}</label>
+            <CustomSelect
+              value={form.status}
+              onChange={value => set('status', value)}
+              options={[
+                { value: 'pending', label: t('reservations.pending') },
+                { value: 'confirmed', label: t('reservations.confirmed') },
+              ]}
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Location + Booking Code */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label style={labelStyle}>{t('reservations.locationAddress')}</label>
+            <input type="text" value={form.location} onChange={e => set('location', e.target.value)}
+              placeholder={t('reservations.locationPlaceholder')} style={inputStyle} />
+          </div>
+          <div>
+            <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
+            <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+              placeholder={t('reservations.confirmationPlaceholder')} style={inputStyle} />
+          </div>
+        </div>
+
+        {/* Type-specific fields */}
+        {form.type === 'flight' && (
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.airline') || 'Airline'}</label>
+              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
+                placeholder="Lufthansa" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.flightNumber') || 'Flight No.'}</label>
+              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
+                placeholder="LH 123" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.from') || 'From'}</label>
+              <input type="text" value={form.meta_departure_airport} onChange={e => set('meta_departure_airport', e.target.value)}
+                placeholder="FRA" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.to') || 'To'}</label>
+              <input type="text" value={form.meta_arrival_airport} onChange={e => set('meta_arrival_airport', e.target.value)}
+                placeholder="NRT" style={inputStyle} />
+            </div>
+          </div>
+        )}
+
+        {form.type === 'hotel' && (
+          <>
+            {/* Hotel place + day range */}
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              <div>
+                <label style={labelStyle}>{t('reservations.meta.hotelPlace')}</label>
+                <CustomSelect
+                  value={form.hotel_place_id}
+                  onChange={value => {
+                    set('hotel_place_id', value)
+                    const p = places.find(pl => pl.id === value)
+                    if (p) {
+                      if (!form.title) set('title', p.name)
+                      if (!form.location && p.address) set('location', p.address)
+                    }
+                  }}
+                  placeholder={t('reservations.meta.pickHotel')}
+                  options={[
+                    { value: '', label: '—' },
+                    ...places.map(p => ({ value: p.id, label: p.name })),
+                  ]}
+                  searchable
+                  size="sm"
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>{t('reservations.meta.fromDay')}</label>
+                <CustomSelect
+                  value={form.hotel_start_day}
+                  onChange={value => set('hotel_start_day', value)}
+                  placeholder={t('reservations.meta.selectDay')}
+                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
+                  size="sm"
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>{t('reservations.meta.toDay')}</label>
+                <CustomSelect
+                  value={form.hotel_end_day}
+                  onChange={value => set('hotel_end_day', value)}
+                  placeholder={t('reservations.meta.selectDay')}
+                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
+                  size="sm"
+                />
+              </div>
+            </div>
+            {/* Check-in/out times */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label style={labelStyle}>{t('reservations.meta.checkIn')}</label>
+                <CustomTimePicker value={form.meta_check_in_time} onChange={v => set('meta_check_in_time', v)} />
+              </div>
+              <div>
+                <label style={labelStyle}>{t('reservations.meta.checkOut')}</label>
+                <CustomTimePicker value={form.meta_check_out_time} onChange={v => set('meta_check_out_time', v)} />
+              </div>
+            </div>
+          </>
+        )}
+
+        {form.type === 'train' && (
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.trainNumber') || 'Train No.'}</label>
+              <input type="text" value={form.meta_train_number} onChange={e => set('meta_train_number', e.target.value)}
+                placeholder="ICE 123" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.platform') || 'Platform'}</label>
+              <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
+                placeholder="12" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.seat') || 'Seat'}</label>
+              <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
+                placeholder="42A" style={inputStyle} />
+            </div>
+          </div>
+        )}
+
+        {/* Notes */}
+        <div>
+          <label style={labelStyle}>{t('reservations.notes')}</label>
+          <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
+            placeholder={t('reservations.notesPlaceholder')}
+            style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
+        </div>
+
+        {/* Files */}
+        <div>
+          <label style={labelStyle}>{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={f.url} target="_blank" rel="noreferrer" style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}><ExternalLink size={11} /></a>
+                {onFileDelete && (
+                  <button type="button" onClick={() => onFileDelete(f.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', 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>
+                <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 }}>
+                  <X size={11} />
+                </button>
+              </div>
+            ))}
+            <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
+            <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} 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',
+            }}>
+              <Paperclip size={11} />
+              {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
+            </button>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="submit" disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  )
+}
+
+function formatDate(dateStr, locale) {
+  if (!dateStr) return ''
+  const d = new Date(dateStr + 'T00:00:00')
+  return d.toLocaleDateString(locale || 'de-DE', { day: 'numeric', month: 'short' })
+}

client/src/components/Planner/ReservationsPanel.tsx

@@ -0,0 +1,333 @@
+import { useState, useMemo } from 'react'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import {
+  Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
+  Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock,
+} from 'lucide-react'
+import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
+
+interface AssignmentLookupEntry {
+  dayNumber: number
+  dayTitle: string | null
+  dayDate: string
+  placeName: string
+  startTime: string | null
+  endTime: string | null
+}
+
+const TYPE_OPTIONS = [
+  { value: 'flight',      labelKey: 'reservations.type.flight',      Icon: Plane, color: '#3b82f6' },
+  { value: 'hotel',       labelKey: 'reservations.type.hotel',       Icon: Hotel, color: '#8b5cf6' },
+  { value: 'restaurant',  labelKey: 'reservations.type.restaurant',  Icon: Utensils, color: '#ef4444' },
+  { value: 'train',       labelKey: 'reservations.type.train',       Icon: Train, color: '#06b6d4' },
+  { value: 'car',         labelKey: 'reservations.type.car',         Icon: Car, color: '#6b7280' },
+  { value: 'cruise',      labelKey: 'reservations.type.cruise',      Icon: Ship, color: '#0ea5e9' },
+  { value: 'event',       labelKey: 'reservations.type.event',       Icon: Ticket, color: '#f59e0b' },
+  { value: 'tour',        labelKey: 'reservations.type.tour',        Icon: Users, color: '#10b981' },
+  { value: 'other',       labelKey: 'reservations.type.other',       Icon: FileText, color: '#6b7280' },
+]
+
+function getType(type) {
+  return TYPE_OPTIONS.find(t => t.value === type) || TYPE_OPTIONS[TYPE_OPTIONS.length - 1]
+}
+
+function buildAssignmentLookup(days, assignments) {
+  const map = {}
+  for (const day of (days || [])) {
+    const da = (assignments?.[String(day.id)] || []).slice().sort((a, b) => a.order_index - b.order_index)
+    for (const a of da) {
+      if (!a.place) continue
+      map[a.id] = { dayNumber: day.day_number, dayTitle: day.title, dayDate: day.date, placeName: a.place.name, startTime: a.place.place_time, endTime: a.place.end_time }
+    }
+  }
+  return map
+}
+
+interface ReservationCardProps {
+  r: Reservation
+  tripId: number
+  onEdit: (reservation: Reservation) => void
+  onDelete: (id: number) => void
+  files?: TripFile[]
+  onNavigateToFiles: () => void
+  assignmentLookup: Record<number, AssignmentLookupEntry>
+}
+
+function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup }: ReservationCardProps) {
+  const { toggleReservationStatus } = useTripStore()
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+  const typeInfo = getType(r.type)
+  const TypeIcon = typeInfo.Icon
+  const confirmed = r.status === 'confirmed'
+  const attachedFiles = files.filter(f => f.reservation_id === r.id)
+  const linked = r.assignment_id ? assignmentLookup[r.assignment_id] : null
+
+  const handleToggle = async () => {
+    try { await toggleReservationStatus(tripId, r.id) }
+    catch { toast.error(t('reservations.toast.updateError')) }
+  }
+  const handleDelete = async () => {
+    if (!confirm(t('reservations.confirm.delete', { name: r.title }))) return
+    try { await onDelete(r.id) } catch { toast.error(t('reservations.toast.deleteError')) }
+  }
+
+  const fmtDate = (str) => {
+    const d = new Date(str)
+    return d.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
+  }
+  const fmtTime = (str) => {
+    const d = new Date(str)
+    return d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })
+  }
+
+  return (
+    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
+      {/* Header bar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)' }}>
+        <div style={{ width: 7, height: 7, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
+        <button onClick={handleToggle} style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706', background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}>
+          {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
+        </button>
+        <div style={{ width: 1, height: 10, background: 'var(--border-faint)' }} />
+        <TypeIcon size={11} style={{ color: typeInfo.color, flexShrink: 0 }} />
+        <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>{t(typeInfo.labelKey)}</span>
+        <span style={{ flex: 1 }} />
+        <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
+        <button onClick={() => onEdit(r)} title={t('common.edit')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
+          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+          <Pencil size={11} />
+        </button>
+        <button onClick={handleDelete} title={t('common.delete')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
+          onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
+          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+          <Trash2 size={11} />
+        </button>
+      </div>
+
+      {/* Details */}
+      {(r.reservation_time || r.confirmation_number || r.location || linked || r.metadata) && (
+        <div style={{ padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {/* Row 1: Date, Time, Code */}
+          {(r.reservation_time || r.confirmation_number) && (
+            <div style={{ display: 'flex', gap: 0, borderRadius: 8, overflow: 'hidden', background: 'var(--bg-secondary)', boxShadow: '0 1px 6px rgba(0,0,0,0.08)' }}>
+              {r.reservation_time && (
+                <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: '1px solid var(--border-faint)' }}>
+                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.date')}</div>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>{fmtDate(r.reservation_time)}</div>
+                </div>
+              )}
+              {r.reservation_time?.includes('T') && (
+                <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: '1px solid var(--border-faint)' }}>
+                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.time')}</div>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>
+                    {fmtTime(r.reservation_time)}{r.reservation_end_time ? ` – ${r.reservation_end_time}` : ''}
+                  </div>
+                </div>
+              )}
+              {r.confirmation_number && (
+                <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center' }}>
+                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.confirmationCode')}</div>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>{r.confirmation_number}</div>
+                </div>
+              )}
+            </div>
+          )}
+          {/* Row 1b: Type-specific metadata */}
+          {(() => {
+            const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
+            if (!meta || Object.keys(meta).length === 0) return null
+            const cells: { label: string; value: string }[] = []
+            if (meta.airline) cells.push({ label: t('reservations.meta.airline'), value: meta.airline })
+            if (meta.flight_number) cells.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
+            if (meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
+            if (meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
+            if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
+            if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
+            if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
+            if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: meta.check_in_time })
+            if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: meta.check_out_time })
+            if (cells.length === 0) return null
+            return (
+              <div style={{ display: 'flex', gap: 0, borderRadius: 8, overflow: 'hidden', background: 'var(--bg-secondary)', boxShadow: '0 1px 6px rgba(0,0,0,0.08)' }}>
+                {cells.map((c, i) => (
+                  <div key={i} style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: i < cells.length - 1 ? '1px solid var(--border-faint)' : 'none' }}>
+                    <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{c.label}</div>
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>{c.value}</div>
+                  </div>
+                ))}
+              </div>
+            )
+          })()}
+          {/* Row 2: Location + Assignment */}
+          {(r.location || linked || r.accommodation_name) && (
+            <div className={`grid grid-cols-1 ${r.location && linked ? 'sm:grid-cols-2' : ''} gap-2`} style={{ paddingTop: 6, borderTop: '1px solid var(--border-faint)' }}>
+              {r.location && (
+                <div>
+                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.locationAddress')}</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
+                    <MapPin size={10} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.location}</span>
+                  </div>
+                </div>
+              )}
+              {r.accommodation_name && (
+                <div>
+                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.meta.linkAccommodation')}</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
+                    <Hotel size={10} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.accommodation_name}</span>
+                  </div>
+                </div>
+              )}
+              {linked && (
+                <div>
+                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.linkAssignment')}</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
+                    <Link2 size={10} style={{ color: 'var(--text-faint)', 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 : ''}` : ''}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Notes */}
+      {r.notes && (
+        <div style={{ padding: '0 12px 8px' }}>
+          <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.notes')}</div>
+          <div style={{ padding: '5px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>
+            {r.notes}
+          </div>
+        </div>
+      )}
+
+      {/* Files */}
+      {attachedFiles.length > 0 && (
+        <div style={{ padding: '0 12px 8px' }}>
+          <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('files.title')}</div>
+          <div style={{ padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', display: 'flex', flexDirection: 'column', gap: 3 }}>
+            {attachedFiles.map(f => (
+              <a key={f.id} href={f.url} target="_blank" rel="noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 4, textDecoration: 'none', cursor: 'pointer' }}>
+                <FileText size={9} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                <span style={{ fontSize: 10, color: 'var(--text-muted)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface SectionProps {
+  title: string
+  count: number
+  children: React.ReactNode
+  defaultOpen?: boolean
+  accent: 'green' | string
+}
+
+function Section({ title, count, children, defaultOpen = true, accent }: SectionProps) {
+  const [open, setOpen] = useState(defaultOpen)
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <button onClick={() => setOpen(o => !o)} style={{
+        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+        background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0', marginBottom: 8, fontFamily: 'inherit',
+      }}>
+        {open ? <ChevronDown size={14} style={{ color: 'var(--text-faint)' }} /> : <ChevronRight size={14} style={{ color: 'var(--text-faint)' }} />}
+        <span style={{ fontWeight: 700, fontSize: 12, color: 'var(--text-primary)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{title}</span>
+        <span style={{
+          fontSize: 10, fontWeight: 700, padding: '1px 7px', borderRadius: 99,
+          background: accent === 'green' ? 'rgba(22,163,74,0.1)' : 'var(--bg-tertiary)',
+          color: accent === 'green' ? '#16a34a' : 'var(--text-faint)',
+        }}>{count}</span>
+      </button>
+      {open && <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{children}</div>}
+    </div>
+  )
+}
+
+interface ReservationsPanelProps {
+  tripId: number
+  reservations: Reservation[]
+  days: Day[]
+  assignments: AssignmentsMap
+  files?: TripFile[]
+  onAdd: () => void
+  onEdit: (reservation: Reservation) => void
+  onDelete: (id: number) => void
+  onNavigateToFiles: () => void
+}
+
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles }: ReservationsPanelProps) {
+  const { t, locale } = useTranslation()
+  const [showHint, setShowHint] = useState(() => !localStorage.getItem('hideReservationHint'))
+
+  const assignmentLookup = useMemo(() => buildAssignmentLookup(days, assignments), [days, assignments])
+
+  const allPending = reservations.filter(r => r.status !== 'confirmed')
+  const allConfirmed = reservations.filter(r => r.status === 'confirmed')
+  const total = reservations.length
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+      {/* Header */}
+      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid var(--border-faint)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('reservations.title')}</h2>
+          <p style={{ margin: '2px 0 0', fontSize: 12, color: 'var(--text-faint)' }}>
+            {total === 0 ? t('reservations.empty') : t('reservations.summary', { confirmed: allConfirmed.length, pending: allPending.length })}
+          </p>
+        </div>
+        <button onClick={onAdd} style={{
+          display: 'flex', alignItems: 'center', gap: 5, padding: '7px 14px', borderRadius: 99,
+          border: 'none', background: 'var(--accent)', color: 'var(--accent-text)',
+          fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+        }}>
+          <Plus size={13} /> <span className="hidden sm:inline">{t('reservations.addManual')}</span>
+        </button>
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 24px' }}>
+        {total === 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>
+          </div>
+        ) : (
+          <>
+            {allPending.length > 0 && (
+              <Section title={t('reservations.pending')} count={allPending.length} accent="gray">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                  {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} />)}
+                </div>
+              </Section>
+            )}
+            {allConfirmed.length > 0 && (
+              <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                  {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} />)}
+                </div>
+              </Section>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Trips/TripFormModal.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect, useRef } from 'react'
+import Modal from '../shared/Modal'
+import { Calendar, Camera, X, Clipboard } from 'lucide-react'
+import { tripsApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import type { Trip } from '../../types'
+
+interface TripFormModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: Record<string, string | number | null>) => Promise<void> | void
+  trip: Trip | null
+  onCoverUpdate: (tripId: number, coverUrl: string) => void
+}
+
+export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUpdate }: TripFormModalProps) {
+  const isEditing = !!trip
+  const fileRef = useRef(null)
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    start_date: '',
+    end_date: '',
+  })
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [coverPreview, setCoverPreview] = useState(null)
+  const [pendingCoverFile, setPendingCoverFile] = useState(null)
+  const [uploadingCover, setUploadingCover] = useState(false)
+
+  useEffect(() => {
+    if (trip) {
+      setFormData({
+        title: trip.title || '',
+        description: trip.description || '',
+        start_date: trip.start_date || '',
+        end_date: trip.end_date || '',
+      })
+      setCoverPreview(trip.cover_image || null)
+    } else {
+      setFormData({ title: '', description: '', start_date: '', end_date: '' })
+      setCoverPreview(null)
+    }
+    setPendingCoverFile(null)
+    setError('')
+  }, [trip, isOpen])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    if (!formData.title.trim()) { setError(t('dashboard.titleRequired')); return }
+    if (formData.start_date && formData.end_date && new Date(formData.end_date) < new Date(formData.start_date)) {
+      setError(t('dashboard.endDateError')); return
+    }
+    setIsLoading(true)
+    try {
+      const result = await onSave({
+        title: formData.title.trim(),
+        description: formData.description.trim() || null,
+        start_date: formData.start_date || null,
+        end_date: formData.end_date || null,
+      })
+      // Upload pending cover for newly created trips
+      if (pendingCoverFile && result?.trip?.id) {
+        try {
+          const fd = new FormData()
+          fd.append('cover', pendingCoverFile)
+          const data = await tripsApi.uploadCover(result.trip.id, fd)
+          onCoverUpdate?.(result.trip.id, data.cover_image)
+        } catch {
+          // Cover upload failed but trip was created
+        }
+      }
+      onClose()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('places.saveError'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCoverSelect = (file) => {
+    if (!file) return
+    if (isEditing && trip?.id) {
+      // Existing trip: upload immediately
+      uploadCoverNow(file)
+    } else {
+      // New trip: stage for upload after creation
+      setPendingCoverFile(file)
+      setCoverPreview(URL.createObjectURL(file))
+    }
+  }
+
+  const handleCoverChange = (e) => {
+    handleCoverSelect((e.target as HTMLInputElement).files?.[0])
+    e.target.value = ''
+  }
+
+  const uploadCoverNow = async (file) => {
+    setUploadingCover(true)
+    try {
+      const fd = new FormData()
+      fd.append('cover', file)
+      const data = await tripsApi.uploadCover(trip.id, fd)
+      setCoverPreview(data.cover_image)
+      onCoverUpdate?.(trip.id, data.cover_image)
+      toast.success(t('dashboard.coverSaved'))
+    } catch {
+      toast.error(t('dashboard.coverUploadError'))
+    } finally {
+      setUploadingCover(false)
+    }
+  }
+
+  const handleRemoveCover = async () => {
+    if (pendingCoverFile) {
+      setPendingCoverFile(null)
+      setCoverPreview(null)
+      return
+    }
+    if (!trip?.id) return
+    try {
+      await tripsApi.update(trip.id, { cover_image: null })
+      setCoverPreview(null)
+      onCoverUpdate?.(trip.id, null)
+    } catch {
+      toast.error(t('dashboard.coverRemoveError'))
+    }
+  }
+
+  // Paste support for cover image
+  const handlePaste = (e) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault()
+        const file = item.getAsFile()
+        if (file) handleCoverSelect(file)
+        return
+      }
+    }
+  }
+
+  const update = (field, value) => setFormData(prev => {
+    const next = { ...prev, [field]: value }
+    if (field === 'start_date' && value) {
+      if (!prev.end_date || prev.end_date < value) {
+        next.end_date = value
+      } else if (prev.start_date) {
+        const oldStart = new Date(prev.start_date + 'T00:00:00')
+        const oldEnd = new Date(prev.end_date + 'T00:00:00')
+        const duration = Math.round((oldEnd - oldStart) / 86400000)
+        const newEnd = new Date(value + 'T00:00:00')
+        newEnd.setDate(newEnd.getDate() + duration)
+        next.end_date = newEnd.toISOString().split('T')[0]
+      }
+    }
+    return next
+  })
+
+  const inputCls = "w-full px-3 py-2.5 border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:border-transparent text-sm"
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEditing ? t('dashboard.editTrip') : t('dashboard.createTrip')}
+      size="md"
+      footer={
+        <div className="flex gap-3 justify-end">
+          <button type="button" onClick={onClose}
+            className="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
+            {t('common.cancel')}
+          </button>
+          <button onClick={handleSubmit} disabled={isLoading}
+            className="px-4 py-2 text-sm bg-slate-900 hover:bg-slate-700 disabled:bg-slate-400 text-white rounded-lg transition-colors flex items-center gap-2">
+            {isLoading
+              ? <><div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />{t('common.saving')}</>
+              : isEditing ? t('common.update') : t('dashboard.createTrip')}
+          </button>
+        </div>
+      }
+    >
+      <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
+        {error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">{error}</div>
+        )}
+
+        {/* Cover image — available for both create and edit */}
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.coverImage')}</label>
+          <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleCoverChange} />
+          {coverPreview ? (
+            <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', height: 130 }}>
+              <img src={coverPreview} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              <div style={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 6 }}>
+                <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
+                  style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '5px 10px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', border: 'none', color: 'white', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
+                  <Camera size={12} /> {uploadingCover ? t('common.uploading') : t('common.change')}
+                </button>
+                <button type="button" onClick={handleRemoveCover}
+                  style={{ display: 'flex', alignItems: 'center', padding: '5px 8px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', border: 'none', color: 'white', cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
+                  <X size={12} />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
+              style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit' }}
+              onMouseEnter={e => { e.currentTarget.style.borderColor = '#d1d5db'; e.currentTarget.style.color = '#6b7280' }}
+              onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
+              <Camera size={15} /> {uploadingCover ? t('common.uploading') : t('dashboard.addCoverImage')}
+            </button>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">
+            {t('dashboard.tripTitle')} <span className="text-red-500">*</span>
+          </label>
+          <input type="text" value={formData.title} onChange={e => update('title', e.target.value)}
+            required placeholder={t('dashboard.tripTitlePlaceholder')} className={inputCls} />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.tripDescription')}</label>
+          <textarea value={formData.description} onChange={e => update('description', e.target.value)}
+            placeholder={t('dashboard.tripDescriptionPlaceholder')} rows={3}
+            className={`${inputCls} resize-none`} />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              <Calendar className="inline w-4 h-4 mr-1" />{t('dashboard.startDate')}
+            </label>
+            <CustomDatePicker value={formData.start_date} onChange={v => update('start_date', v)} placeholder={t('dashboard.startDate')} />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              <Calendar className="inline w-4 h-4 mr-1" />{t('dashboard.endDate')}
+            </label>
+            <CustomDatePicker value={formData.end_date} onChange={v => update('end_date', v)} placeholder={t('dashboard.endDate')} />
+          </div>
+        </div>
+
+        {!formData.start_date && !formData.end_date && (
+          <p className="text-xs text-slate-400 bg-slate-50 rounded-lg p-3">
+            {t('dashboard.noDateHint')}
+          </p>
+        )}
+      </form>
+    </Modal>
+  )
+}

client/src/components/Trips/TripMembersModal.tsx

@@ -0,0 +1,235 @@
+import { useState, useEffect } from 'react'
+import Modal from '../shared/Modal'
+import { tripsApi, authApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { useAuthStore } from '../../store/authStore'
+import { Crown, UserMinus, UserPlus, Users, LogOut } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { getApiErrorMessage } from '../../types'
+import CustomSelect from '../shared/CustomSelect'
+
+interface AvatarProps {
+  username: string
+  avatarUrl: string | null
+  size?: number
+}
+
+function Avatar({ username, avatarUrl, size = 32 }: AvatarProps) {
+  if (avatarUrl) {
+    return <img src={avatarUrl} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
+  }
+  const letter = (username || '?')[0].toUpperCase()
+  const colors = ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4']
+  const color = colors[letter.charCodeAt(0) % colors.length]
+  return (
+    <div style={{
+      width: size, height: size, borderRadius: '50%', background: color,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      fontSize: size * 0.4, fontWeight: 700, color: 'white', flexShrink: 0,
+    }}>
+      {letter}
+    </div>
+  )
+}
+
+interface TripMembersModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tripId: number
+  tripTitle: string
+}
+
+export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }: TripMembersModalProps) {
+  const [data, setData] = useState(null)
+  const [allUsers, setAllUsers] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [removingId, setRemovingId] = useState(null)
+  const toast = useToast()
+  const { user } = useAuthStore()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (isOpen && tripId) {
+      loadMembers()
+      loadAllUsers()
+    }
+  }, [isOpen, tripId])
+
+  const loadMembers = async () => {
+    setLoading(true)
+    try {
+      const d = await tripsApi.getMembers(tripId)
+      setData(d)
+    } catch {
+      toast.error(t('members.loadError'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadAllUsers = async () => {
+    try {
+      const d = await authApi.listUsers()
+      setAllUsers(d.users)
+    } catch {}
+  }
+
+  const handleAdd = async () => {
+    if (!selectedUserId) return
+    setAdding(true)
+    try {
+      const target = allUsers.find(u => String(u.id) === String(selectedUserId))
+      await tripsApi.addMember(tripId, target.username)
+      setSelectedUserId('')
+      await loadMembers()
+      toast.success(`${target.username} ${t('members.added')}`)
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('members.addError')))
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  const handleRemove = async (userId, isSelf) => {
+    const msg = isSelf
+      ? t('members.confirmLeave')
+      : t('members.confirmRemove')
+    if (!confirm(msg)) return
+    setRemovingId(userId)
+    try {
+      await tripsApi.removeMember(tripId, userId)
+      if (isSelf) { onClose(); window.location.reload() }
+      else { await loadMembers(); toast.success(t('members.removed')) }
+    } catch {
+      toast.error(t('members.removeError'))
+    } finally {
+      setRemovingId(null)
+    }
+  }
+
+  // Users not yet in the trip
+  const existingIds = new Set([
+    data?.owner?.id,
+    ...(data?.members?.map(m => m.id) || []),
+  ])
+  const availableUsers = allUsers.filter(u => !existingIds.has(u.id))
+
+  const isCurrentOwner = data?.owner?.id === user?.id
+  const allMembers = data ? [
+    { ...data.owner, role: 'owner' },
+    ...data.members,
+  ] : []
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="sm">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+
+        {/* Trip name */}
+        <div style={{ padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: 10, border: '1px solid var(--border-secondary)' }}>
+          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>{t('nav.trip')}</div>
+          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{tripTitle}</div>
+        </div>
+
+        {/* Add member dropdown */}
+        <div>
+          <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>
+            {t('members.inviteUser')}
+          </label>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <CustomSelect
+              value={selectedUserId}
+              onChange={value => setSelectedUserId(value)}
+              placeholder={t('members.selectUser')}
+              options={[
+                { value: '', label: t('members.selectUser') },
+                ...availableUsers.map(u => ({
+                  value: u.id,
+                  label: u.username,
+                })),
+              ]}
+              searchable
+              style={{ flex: 1 }}
+              size="sm"
+            />
+            <button
+              onClick={handleAdd}
+              disabled={adding || !selectedUserId}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 5, padding: '8px 14px',
+                background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10,
+                fontSize: 13, fontWeight: 600, cursor: adding || !selectedUserId ? 'default' : 'pointer',
+                fontFamily: 'inherit', opacity: adding || !selectedUserId ? 0.4 : 1, flexShrink: 0,
+              }}
+            >
+              <UserPlus size={13} /> {adding ? '…' : t('members.invite')}
+            </button>
+          </div>
+          {availableUsers.length === 0 && allUsers.length > 0 && (
+            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '6px 0 0' }}>{t('members.allHaveAccess')}</p>
+          )}
+        </div>
+
+        {/* Members list */}
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
+            <Users size={13} style={{ color: 'var(--text-faint)' }} />
+            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>
+              {t('members.access')} ({allMembers.length} {allMembers.length === 1 ? t('members.person') : t('members.persons')})
+            </span>
+          </div>
+
+          {loading ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {[1, 2].map(i => (
+                <div key={i} style={{ height: 48, background: 'var(--bg-tertiary)', borderRadius: 10, animation: 'pulse 1.5s ease-in-out infinite' }} />
+              ))}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {allMembers.map(member => {
+                const isSelf = member.id === user?.id
+                const canRemove = isCurrentOwner ? member.role !== 'owner' : isSelf
+                return (
+                  <div key={member.id} style={{
+                    display: 'flex', alignItems: 'center', gap: 10,
+                    padding: '8px 12px', borderRadius: 10, background: 'var(--bg-secondary)',
+                    border: '1px solid var(--border-secondary)',
+                  }}>
+                    <Avatar username={member.username} avatarUrl={member.avatar_url} />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{member.username}</span>
+                        {isSelf && <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>({t('members.you')})</span>}
+                        {member.role === 'owner' && (
+                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, fontWeight: 700, color: '#d97706', background: '#fef9c3', padding: '1px 6px', borderRadius: 99 }}>
+                            <Crown size={9} /> {t('members.owner')}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {canRemove && (
+                      <button
+                        onClick={() => handleRemove(member.id, isSelf)}
+                        disabled={removingId === member.id}
+                        title={isSelf ? t('members.leaveTrip') : t('members.removeAccess')}
+                        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', borderRadius: 6, display: 'flex', color: 'var(--text-faint)', opacity: removingId === member.id ? 0.4 : 1 }}
+                        onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
+                        onMouseLeave={e => e.currentTarget.style.color = '#9ca3af'}
+                      >
+                        {isSelf ? <LogOut size={14} /> : <UserMinus size={14} />}
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        <style>{`@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }`}</style>
+      </div>
+    </Modal>
+  )
+}

client/src/components/Vacay/VacayCalendar.tsx

@@ -0,0 +1,96 @@
+import { useMemo, useState, useCallback } from 'react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useTranslation } from '../../i18n'
+import { isWeekend } from './holidays'
+import VacayMonthCard from './VacayMonthCard'
+import { Building2, MousePointer2 } from 'lucide-react'
+
+export default function VacayCalendar() {
+  const { t } = useTranslation()
+  const { selectedYear, selectedUserId, entries, companyHolidays, toggleEntry, toggleCompanyHoliday, plan, users, holidays } = useVacayStore()
+  const [companyMode, setCompanyMode] = useState(false)
+
+  const companyHolidaySet = useMemo(() => {
+    const s = new Set()
+    companyHolidays.forEach(h => s.add(h.date))
+    return s
+  }, [companyHolidays])
+
+  const entryMap = useMemo(() => {
+    const map = {}
+    entries.forEach(e => {
+      if (!map[e.date]) map[e.date] = []
+      map[e.date].push(e)
+    })
+    return map
+  }, [entries])
+
+  const blockWeekends = plan?.block_weekends !== false
+  const companyHolidaysEnabled = plan?.company_holidays_enabled !== false
+
+  const handleCellClick = useCallback(async (dateStr) => {
+    if (companyMode) {
+      if (!companyHolidaysEnabled) return
+      await toggleCompanyHoliday(dateStr)
+      return
+    }
+    if (holidays[dateStr]) return
+    if (blockWeekends && isWeekend(dateStr)) return
+    if (companyHolidaysEnabled && companyHolidaySet.has(dateStr)) return
+    await toggleEntry(dateStr, selectedUserId || undefined)
+  }, [companyMode, toggleEntry, toggleCompanyHoliday, holidays, companyHolidaySet, blockWeekends, companyHolidaysEnabled, selectedUserId])
+
+  const selectedUser = users.find(u => u.id === selectedUserId)
+
+  return (
+    <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+        {Array.from({ length: 12 }, (_, i) => (
+          <VacayMonthCard
+            key={i}
+            year={selectedYear}
+            month={i}
+            holidays={holidays}
+            companyHolidaySet={companyHolidaySet}
+            companyHolidaysEnabled={companyHolidaysEnabled}
+            entryMap={entryMap}
+            onCellClick={handleCellClick}
+            companyMode={companyMode}
+            blockWeekends={blockWeekends}
+          />
+        ))}
+      </div>
+
+      {/* Floating toolbar */}
+      <div className="sticky bottom-3 sm:bottom-4 mt-3 sm:mt-4 flex items-center justify-center z-30 px-2">
+        <div className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-xl border" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }}>
+          <button
+            onClick={() => setCompanyMode(false)}
+            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
+            style={{
+              background: !companyMode ? 'var(--text-primary)' : 'transparent',
+              color: !companyMode ? 'var(--bg-card)' : 'var(--text-muted)',
+              border: companyMode ? '1px solid var(--border-primary)' : '1px solid transparent',
+            }}>
+            <MousePointer2 size={13} />
+            {selectedUser && <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: selectedUser.color }} />}
+            {selectedUser ? selectedUser.username : t('vacay.modeVacation')}
+          </button>
+          {companyHolidaysEnabled && (
+            <button
+              onClick={() => setCompanyMode(true)}
+              className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
+              style={{
+                background: companyMode ? '#d97706' : 'transparent',
+                color: companyMode ? '#fff' : 'var(--text-muted)',
+                border: !companyMode ? '1px solid var(--border-primary)' : '1px solid transparent',
+              }}>
+              <Building2 size={13} />
+              {t('vacay.modeCompany')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Vacay/VacayMonthCard.tsx

@@ -0,0 +1,131 @@
+import { useMemo } from 'react'
+import { useTranslation } from '../../i18n'
+import { isWeekend } from './holidays'
+import type { HolidaysMap, VacayEntry } from '../../types'
+
+const WEEKDAYS_EN = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+const MONTHS_EN = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+const MONTHS_DE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+
+interface VacayMonthCardProps {
+  year: number
+  month: number
+  holidays: HolidaysMap
+  companyHolidaySet: Set<string>
+  companyHolidaysEnabled?: boolean
+  entryMap: Record<string, VacayEntry[]>
+  onCellClick: (date: string) => void
+  companyMode: boolean
+  blockWeekends: boolean
+}
+
+export default function VacayMonthCard({
+  year, month, holidays, companyHolidaySet, companyHolidaysEnabled = true, entryMap,
+  onCellClick, companyMode, blockWeekends
+}: VacayMonthCardProps) {
+  const { language } = useTranslation()
+  const weekdays = language === 'de' ? WEEKDAYS_DE : WEEKDAYS_EN
+  const monthNames = language === 'de' ? MONTHS_DE : MONTHS_EN
+
+  const weeks = useMemo(() => {
+    const firstDay = new Date(year, month, 1)
+    const daysInMonth = new Date(year, month + 1, 0).getDate()
+    let startDow = firstDay.getDay() - 1
+    if (startDow < 0) startDow = 6
+    const cells = []
+    for (let i = 0; i < startDow; i++) cells.push(null)
+    for (let d = 1; d <= daysInMonth; d++) cells.push(d)
+    while (cells.length % 7 !== 0) cells.push(null)
+    const w = []
+    for (let i = 0; i < cells.length; i += 7) w.push(cells.slice(i, i + 7))
+    return w
+  }, [year, month])
+
+  const pad = (n) => String(n).padStart(2, '0')
+
+  return (
+    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="px-3 py-2 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+        <span className="text-xs font-semibold" style={{ color: 'var(--text-primary)' }}>{monthNames[month]}</span>
+      </div>
+
+      <div className="grid grid-cols-7 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+        {weekdays.map((wd, i) => (
+          <div key={wd} className="text-center text-[10px] font-medium py-1" style={{ color: i >= 5 ? 'var(--text-faint)' : 'var(--text-muted)' }}>
+            {wd}
+          </div>
+        ))}
+      </div>
+
+      <div>
+        {weeks.map((week, wi) => (
+          <div key={wi} className="grid grid-cols-7">
+            {week.map((day, di) => {
+              if (day === null) return <div key={di} style={{ height: 28 }} />
+
+              const dateStr = `${year}-${pad(month + 1)}-${pad(day)}`
+              const weekend = di >= 5
+              const holiday = holidays[dateStr]
+              const isCompany = companyHolidaysEnabled && companyHolidaySet.has(dateStr)
+              const dayEntries = entryMap[dateStr] || []
+              const isBlocked = !!holiday || (weekend && blockWeekends) || (isCompany && !companyMode)
+
+              return (
+                <div
+                  key={di}
+                  className="relative flex items-center justify-center cursor-pointer transition-colors"
+                  style={{
+                    height: 28,
+                    background: weekend ? 'var(--bg-secondary)' : 'transparent',
+                    borderTop: '1px solid var(--border-secondary)',
+                    borderRight: '1px solid var(--border-secondary)',
+                    cursor: isBlocked ? 'default' : 'pointer',
+                  }}
+                  onClick={() => onCellClick(dateStr)}
+                  onMouseEnter={e => { if (!isBlocked) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                  onMouseLeave={e => { e.currentTarget.style.background = weekend ? 'var(--bg-secondary)' : 'transparent' }}
+                >
+                  {holiday && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(239,68,68,0.12)' }} />}
+                  {isCompany && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(245,158,11,0.15)' }} />}
+
+                  {dayEntries.length === 1 && (
+                    <div className="absolute inset-0.5 rounded" style={{ backgroundColor: dayEntries[0].person_color, opacity: 0.4 }} />
+                  )}
+                  {dayEntries.length === 2 && (
+                    <div className="absolute inset-0.5 rounded" style={{
+                      background: `linear-gradient(135deg, ${dayEntries[0].person_color} 50%, ${dayEntries[1].person_color} 50%)`,
+                      opacity: 0.4,
+                    }} />
+                  )}
+                  {dayEntries.length === 3 && (
+                    <div className="absolute inset-0.5 rounded overflow-hidden" style={{ opacity: 0.4 }}>
+                      <div className="absolute top-0 left-0 w-1/2 h-full" style={{ backgroundColor: dayEntries[0].person_color }} />
+                      <div className="absolute top-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[1].person_color }} />
+                      <div className="absolute bottom-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[2].person_color }} />
+                    </div>
+                  )}
+                  {dayEntries.length >= 4 && (
+                    <div className="absolute inset-0.5 rounded overflow-hidden" style={{ opacity: 0.4 }}>
+                      <div className="absolute top-0 left-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[0].person_color }} />
+                      <div className="absolute top-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[1].person_color }} />
+                      <div className="absolute bottom-0 left-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[2].person_color }} />
+                      <div className="absolute bottom-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[3].person_color }} />
+                    </div>
+                  )}
+
+                  <span className="relative z-[1] text-[11px] font-medium" style={{
+                    color: holiday ? '#dc2626' : weekend ? 'var(--text-faint)' : 'var(--text-primary)',
+                    fontWeight: dayEntries.length > 0 ? 700 : 500,
+                  }}>
+                    {day}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

client/src/components/Vacay/VacayPersons.tsx

@@ -0,0 +1,192 @@
+import ReactDOM from 'react-dom'
+import { useState, useEffect } from 'react'
+import DOM from 'react-dom'
+import { UserPlus, Unlink, Check, Loader2, Clock, X } from 'lucide-react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+import { getApiErrorMessage } from '../../types'
+import { useToast } from '../shared/Toast'
+import CustomSelect from '../shared/CustomSelect'
+import apiClient from '../../api/client'
+
+const PRESET_COLORS = [
+  '#6366f1', '#ec4899', '#14b8a6', '#8b5cf6', '#ef4444',
+  '#3b82f6', '#22c55e', '#06b6d4', '#f43f5e', '#a855f7',
+  '#10b981', '#0ea5e9', '#64748b', '#be185d', '#0d9488',
+]
+
+export default function VacayPersons() {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const { users, pendingInvites, invite, cancelInvite, updateColor, selectedUserId, setSelectedUserId, isFused } = useVacayStore()
+  const { user: currentUser } = useAuthStore()
+
+  // Default selectedUserId to current user
+  useEffect(() => {
+    if (!selectedUserId && currentUser) setSelectedUserId(currentUser.id)
+  }, [currentUser, selectedUserId])
+  const [showInvite, setShowInvite] = useState(false)
+  const [showColorPicker, setShowColorPicker] = useState(false)
+  const [colorEditUserId, setColorEditUserId] = useState(null)
+  const [availableUsers, setAvailableUsers] = useState([])
+  const [selectedInviteUser, setSelectedInviteUser] = useState(null)
+  const [inviting, setInviting] = useState(false)
+
+  const loadAvailable = async () => {
+    try {
+      const data = await apiClient.get('/addons/vacay/available-users').then(r => r.data)
+      setAvailableUsers(data.users)
+    } catch { /* */ }
+  }
+
+  const handleInvite = async () => {
+    if (!selectedInviteUser) return
+    setInviting(true)
+    try {
+      await invite(selectedInviteUser)
+      toast.success(t('vacay.inviteSent'))
+      setShowInvite(false)
+      setSelectedInviteUser(null)
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('vacay.inviteError')))
+    } finally {
+      setInviting(false)
+    }
+  }
+
+  const handleColorChange = async (color) => {
+    await updateColor(color, colorEditUserId)
+    setShowColorPicker(false)
+    setColorEditUserId(null)
+  }
+
+  const editingUserColor = users.find(u => u.id === colorEditUserId)?.color || '#6366f1'
+
+  return (
+    <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>{t('vacay.persons')}</span>
+        <button onClick={() => { setShowInvite(true); loadAvailable() }}
+          className="p-0.5 rounded transition-colors" style={{ color: 'var(--text-faint)' }}>
+          <UserPlus size={14} />
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-0.5">
+        {users.map(u => {
+          const isSelected = selectedUserId === u.id
+          return (
+            <div key={u.id}
+              onClick={() => { if (isFused) setSelectedUserId(u.id) }}
+              className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg group transition-all"
+              style={{
+                background: isSelected ? 'var(--bg-hover)' : 'transparent',
+                border: isSelected ? '1px solid var(--border-primary)' : '1px solid transparent',
+                cursor: isFused ? 'pointer' : 'default',
+              }}>
+              <button
+                onClick={(e) => { e.stopPropagation(); setColorEditUserId(u.id); setShowColorPicker(true) }}
+                className="w-3.5 h-3.5 rounded-full shrink-0 transition-transform hover:scale-125"
+                style={{ backgroundColor: u.color, cursor: 'pointer' }}
+                title={t('vacay.changeColor')}
+              />
+              <span className="text-xs font-medium flex-1 truncate" style={{ color: 'var(--text-primary)' }}>
+                {u.username}
+                {u.id === currentUser?.id && <span style={{ color: 'var(--text-faint)' }}> ({t('vacay.you')})</span>}
+              </span>
+              {isSelected && isFused && (
+                <Check size={12} style={{ color: 'var(--text-primary)' }} />
+              )}
+            </div>
+          )
+        })}
+
+        {/* Pending invites */}
+        {pendingInvites.map(inv => (
+          <div key={inv.id} className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg group"
+            style={{ background: 'var(--bg-secondary)', opacity: 0.7 }}>
+            <Clock size={12} style={{ color: 'var(--text-faint)' }} />
+            <span className="text-xs flex-1 truncate" style={{ color: 'var(--text-muted)' }}>
+              {inv.username} <span className="text-[10px]">({t('vacay.pending')})</span>
+            </span>
+            <button onClick={() => cancelInvite(inv.user_id)}
+              className="opacity-0 group-hover:opacity-100 text-[10px] px-1.5 py-0.5 rounded transition-all"
+              style={{ color: 'var(--text-faint)' }}>
+              {t('common.cancel')}
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Invite Modal — Portal to body to avoid z-index issues */}
+      {showInvite && ReactDOM.createPortal(
+        <div className="fixed inset-0 flex items-center justify-center px-4" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
+          onClick={() => setShowInvite(false)}>
+          <div className="rounded-2xl shadow-2xl w-full max-w-sm" style={{ background: 'var(--bg-card)', animation: 'modalIn 0.2s ease-out' }}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between p-5" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+              <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.inviteUser')}</h2>
+              <button onClick={() => setShowInvite(false)} className="p-1.5 rounded-lg transition-colors" style={{ color: 'var(--text-faint)' }}>
+                <X size={16} />
+              </button>
+            </div>
+            <div className="p-5 space-y-4">
+              <p className="text-xs" style={{ color: 'var(--text-muted)' }}>{t('vacay.inviteHint')}</p>
+              {availableUsers.length === 0 ? (
+                <p className="text-xs text-center py-4" style={{ color: 'var(--text-faint)' }}>{t('vacay.noUsersAvailable')}</p>
+              ) : (
+                <CustomSelect
+                  value={selectedInviteUser}
+                  onChange={setSelectedInviteUser}
+                  options={availableUsers.map(u => ({ value: u.id, label: `${u.username} (${u.email})` }))}
+                  placeholder={t('vacay.selectUser')}
+                  searchable
+                />
+              )}
+              <div className="flex gap-3 justify-end pt-2">
+                <button onClick={() => setShowInvite(false)} className="px-4 py-2 text-sm rounded-lg"
+                  style={{ color: 'var(--text-muted)', border: '1px solid var(--border-primary)' }}>
+                  {t('common.cancel')}
+                </button>
+                <button onClick={handleInvite} disabled={!selectedInviteUser || inviting}
+                  className="px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-1.5 disabled:opacity-40"
+                  style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}>
+                  {inviting && <Loader2 size={13} className="animate-spin" />}
+                  {t('vacay.sendInvite')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Color Picker Modal — Portal to body */}
+      {showColorPicker && ReactDOM.createPortal(
+        <div className="fixed inset-0 flex items-center justify-center px-4" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
+          onClick={() => { setShowColorPicker(false); setColorEditUserId(null) }}>
+          <div className="rounded-2xl shadow-2xl w-full max-w-xs" style={{ background: 'var(--bg-card)', animation: 'modalIn 0.2s ease-out' }}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between p-5" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+              <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.changeColor')}</h2>
+              <button onClick={() => { setShowColorPicker(false); setColorEditUserId(null) }} className="p-1.5 rounded-lg transition-colors" style={{ color: 'var(--text-faint)' }}>
+                <X size={16} />
+              </button>
+            </div>
+            <div className="p-5">
+              <div className="flex flex-wrap gap-2 justify-center">
+                {PRESET_COLORS.map(c => (
+                  <button key={c} onClick={() => handleColorChange(c)}
+                    className={`w-8 h-8 rounded-full transition-all ${editingUserColor === c ? 'ring-2 ring-offset-2 scale-110' : 'hover:scale-110'}`}
+                    style={{ backgroundColor: c }} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}

client/src/components/Vacay/VacaySettings.tsx

@@ -0,0 +1,225 @@
+import { useState, useEffect } from 'react'
+import { MapPin, CalendarOff, AlertCircle, Building2, Unlink, ArrowRightLeft, Globe } from 'lucide-react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import CustomSelect from '../shared/CustomSelect'
+import apiClient from '../../api/client'
+
+interface VacaySettingsProps {
+  onClose: () => void
+}
+
+export default function VacaySettings({ onClose }: VacaySettingsProps) {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const { plan, updatePlan, isFused, dissolve, users } = useVacayStore()
+  const [countries, setCountries] = useState([])
+  const [regions, setRegions] = useState([])
+  const [loadingRegions, setLoadingRegions] = useState(false)
+
+  const { language } = useTranslation()
+
+  // Load available countries with localized names
+  useEffect(() => {
+    apiClient.get('/addons/vacay/holidays/countries').then(r => {
+      let displayNames
+      try { displayNames = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' }) } catch { /* */ }
+      const list = r.data.map(c => ({
+        value: c.countryCode,
+        label: displayNames ? (displayNames.of(c.countryCode) || c.name) : c.name,
+      }))
+      list.sort((a, b) => a.label.localeCompare(b.label))
+      setCountries(list)
+    }).catch(() => {})
+  }, [language])
+
+  // When country changes, check if it has regions
+  const selectedCountry = plan?.holidays_region?.split('-')[0] || ''
+  const selectedRegion = plan?.holidays_region?.includes('-') ? plan.holidays_region : ''
+
+  useEffect(() => {
+    if (!selectedCountry || !plan?.holidays_enabled) { setRegions([]); return }
+    setLoadingRegions(true)
+    const year = new Date().getFullYear()
+    apiClient.get(`/addons/vacay/holidays/${year}/${selectedCountry}`).then(r => {
+      const allCounties = new Set()
+      r.data.forEach(h => {
+        if (h.counties) h.counties.forEach(c => allCounties.add(c))
+      })
+      if (allCounties.size > 0) {
+        let subdivisionNames
+        try { subdivisionNames = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' }) } catch { /* */ }
+        const regionList = [...allCounties].sort().map(c => {
+          let label = c.split('-')[1] || c
+          // Try Intl for full subdivision name (not all browsers support subdivision codes)
+          // Fallback: use known mappings for DE
+          if (c.startsWith('DE-')) {
+            const deRegions = { BW:'Baden-Württemberg',BY:'Bayern',BE:'Berlin',BB:'Brandenburg',HB:'Bremen',HH:'Hamburg',HE:'Hessen',MV:'Mecklenburg-Vorpommern',NI:'Niedersachsen',NW:'Nordrhein-Westfalen',RP:'Rheinland-Pfalz',SL:'Saarland',SN:'Sachsen',ST:'Sachsen-Anhalt',SH:'Schleswig-Holstein',TH:'Thüringen' }
+            label = deRegions[c.split('-')[1]] || label
+          } else if (c.startsWith('CH-')) {
+            const chRegions = { AG:'Aargau',AI:'Appenzell Innerrhoden',AR:'Appenzell Ausserrhoden',BE:'Bern',BL:'Basel-Landschaft',BS:'Basel-Stadt',FR:'Freiburg',GE:'Genf',GL:'Glarus',GR:'Graubünden',JU:'Jura',LU:'Luzern',NE:'Neuenburg',NW:'Nidwalden',OW:'Obwalden',SG:'St. Gallen',SH:'Schaffhausen',SO:'Solothurn',SZ:'Schwyz',TG:'Thurgau',TI:'Tessin',UR:'Uri',VD:'Waadt',VS:'Wallis',ZG:'Zug',ZH:'Zürich' }
+            label = chRegions[c.split('-')[1]] || label
+          }
+          return { value: c, label }
+        })
+        setRegions(regionList)
+      } else {
+        setRegions([])
+        // If no regions, just set country code as region
+        if (plan.holidays_region !== selectedCountry) {
+          updatePlan({ holidays_region: selectedCountry })
+        }
+      }
+    }).catch(() => setRegions([])).finally(() => setLoadingRegions(false))
+  }, [selectedCountry, plan?.holidays_enabled])
+
+  if (!plan) return null
+
+  const toggle = (key) => updatePlan({ [key]: !plan[key] })
+
+  const handleCountryChange = (countryCode) => {
+    updatePlan({ holidays_region: countryCode })
+  }
+
+  const handleRegionChange = (regionCode) => {
+    updatePlan({ holidays_region: regionCode })
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Block weekends */}
+      <SettingToggle
+        icon={CalendarOff}
+        label={t('vacay.blockWeekends')}
+        hint={t('vacay.blockWeekendsHint')}
+        value={plan.block_weekends}
+        onChange={() => toggle('block_weekends')}
+      />
+
+      {/* Carry-over */}
+      <SettingToggle
+        icon={ArrowRightLeft}
+        label={t('vacay.carryOver')}
+        hint={t('vacay.carryOverHint')}
+        value={plan.carry_over_enabled}
+        onChange={() => toggle('carry_over_enabled')}
+      />
+
+      {/* Company holidays */}
+      <div>
+        <SettingToggle
+          icon={Building2}
+          label={t('vacay.companyHolidays')}
+          hint={t('vacay.companyHolidaysHint')}
+          value={plan.company_holidays_enabled}
+          onChange={() => toggle('company_holidays_enabled')}
+        />
+        {plan.company_holidays_enabled && (
+          <div className="ml-7 mt-2">
+            <div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md" style={{ background: 'var(--bg-secondary)' }}>
+              <AlertCircle size={12} style={{ color: 'var(--text-faint)' }} />
+              <span className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{t('vacay.companyHolidaysNoDeduct')}</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Public holidays */}
+      <div>
+        <SettingToggle
+          icon={Globe}
+          label={t('vacay.publicHolidays')}
+          hint={t('vacay.publicHolidaysHint')}
+          value={plan.holidays_enabled}
+          onChange={() => toggle('holidays_enabled')}
+        />
+        {plan.holidays_enabled && (
+          <div className="ml-7 mt-2 space-y-2">
+            <CustomSelect
+              value={selectedCountry}
+              onChange={handleCountryChange}
+              options={countries}
+              placeholder={t('vacay.selectCountry')}
+              searchable
+            />
+            {regions.length > 0 && (
+              <CustomSelect
+                value={selectedRegion}
+                onChange={handleRegionChange}
+                options={regions}
+                placeholder={t('vacay.selectRegion')}
+                searchable
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Dissolve fusion */}
+      {isFused && (
+        <div className="pt-4 mt-2 border-t" style={{ borderColor: 'var(--border-secondary)' }}>
+          <div className="rounded-xl overflow-hidden" style={{ border: '1px solid rgba(239,68,68,0.2)' }}>
+            <div className="px-4 py-3 flex items-center gap-3" style={{ background: 'rgba(239,68,68,0.06)' }}>
+              <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'rgba(239,68,68,0.1)' }}>
+                <Unlink size={16} className="text-red-500" />
+              </div>
+              <div>
+                <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.dissolve')}</p>
+                <p className="text-[11px]" style={{ color: 'var(--text-faint)' }}>{t('vacay.dissolveHint')}</p>
+              </div>
+            </div>
+            <div className="px-4 py-3 flex items-center gap-2 flex-wrap" style={{ borderTop: '1px solid rgba(239,68,68,0.1)' }}>
+              {users.map(u => (
+                <div key={u.id} className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ background: 'var(--bg-secondary)' }}>
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: u.color || '#6366f1' }} />
+                  <span className="text-xs font-medium" style={{ color: 'var(--text-primary)' }}>{u.username}</span>
+                </div>
+              ))}
+            </div>
+            <div className="px-4 py-3" style={{ borderTop: '1px solid rgba(239,68,68,0.1)' }}>
+              <button
+                onClick={async () => {
+                  await dissolve()
+                  toast.success(t('vacay.dissolved'))
+                  onClose()
+                }}
+                className="w-full px-3 py-2 text-xs font-medium bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+              >
+                {t('vacay.dissolveAction')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface SettingToggleProps {
+  icon: React.ComponentType<{ size?: number; className?: string; style?: React.CSSProperties }>
+  label: string
+  hint: string
+  value: boolean
+  onChange: (value: boolean) => void
+}
+
+function SettingToggle({ icon: Icon, label, hint, value, onChange }: SettingToggleProps) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2 min-w-0">
+        <Icon size={15} className="shrink-0" style={{ color: 'var(--text-muted)' }} />
+        <div className="min-w-0">
+          <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+          <p className="text-[11px]" style={{ color: 'var(--text-faint)' }}>{hint}</p>
+        </div>
+      </div>
+      <button onClick={onChange}
+        className="relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors"
+        style={{ background: value ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+        <span className="absolute left-1 h-4 w-4 rounded-full transition-transform duration-200"
+          style={{ background: 'var(--bg-card)', transform: value ? 'translateX(20px)' : 'translateX(0)' }} />
+      </button>
+    </div>
+  )
+}

client/src/components/Vacay/VacayStats.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react'
+import { Briefcase, Pencil } from 'lucide-react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+import type { VacayStat } from '../../types'
+
+interface VacayStatExtended extends VacayStat {
+  username: string
+  avatar_url: string | null
+  color: string | null
+  total_available: number
+}
+
+export default function VacayStats() {
+  const { t } = useTranslation()
+  const { stats, selectedYear, loadStats, updateVacationDays, isFused } = useVacayStore()
+  const { user: currentUser } = useAuthStore()
+
+  useEffect(() => { loadStats(selectedYear) }, [selectedYear])
+
+  return (
+    <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center gap-1.5 mb-3">
+        <Briefcase size={13} style={{ color: 'var(--text-faint)' }} />
+        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>
+          {t('vacay.entitlement')} {selectedYear}
+        </span>
+      </div>
+
+      {stats.length === 0 ? (
+        <p className="text-[11px] text-center py-3" style={{ color: 'var(--text-faint)' }}>{t('vacay.noData')}</p>
+      ) : (
+        <div className="space-y-2">
+          {stats.map(s => (
+            <StatCard
+              key={s.user_id}
+              stat={s}
+              isMe={s.user_id === currentUser?.id}
+              canEdit={s.user_id === currentUser?.id || isFused}
+              selectedYear={selectedYear}
+              onSave={updateVacationDays}
+              t={t}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface StatCardProps {
+  stat: VacayStatExtended
+  isMe: boolean
+  canEdit: boolean
+  selectedYear: number
+  onSave: (userId: number, year: number, days: number) => Promise<void>
+  t: (key: string) => string
+}
+
+function StatCard({ stat: s, isMe, canEdit, selectedYear, onSave, t }: StatCardProps) {
+  const [editing, setEditing] = useState(false)
+  const [localDays, setLocalDays] = useState(s.vacation_days)
+  const pct = s.total_available > 0 ? Math.min(100, (s.used / s.total_available) * 100) : 0
+
+  // Sync local state when stats reload from server
+  useEffect(() => {
+    if (!editing) setLocalDays(s.vacation_days)
+  }, [s.vacation_days, editing])
+
+  const handleSave = () => {
+    setEditing(false)
+    const days = parseInt(localDays)
+    if (!isNaN(days) && days >= 0 && days <= 365 && days !== s.vacation_days) {
+      onSave(selectedYear, days, s.user_id)
+    }
+  }
+
+  return (
+    <div className="rounded-lg p-2.5 space-y-2" style={{ border: '1px solid var(--border-secondary)' }}>
+      <div className="flex items-center gap-2">
+        <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: s.person_color }} />
+        <span className="text-xs font-semibold flex-1 truncate" style={{ color: 'var(--text-primary)' }}>
+          {s.person_name}
+          {isMe && <span style={{ color: 'var(--text-faint)' }}> ({t('vacay.you')})</span>}
+        </span>
+        <span className="text-[10px] tabular-nums" style={{ color: 'var(--text-faint)' }}>{s.used}/{s.total_available}</span>
+      </div>
+      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-secondary)' }}>
+        <div className="h-full rounded-full transition-all duration-500" style={{ width: `${pct}%`, backgroundColor: s.person_color }} />
+      </div>
+      <div className="grid grid-cols-3 gap-1.5">
+        {/* Days — editable */}
+        <div
+          className="rounded-md px-2 py-2 group/days"
+          style={{
+            background: canEdit ? 'var(--bg-card)' : 'var(--bg-secondary)',
+            border: canEdit ? '1px solid var(--border-primary)' : '1px solid transparent',
+            cursor: canEdit ? 'pointer' : 'default',
+          }}
+          onClick={() => { if (canEdit && !editing) setEditing(true) }}
+        >
+          <div className="text-[10px] mb-1" style={{ color: 'var(--text-faint)', height: 14, lineHeight: '14px' }}>
+            {t('vacay.entitlementDays')} {canEdit && !editing && <Pencil size={9} className="inline opacity-0 group-hover/days:opacity-100 transition-opacity" style={{ color: 'var(--text-faint)', verticalAlign: 'middle' }} />}
+          </div>
+          {editing ? (
+            <input
+              type="number"
+              value={localDays}
+              onChange={e => setLocalDays(e.target.value)}
+              onBlur={handleSave}
+              onKeyDown={e => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') { setEditing(false); setLocalDays(s.vacation_days) } }}
+              autoFocus
+              className="w-full bg-transparent text-sm font-bold outline-none p-0 m-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+              style={{ color: 'var(--text-primary)', height: 18, lineHeight: '18px' }}
+            />
+          ) : (
+            <div className="text-sm font-bold" style={{ color: 'var(--text-primary)', height: 18, lineHeight: '18px' }}>{s.vacation_days}</div>
+          )}
+        </div>
+        {/* Used */}
+        <div className="rounded-md px-2 py-2" style={{ background: 'var(--bg-secondary)' }}>
+          <div className="text-[10px] mb-1" style={{ color: 'var(--text-faint)', height: 14, lineHeight: '14px' }}>{t('vacay.used')}</div>
+          <div className="text-sm font-bold" style={{ color: 'var(--text-primary)', height: 18, lineHeight: '18px' }}>{s.used}</div>
+        </div>
+        {/* Remaining */}
+        <div className="rounded-md px-2 py-2" style={{ background: 'var(--bg-secondary)' }}>
+          <div className="text-[10px] mb-1" style={{ color: 'var(--text-faint)', height: 14, lineHeight: '14px' }}>{t('vacay.remaining')}</div>
+          <div className="text-sm font-bold" style={{ color: s.remaining < 0 ? '#ef4444' : s.remaining <= 3 ? '#f59e0b' : '#22c55e', height: 18, lineHeight: '18px' }}>
+            {s.remaining}
+          </div>
+        </div>
+      </div>
+      {s.carried_over > 0 && (
+        <div className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ background: 'rgba(245,158,11,0.08)', border: '1px solid rgba(245,158,11,0.15)' }}>
+          <span className="text-[10px]" style={{ color: '#d97706' }}>+{s.carried_over} {t('vacay.carriedOver', { year: selectedYear - 1 })}</span>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Vacay/holidays.ts

@@ -0,0 +1,131 @@
+const BUNDESLAENDER: Record<string, string> = {
+  BW: 'Baden-Württemberg',
+  BY: 'Bayern',
+  BE: 'Berlin',
+  BB: 'Brandenburg',
+  HB: 'Bremen',
+  HH: 'Hamburg',
+  HE: 'Hessen',
+  MV: 'Mecklenburg-Vorpommern',
+  NI: 'Niedersachsen',
+  NW: 'Nordrhein-Westfalen',
+  RP: 'Rheinland-Pfalz',
+  SL: 'Saarland',
+  SN: 'Sachsen',
+  ST: 'Sachsen-Anhalt',
+  SH: 'Schleswig-Holstein',
+  TH: 'Thüringen',
+}
+
+function easterSunday(year: number): Date {
+  const a = year % 19
+  const b = Math.floor(year / 100)
+  const c = year % 100
+  const d = Math.floor(b / 4)
+  const e = b % 4
+  const f = Math.floor((b + 8) / 25)
+  const g = Math.floor((b - f + 1) / 3)
+  const h = (19 * a + b - d - g + 15) % 30
+  const i = Math.floor(c / 4)
+  const k = c % 4
+  const l = (32 + 2 * e + 2 * i - h - k) % 7
+  const m = Math.floor((a + 11 * h + 22 * l) / 451)
+  const month = Math.floor((h + l - 7 * m + 114) / 31)
+  const day = ((h + l - 7 * m + 114) % 31) + 1
+  return new Date(year, month - 1, day)
+}
+
+function addDays(date: Date, days: number): Date {
+  const d = new Date(date)
+  d.setDate(d.getDate() + days)
+  return d
+}
+
+function fmt(date: Date): string {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+export function getHolidays(year: number, bundesland: string = 'NW'): Record<string, string> {
+  const easter = easterSunday(year)
+  const holidays: Record<string, string> = {}
+
+  holidays[`${year}-01-01`] = 'Neujahr'
+  holidays[`${year}-05-01`] = 'Tag der Arbeit'
+  holidays[`${year}-10-03`] = 'Tag der Deutschen Einheit'
+  holidays[`${year}-12-25`] = '1. Weihnachtsfeiertag'
+  holidays[`${year}-12-26`] = '2. Weihnachtsfeiertag'
+
+  holidays[fmt(addDays(easter, -2))] = 'Karfreitag'
+  holidays[fmt(addDays(easter, 1))] = 'Ostermontag'
+  holidays[fmt(addDays(easter, 39))] = 'Christi Himmelfahrt'
+  holidays[fmt(addDays(easter, 50))] = 'Pfingstmontag'
+
+  const bl = bundesland.toUpperCase()
+
+  if (['BW', 'BY', 'ST'].includes(bl)) {
+    holidays[`${year}-01-06`] = 'Heilige Drei Könige'
+  }
+
+  if (['BE', 'MV'].includes(bl)) {
+    holidays[`${year}-03-08`] = 'Internationaler Frauentag'
+  }
+
+  if (['BW', 'BY', 'HE', 'NW', 'RP', 'SL'].includes(bl)) {
+    holidays[fmt(addDays(easter, 60))] = 'Fronleichnam'
+  }
+
+  if (['SL'].includes(bl)) {
+    holidays[`${year}-08-15`] = 'Mariä Himmelfahrt'
+  }
+
+  if (bl === 'TH') {
+    holidays[`${year}-09-20`] = 'Weltkindertag'
+  }
+
+  if (['BB', 'HB', 'HH', 'MV', 'NI', 'SN', 'ST', 'SH', 'TH'].includes(bl)) {
+    holidays[`${year}-10-31`] = 'Reformationstag'
+  }
+
+  if (['BW', 'BY', 'NW', 'RP', 'SL'].includes(bl)) {
+    holidays[`${year}-11-01`] = 'Allerheiligen'
+  }
+
+  if (bl === 'SN') {
+    const nov23 = new Date(year, 10, 23)
+    const bbt = new Date(nov23)
+    while (bbt.getDay() !== 3) bbt.setDate(bbt.getDate() - 1)
+    holidays[fmt(bbt)] = 'Buß- und Bettag'
+  }
+
+  return holidays
+}
+
+export function isWeekend(dateStr: string): boolean {
+  const d = new Date(dateStr + 'T00:00:00')
+  const day = d.getDay()
+  return day === 0 || day === 6
+}
+
+export function getWeekday(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  return ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][d.getDay()]
+}
+
+export function getWeekdayFull(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  return ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][d.getDay()]
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+export function formatDate(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+export { BUNDESLAENDER }

client/src/components/Weather/WeatherWidget.tsx

@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react'
+import { Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind } from 'lucide-react'
+import { weatherApi } from '../../api/client'
+import { useSettingsStore } from '../../store/settingsStore'
+
+const WEATHER_ICON_MAP = {
+  Clear: Sun,
+  Clouds: Cloud,
+  Rain: CloudRain,
+  Drizzle: CloudDrizzle,
+  Thunderstorm: CloudLightning,
+  Snow: CloudSnow,
+  Mist: Wind,
+  Fog: Wind,
+  Haze: Wind,
+}
+
+interface WeatherIconProps {
+  main: string
+  size?: number
+}
+
+function WeatherIcon({ main, size = 13 }: WeatherIconProps) {
+  const Icon = WEATHER_ICON_MAP[main] || Cloud
+  return <Icon size={size} strokeWidth={1.8} />
+}
+
+function getWeatherCache(key) {
+  try {
+    const raw = sessionStorage.getItem(key)
+    if (raw === null) return undefined
+    return JSON.parse(raw)
+  } catch { return undefined }
+}
+
+function setWeatherCache(key, value) {
+  try { sessionStorage.setItem(key, JSON.stringify(value)) } catch {}
+}
+
+interface WeatherWidgetProps {
+  lat: number | null
+  lng: number | null
+  date: string
+  compact?: boolean
+}
+
+export default function WeatherWidget({ lat, lng, date, compact = false }: WeatherWidgetProps) {
+  const [weather, setWeather] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit'
+
+  useEffect(() => {
+    if (!lat || !lng || !date) return
+    const rLat = Math.round(lat * 100) / 100
+    const rLng = Math.round(lng * 100) / 100
+    const cacheKey = `weather_${rLat}_${rLng}_${date}`
+    const cached = getWeatherCache(cacheKey)
+    if (cached !== undefined) {
+      if (cached === null) setFailed(true)
+      // Climate data: use from cache but re-fetch in background to upgrade to forecast
+      else if (cached.type === 'climate') {
+        setWeather(cached)
+        weatherApi.get(lat, lng, date)
+          .then(data => {
+            if (!data.error && data.temp !== undefined && data.type === 'forecast') {
+              setWeatherCache(cacheKey, data)
+              setWeather(data)
+            }
+          })
+          .catch(() => {})
+        return
+      } else {
+        setWeather(cached)
+        return
+      }
+      return
+    }
+    setLoading(true)
+    weatherApi.get(lat, lng, date)
+      .then(data => {
+        if (data.error || data.temp === undefined) {
+          setFailed(true)
+        } else {
+          setWeatherCache(cacheKey, data)
+          setWeather(data)
+        }
+      })
+      .catch(() => { setFailed(true) })
+      .finally(() => setLoading(false))
+  }, [lat, lng, date])
+
+  if (!lat || !lng) return null
+
+  const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+
+  if (loading) {
+    return (
+      <span style={{ fontSize: 11, color: '#d1d5db', ...fontStyle }}>…</span>
+    )
+  }
+
+  if (failed || !weather) {
+    return (
+      <span style={{ fontSize: 11, color: '#9ca3af', ...fontStyle }}>—</span>
+    )
+  }
+
+  const rawTemp = weather.temp
+  const temp = rawTemp !== undefined ? Math.round(isFahrenheit ? rawTemp * 9/5 + 32 : rawTemp) : null
+  const unit = isFahrenheit ? '°F' : '°C'
+  const isClimate = weather.type === 'climate'
+
+  if (compact) {
+    return (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: isClimate ? '#a1a1aa' : '#6b7280', ...fontStyle }}>
+        <WeatherIcon main={weather.main} size={12} />
+        {temp !== null && <span>{isClimate ? 'Ø ' : ''}{temp}{unit}</span>}
+      </span>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: isClimate ? '#71717a' : '#374151', background: 'rgba(0,0,0,0.04)', borderRadius: 8, padding: '5px 10px', ...fontStyle }}>
+      <WeatherIcon main={weather.main} size={15} />
+      {temp !== null && <span style={{ fontWeight: 500 }}>{isClimate ? 'Ø ' : ''}{temp}{unit}</span>}
+      {weather.description && <span style={{ fontSize: 11, color: '#9ca3af', textTransform: 'capitalize' }}>{weather.description}</span>}
+    </div>
+  )
+}

client/src/components/shared/ConfirmDialog.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useCallback } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+interface ConfirmDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title?: string
+  message?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  danger?: boolean
+}
+
+export default function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel,
+  cancelLabel,
+  danger = true,
+}: ConfirmDialogProps) {
+  const { t } = useTranslation()
+
+  const handleEsc = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+  }, [onClose])
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleEsc)
+    }
+    return () => document.removeEventListener('keydown', handleEsc)
+  }, [isOpen, handleEsc])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center px-4"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
+      onClick={onClose}
+    >
+      <div
+        className="rounded-2xl shadow-2xl w-full max-w-sm p-6"
+        style={{
+          animation: 'modalIn 0.2s ease-out forwards',
+          background: 'var(--bg-card)',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-start gap-4">
+          {danger && (
+            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+              <AlertTriangle className="w-5 h-5 text-red-600" />
+            </div>
+          )}
+          <div className="flex-1">
+            <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
+              {title || t('common.confirm')}
+            </h3>
+            <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)' }}>
+              {message}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+            style={{
+              color: 'var(--text-secondary)',
+              border: '1px solid var(--border-secondary)',
+            }}
+          >
+            {cancelLabel || t('common.cancel')}
+          </button>
+          <button
+            onClick={() => { onConfirm(); onClose() }}
+            className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors text-white ${
+              danger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'
+            }`}
+          >
+            {confirmLabel || t('common.delete')}
+          </button>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes modalIn {
+          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      `}</style>
+    </div>
+  )
+}

client/src/components/shared/ContextMenu.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
+import { LucideIcon } from 'lucide-react'
+
+interface MenuItem {
+  label?: string
+  icon?: LucideIcon
+  onClick?: () => void
+  danger?: boolean
+  divider?: boolean
+}
+
+interface MenuState {
+  x: number
+  y: number
+  items: MenuItem[]
+}
+
+export function useContextMenu() {
+  const [menu, setMenu] = useState<MenuState | null>(null)
+
+  const open = (e: React.MouseEvent, items: MenuItem[]) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setMenu({ x: e.clientX, y: e.clientY, items })
+  }
+
+  const close = () => setMenu(null)
+
+  return { menu, open, close }
+}
+
+interface ContextMenuProps {
+  menu: MenuState | null
+  onClose: () => void
+}
+
+export function ContextMenu({ menu, onClose }: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!menu) return
+    const handler = () => onClose()
+    document.addEventListener('click', handler)
+    document.addEventListener('contextmenu', handler)
+    return () => {
+      document.removeEventListener('click', handler)
+      document.removeEventListener('contextmenu', handler)
+    }
+  }, [menu, onClose])
+
+  useEffect(() => {
+    if (!menu || !ref.current) return
+    const el = ref.current
+    const rect = el.getBoundingClientRect()
+    let { x, y } = menu
+    if (x + rect.width > window.innerWidth - 8) x = window.innerWidth - rect.width - 8
+    if (y + rect.height > window.innerHeight - 8) y = window.innerHeight - rect.height - 8
+    if (x !== menu.x || y !== menu.y) {
+      el.style.left = `${x}px`
+      el.style.top = `${y}px`
+    }
+  }, [menu])
+
+  if (!menu) return null
+
+  return ReactDOM.createPortal(
+    <div ref={ref} style={{
+      position: 'fixed', left: menu.x, top: menu.y, zIndex: 999999,
+      background: 'var(--bg-card)', borderRadius: 10, padding: '4px',
+      border: '1px solid var(--border-primary)',
+      boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
+      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+      minWidth: 160,
+      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+      animation: 'ctxIn 0.1s ease-out',
+    }}>
+      {menu.items.filter(Boolean).map((item, i) => {
+        if (item.divider) return <div key={i} style={{ height: 1, background: 'var(--border-faint)', margin: '3px 6px' }} />
+        const Icon = item.icon
+        return (
+          <button key={i} onClick={() => { item.onClick?.(); onClose() }} style={{
+            display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+            padding: '7px 10px', borderRadius: 7, border: 'none',
+            background: 'none', cursor: 'pointer', fontFamily: 'inherit',
+            fontSize: 12, fontWeight: 500, textAlign: 'left',
+            color: item.danger ? '#ef4444' : 'var(--text-primary)',
+            transition: 'background 0.1s',
+          }}
+            onMouseEnter={e => e.currentTarget.style.background = item.danger ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'none'}
+          >
+            {Icon && <Icon size={13} style={{ flexShrink: 0, color: item.danger ? '#ef4444' : 'var(--text-faint)' }} />}
+            <span>{item.label}</span>
+          </button>
+        )
+      })}
+      <style>{`@keyframes ctxIn { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: scale(1) } }`}</style>
+    </div>,
+    document.body
+  )
+}

client/src/components/shared/CustomDateTimePicker.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { Calendar, Clock, ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+function daysInMonth(year: number, month: number): number { return new Date(year, month + 1, 0).getDate() }
+function getWeekday(year: number, month: number, day: number): number { return new Date(year, month, day).getDay() }
+
+interface CustomDatePickerProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+export function CustomDatePicker({ value, onChange, placeholder, style = {} }: CustomDatePickerProps) {
+  const { locale, t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const dropRef = useRef<HTMLDivElement>(null)
+
+  const parsed = value ? new Date(value + 'T00:00:00') : null
+  const [viewYear, setViewYear] = useState(parsed?.getFullYear() || new Date().getFullYear())
+  const [viewMonth, setViewMonth] = useState(parsed?.getMonth() ?? new Date().getMonth())
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current?.contains(e.target as Node)) return
+      if (dropRef.current?.contains(e.target as Node)) return
+      setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (open && parsed) { setViewYear(parsed.getFullYear()); setViewMonth(parsed.getMonth()) }
+  }, [open])
+
+  const prevMonth = () => { if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1) } else setViewMonth(m => m - 1) }
+  const nextMonth = () => { if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1) } else setViewMonth(m => m + 1) }
+
+  const monthLabel = new Date(viewYear, viewMonth).toLocaleDateString(locale, { month: 'long', year: 'numeric' })
+  const days = daysInMonth(viewYear, viewMonth)
+  const startDay = (getWeekday(viewYear, viewMonth, 1) + 6) % 7
+  const weekdays = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, i + 1).toLocaleDateString(locale, { weekday: 'narrow' }))
+
+  const displayValue = parsed ? parsed.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' }) : null
+
+  const selectDay = (day: number) => {
+    const y = String(viewYear)
+    const m = String(viewMonth + 1).padStart(2, '0')
+    const d = String(day).padStart(2, '0')
+    onChange(`${y}-${m}-${d}`)
+    setOpen(false)
+  }
+
+  const selectedDay = parsed && parsed.getFullYear() === viewYear && parsed.getMonth() === viewMonth ? parsed.getDate() : null
+  const today = new Date()
+  const isToday = (d: number) => today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...style }}>
+      <button type="button" onClick={() => setOpen(o => !o)}
+        style={{
+          width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+          padding: '8px 14px', borderRadius: 10,
+          border: '1px solid var(--border-primary)',
+          background: 'var(--bg-input)', color: displayValue ? 'var(--text-primary)' : 'var(--text-faint)',
+          fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', outline: 'none',
+          transition: 'border-color 0.15s',
+        }}
+        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
+        onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border-primary)' }}>
+        <Calendar size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayValue || placeholder || t('common.date')}</span>
+      </button>
+
+      {open && ReactDOM.createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed',
+          ...(() => {
+            const r = ref.current?.getBoundingClientRect()
+            if (!r) return { top: 0, left: 0 }
+            const w = 268, pad = 8
+            const vw = window.innerWidth
+            const vh = window.innerHeight
+            let left = r.left
+            let top = r.bottom + 4
+            if (left + w > vw - pad) left = Math.max(pad, vw - w - pad)
+            if (top + 320 > vh) top = Math.max(pad, r.top - 320)
+            if (vw < 360) left = Math.max(pad, (vw - w) / 2)
+            return { top, left }
+          })(),
+          zIndex: 99999,
+          background: 'var(--bg-card)', border: '1px solid var(--border-primary)',
+          borderRadius: 14, boxShadow: '0 8px 32px rgba(0,0,0,0.12)', padding: 12, width: 268,
+          maxWidth: 'calc(100vw - 16px)',
+          animation: 'selectIn 0.15s ease-out',
+          backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
+        }}>
+          {/* Month nav */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+            <button type="button" onClick={prevMonth} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronLeft size={16} />
+            </button>
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{monthLabel}</span>
+            <button type="button" onClick={nextMonth} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronRight size={16} />
+            </button>
+          </div>
+
+          {/* Weekday headers */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, marginBottom: 4 }}>
+            {weekdays.map((d, i) => (
+              <div key={i} style={{ textAlign: 'center', fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '2px 0' }}>{d}</div>
+            ))}
+          </div>
+
+          {/* Days grid */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
+            {Array.from({ length: startDay }, (_, i) => <div key={`e-${i}`} />)}
+            {Array.from({ length: days }, (_, i) => {
+              const d = i + 1
+              const sel = d === selectedDay
+              const td = isToday(d)
+              return (
+                <button key={d} type="button" onClick={() => selectDay(d)}
+                  style={{
+                    width: 32, height: 32, borderRadius: 8, border: 'none',
+                    background: sel ? 'var(--accent)' : 'transparent',
+                    color: sel ? 'var(--accent-text)' : 'var(--text-primary)',
+                    fontSize: 12, fontWeight: sel ? 700 : td ? 600 : 400,
+                    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    outline: td && !sel ? '2px solid var(--border-primary)' : 'none', outlineOffset: -2,
+                    transition: 'background 0.1s',
+                  }}
+                  onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                  onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent' }}>
+                  {d}
+                </button>
+              )
+            })}
+          </div>
+
+          {/* Clear */}
+          {value && (
+            <div style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}>
+              <button type="button" onClick={() => { onChange(''); setOpen(false) }}
+                style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, color: 'var(--text-faint)', padding: '3px 8px', borderRadius: 6 }}
+                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                ✕
+              </button>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+
+      <style>{`@keyframes selectIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }`}</style>
+    </div>
+  )
+}
+
+interface CustomDateTimePickerProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+export function CustomDateTimePicker({ value, onChange, placeholder, style = {} }: CustomDateTimePickerProps) {
+  const { locale } = useTranslation()
+  const [datePart, timePart] = (value || '').split('T')
+
+  const handleDateChange = (d: string) => {
+    onChange(d ? `${d}T${timePart || '12:00'}` : '')
+  }
+  const handleTimeChange = (t: string) => {
+    const d = datePart || new Date().toISOString().split('T')[0]
+    onChange(t ? `${d}T${t}` : d)
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: 8, ...style }}>
+      <CustomDatePicker value={datePart || ''} onChange={handleDateChange} style={{ flex: 1, minWidth: 0 }} />
+      <div style={{ width: 110, flexShrink: 0 }}>
+        <CustomTimePicker value={timePart || ''} onChange={handleTimeChange} />
+      </div>
+    </div>
+  )
+}
+
+import CustomTimePicker from './CustomTimePicker'

client/src/components/shared/CustomSelect.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { ChevronDown, Check } from 'lucide-react'
+
+interface SelectOption {
+  value: string
+  label: string
+  icon?: React.ReactNode
+  isHeader?: boolean
+  searchLabel?: string
+  groupLabel?: string
+}
+
+interface CustomSelectProps {
+  value: string
+  onChange: (value: string) => void
+  options?: SelectOption[]
+  placeholder?: string
+  searchable?: boolean
+  style?: React.CSSProperties
+  size?: 'sm' | 'md'
+}
+
+export default function CustomSelect({
+  value,
+  onChange,
+  options = [],
+  placeholder = '',
+  searchable = false,
+  style = {},
+  size = 'md',
+}: CustomSelectProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const ref = useRef<HTMLDivElement>(null)
+  const dropRef = useRef<HTMLDivElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open && searchable && searchRef.current) searchRef.current.focus()
+  }, [open, searchable])
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current?.contains(e.target as Node)) return
+      if (dropRef.current?.contains(e.target as Node)) return
+      setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  const selected = options.find(o => o.value === value)
+  const filtered = searchable && search
+    ? (() => {
+        const q = search.toLowerCase()
+        const result: SelectOption[] = []
+        let currentHeader: SelectOption | null = null
+        let headerAdded = false
+        for (const o of options) {
+          if (o.isHeader) {
+            currentHeader = o
+            headerAdded = false
+            continue
+          }
+          const haystack = [o.label, o.searchLabel, o.groupLabel].filter(Boolean).join(' ').toLowerCase()
+          if (haystack.includes(q)) {
+            if (currentHeader && !headerAdded) {
+              result.push(currentHeader)
+              headerAdded = true
+            }
+            result.push(o)
+          }
+        }
+        return result
+      })()
+    : options
+
+  const sm = size === 'sm'
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...style }}>
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={() => { setOpen(o => !o); setSearch('') }}
+        style={{
+          width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+          padding: sm ? '8px 12px' : '8px 14px', borderRadius: 10,
+          border: '1px solid var(--border-primary)',
+          background: 'var(--bg-input)', color: 'var(--text-primary)',
+          fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
+          cursor: 'pointer', outline: 'none', textAlign: 'left',
+          transition: 'border-color 0.15s', overflow: 'hidden', minWidth: 0,
+        }}
+        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
+        onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border-primary)' }}
+      >
+        {selected?.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{selected.icon}</span>}
+        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: selected ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'none' }} />
+      </button>
+
+      {/* Dropdown */}
+      {open && ReactDOM.createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed',
+          top: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.bottom + 4 : 0 })(),
+          left: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.left : 0 })(),
+          width: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.width : 200 })(),
+          zIndex: 99999,
+          background: 'var(--bg-card)',
+          backdropFilter: 'blur(24px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+          border: '1px solid var(--border-primary)',
+          borderRadius: 10,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+          overflow: 'hidden',
+          animation: 'selectIn 0.15s ease-out',
+        }}>
+          {/* Search */}
+          {searchable && (
+            <div style={{ padding: '6px 6px 2px' }}>
+              <input
+                ref={searchRef}
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="..."
+                style={{
+                  width: '100%', border: '1px solid var(--border-secondary)', borderRadius: 6,
+                  padding: '5px 8px', fontSize: 12, outline: 'none', fontFamily: 'inherit',
+                  background: 'var(--bg-secondary)', color: 'var(--text-primary)',
+                  boxSizing: 'border-box',
+                }}
+              />
+            </div>
+          )}
+
+          {/* Options */}
+          <div style={{ maxHeight: 220, overflowY: 'auto', padding: '4px' }}>
+            {filtered.length === 0 ? (
+              <div style={{ padding: '10px 12px', fontSize: 12, color: 'var(--text-faint)', textAlign: 'center' }}>—</div>
+            ) : (
+              filtered.map(option => {
+                if (option.isHeader) {
+                  return (
+                    <div key={option.value} style={{
+                      padding: '5px 10px', fontSize: 10, fontWeight: 700, color: 'var(--text-faint)',
+                      textTransform: 'uppercase', letterSpacing: '0.03em',
+                      background: 'var(--bg-tertiary)', borderRadius: 4, margin: '2px 0',
+                    }}>
+                      {option.label}
+                    </div>
+                  )
+                }
+                const isSelected = option.value === value
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => { onChange(option.value); setOpen(false); setSearch('') }}
+                    style={{
+                      width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '7px 10px', borderRadius: 6,
+                      border: 'none', background: isSelected ? 'var(--bg-hover)' : 'transparent',
+                      color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit',
+                      cursor: 'pointer', textAlign: 'left', transition: 'background 0.1s',
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = isSelected ? 'var(--bg-hover)' : 'transparent'}
+                  >
+                    {option.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{option.icon}</span>}
+                    <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{option.label}</span>
+                    {isSelected && <Check size={13} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
+
+      <style>{`
+        @keyframes selectIn {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </div>
+  )
+}

client/src/components/shared/CustomTimePicker.tsx

@@ -0,0 +1,233 @@
+import React, { useState, useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { Clock, ChevronUp, ChevronDown } from 'lucide-react'
+import { useSettingsStore } from '../../store/settingsStore'
+
+function formatDisplay(val: string, is12h: boolean): string {
+  if (!val) return ''
+  const [h, m] = val.split(':').map(Number)
+  if (isNaN(h) || isNaN(m)) return val
+  if (!is12h) return val
+  const period = h >= 12 ? 'PM' : 'AM'
+  const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+  return `${h12}:${String(m).padStart(2, '0')} ${period}`
+}
+
+interface CustomTimePickerProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+export default function CustomTimePicker({ value, onChange, placeholder = '00:00', style = {} }: CustomTimePickerProps) {
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  const [open, setOpen] = useState(false)
+  const [inputFocused, setInputFocused] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const dropRef = useRef<HTMLDivElement>(null)
+
+  const [h, m] = (value || '').split(':').map(Number)
+  const hour = isNaN(h) ? null : h
+  const minute = isNaN(m) ? null : m
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current?.contains(e.target as Node)) return
+      if (dropRef.current?.contains(e.target as Node)) return
+      setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const update = (newH: number, newM: number) => {
+    const hh = String(Math.max(0, Math.min(23, newH))).padStart(2, '0')
+    const mm = String(Math.max(0, Math.min(59, newM))).padStart(2, '0')
+    onChange(`${hh}:${mm}`)
+  }
+
+  const incHour = () => update(((hour ?? -1) + 1) % 24, minute ?? 0)
+  const decHour = () => update(((hour ?? 1) - 1 + 24) % 24, minute ?? 0)
+  const incMin = () => {
+    const newM = ((minute ?? -5) + 5) % 60
+    const newH = newM < (minute ?? 0) ? ((hour ?? 0) + 1) % 24 : (hour ?? 0)
+    update(newH, newM)
+  }
+  const decMin = () => {
+    const newM = ((minute ?? 5) - 5 + 60) % 60
+    const newH = newM > (minute ?? 0) ? ((hour ?? 0) - 1 + 24) % 24 : (hour ?? 0)
+    update(newH, newM)
+  }
+
+  const btnStyle: React.CSSProperties = {
+    background: 'none', border: 'none', cursor: 'pointer', padding: 2,
+    color: 'var(--text-faint)', display: 'flex', borderRadius: 4,
+    transition: 'color 0.15s',
+  }
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value
+    onChange(raw)
+    const clean = raw.replace(/[^0-9:]/g, '')
+    if (/^\d{2}:\d{2}$/.test(clean)) onChange(clean)
+    else if (/^\d{4}$/.test(clean)) onChange(clean.slice(0, 2) + ':' + clean.slice(2))
+    else if (/^\d{1,2}:\d{2}$/.test(clean)) {
+      const [hh, mm] = clean.split(':')
+      onChange(hh.padStart(2, '0') + ':' + mm)
+    }
+  }
+
+  const handleBlur = () => {
+    if (!value) return
+    const clean = value.replace(/[^0-9:]/g, '')
+    if (/^\d{1,2}:\d{2}$/.test(clean)) {
+      const [hh, mm] = clean.split(':')
+      const h = Math.min(23, Math.max(0, parseInt(hh)))
+      const m = Math.min(59, Math.max(0, parseInt(mm)))
+      onChange(String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0'))
+    } else if (/^\d{3,4}$/.test(clean)) {
+      const s = clean.padStart(4, '0')
+      const h = Math.min(23, Math.max(0, parseInt(s.slice(0, 2))))
+      const m = Math.min(59, Math.max(0, parseInt(s.slice(2))))
+      onChange(String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0'))
+    } else if (/^\d{1,2}$/.test(clean)) {
+      const h = Math.min(23, Math.max(0, parseInt(clean)))
+      onChange(String(h).padStart(2, '0') + ':00')
+    }
+  }
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...style }}>
+      <div style={{
+        width: '100%', display: 'flex', alignItems: 'center', gap: 0,
+        borderRadius: 10, border: '1px solid var(--border-primary)',
+        background: 'var(--bg-input)', overflow: 'hidden',
+        transition: 'border-color 0.15s',
+      }}>
+        <input
+          type="text"
+          value={inputFocused ? value : formatDisplay(value, is12h)}
+          onChange={handleInput}
+          onFocus={() => setInputFocused(true)}
+          onBlur={() => { setInputFocused(false); handleBlur() }}
+          placeholder={is12h ? '2:30 PM' : placeholder}
+          style={{
+            flex: 1, border: 'none', outline: 'none', background: 'transparent',
+            padding: '8px 10px 8px 14px', fontSize: 13, fontFamily: 'inherit',
+            color: value ? 'var(--text-primary)' : 'var(--text-faint)',
+            minWidth: 0,
+          }}
+        />
+        <button
+          type="button"
+          onClick={() => setOpen(o => !o)}
+          style={{
+            background: 'none', border: 'none', cursor: 'pointer', padding: '8px 10px',
+            display: 'flex', alignItems: 'center', color: 'var(--text-faint)',
+            transition: 'color 0.15s', flexShrink: 0,
+          }}
+          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+          <Clock size={14} />
+        </button>
+      </div>
+
+      {open && ReactDOM.createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed',
+          top: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.bottom + 4 : 0 })(),
+          left: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.left : 0 })(),
+          zIndex: 99999,
+          background: 'var(--bg-card)', border: '1px solid var(--border-primary)',
+          borderRadius: 12, boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+          padding: 12, display: 'flex', alignItems: 'center', gap: 6,
+          animation: 'selectIn 0.15s ease-out',
+          backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
+        }}>
+          {/* Hours */}
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+            <button type="button" onClick={incHour} style={btnStyle}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronUp size={16} />
+            </button>
+            <div style={{
+              width: 44, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
+              background: 'var(--bg-hover)', borderRadius: 8,
+              fontVariantNumeric: 'tabular-nums',
+            }}>
+              {hour !== null ? (is12h ? String(hour === 0 ? 12 : hour > 12 ? hour - 12 : hour) : String(hour).padStart(2, '0')) : '--'}
+            </div>
+            <button type="button" onClick={decHour} style={btnStyle}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronDown size={16} />
+            </button>
+          </div>
+
+          <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-faint)', marginTop: -2 }}>:</span>
+
+          {/* Minutes */}
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+            <button type="button" onClick={incMin} style={btnStyle}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronUp size={16} />
+            </button>
+            <div style={{
+              width: 44, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
+              background: 'var(--bg-hover)', borderRadius: 8,
+              fontVariantNumeric: 'tabular-nums',
+            }}>
+              {minute !== null ? String(minute).padStart(2, '0') : '--'}
+            </div>
+            <button type="button" onClick={decMin} style={btnStyle}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronDown size={16} />
+            </button>
+          </div>
+
+          {/* AM/PM Toggle */}
+          {is12h && hour !== null && (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, marginLeft: 4 }}>
+              <button type="button" onClick={() => { if (hour < 12) update(hour + 12, minute ?? 0); else update(hour - 12, minute ?? 0) }} style={btnStyle}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <ChevronUp size={16} />
+              </button>
+              <div style={{
+                width: 36, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 14, fontWeight: 700, color: 'var(--text-primary)',
+                background: 'var(--bg-hover)', borderRadius: 8,
+              }}>
+                {hour >= 12 ? 'PM' : 'AM'}
+              </div>
+              <button type="button" onClick={() => { if (hour < 12) update(hour + 12, minute ?? 0); else update(hour - 12, minute ?? 0) }} style={btnStyle}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <ChevronDown size={16} />
+              </button>
+            </div>
+          )}
+
+          {/* Clear */}
+          {value && (
+            <button type="button" onClick={() => { onChange(''); setOpen(false) }}
+              style={{ ...btnStyle, marginLeft: 4, fontSize: 11, color: 'var(--text-faint)', padding: '4px 6px' }}
+              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              ✕
+            </button>
+          )}
+        </div>,
+        document.body
+      )}
+
+      <style>{`@keyframes selectIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }`}</style>
+    </div>
+  )
+}

client/src/components/shared/Modal.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useCallback, useRef } from 'react'
+import { X } from 'lucide-react'
+
+const sizeClasses: Record<string, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-2xl',
+  '2xl': 'max-w-4xl',
+}
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title?: React.ReactNode
+  children?: React.ReactNode
+  size?: string
+  footer?: React.ReactNode
+  hideCloseButton?: boolean
+}
+
+export default function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = 'md',
+  footer,
+  hideCloseButton = false,
+}: ModalProps) {
+  const handleEsc = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+  }, [onClose])
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleEsc)
+      document.body.style.overflow = 'hidden'
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEsc)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen, handleEsc])
+
+  const mouseDownTarget = useRef<EventTarget | null>(null)
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start sm:items-center justify-center px-4 modal-backdrop"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 20, overflow: 'hidden' }}
+      onMouseDown={e => { mouseDownTarget.current = e.target }}
+      onClick={e => {
+        if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) onClose()
+        mouseDownTarget.current = null
+      }}
+    >
+      <div
+        className={`
+          rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
+          flex flex-col max-h-[calc(100vh-90px)]
+          animate-in fade-in zoom-in-95 duration-200
+        `}
+        style={{
+          animation: 'modalIn 0.2s ease-out forwards',
+          background: 'var(--bg-card)',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+          <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
+          {!hideCloseButton && (
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          )}
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="p-6" style={{ borderTop: '1px solid var(--border-secondary)' }}>
+            {footer}
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        @keyframes modalIn {
+          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      `}</style>
+    </div>
+  )
+}

client/src/components/shared/PlaceAvatar.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react'
+import { mapsApi } from '../../api/client'
+import { getCategoryIcon } from './categoryIcons'
+import type { Place } from '../../types'
+
+interface Category {
+  color?: string
+  icon?: string
+}
+
+interface PlaceAvatarProps {
+  place: Pick<Place, 'id' | 'name' | 'image_url' | 'google_place_id' | 'osm_id' | 'lat' | 'lng'>
+  size?: number
+  category?: Category | null
+}
+
+const photoCache = new Map<string, string | null>()
+const photoInFlight = new Set<string>()
+
+export default function PlaceAvatar({ place, size = 32, category }: PlaceAvatarProps) {
+  const [photoSrc, setPhotoSrc] = useState<string | null>(place.image_url || null)
+
+  useEffect(() => {
+    if (place.image_url) { setPhotoSrc(place.image_url); return }
+    const photoId = place.google_place_id || place.osm_id
+    if (!photoId && !(place.lat && place.lng)) { setPhotoSrc(null); return }
+
+    const cacheKey = photoId || `${place.lat},${place.lng}`
+    if (photoCache.has(cacheKey)) {
+      const cached = photoCache.get(cacheKey)
+      if (cached) setPhotoSrc(cached)
+      return
+    }
+
+    if (photoInFlight.has(cacheKey)) {
+      // Another instance is already fetching, wait for it
+      const check = setInterval(() => {
+        if (photoCache.has(cacheKey)) {
+          clearInterval(check)
+          const cached = photoCache.get(cacheKey)
+          if (cached) setPhotoSrc(cached)
+        }
+      }, 200)
+      return () => clearInterval(check)
+    }
+    photoInFlight.add(cacheKey)
+    mapsApi.placePhoto(photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
+      .then((data: { photoUrl?: string }) => {
+        if (data.photoUrl) {
+          photoCache.set(cacheKey, data.photoUrl)
+          setPhotoSrc(data.photoUrl)
+        } else {
+          photoCache.set(cacheKey, null)
+        }
+        photoInFlight.delete(cacheKey)
+      })
+      .catch(() => { photoCache.set(cacheKey, null); photoInFlight.delete(cacheKey) })
+  }, [place.id, place.image_url, place.google_place_id, place.osm_id])
+
+  const bgColor = category?.color || '#6366f1'
+  const IconComp = getCategoryIcon(category?.icon)
+  const iconSize = Math.round(size * 0.46)
+
+  const containerStyle: React.CSSProperties = {
+    width: size, height: size,
+    borderRadius: '50%',
+    overflow: 'hidden',
+    flexShrink: 0,
+    backgroundColor: bgColor,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+  }
+
+  if (photoSrc) {
+    return (
+      <div style={containerStyle}>
+        <img
+          src={photoSrc}
+          alt={place.name}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+          onError={() => setPhotoSrc(null)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div style={containerStyle}>
+      <IconComp size={iconSize} strokeWidth={1.8} color="rgba(255,255,255,0.92)" />
+    </div>
+  )
+}

client/src/components/shared/Toast.tsx

@@ -0,0 +1,156 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
+import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-react'
+
+type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+interface Toast {
+  id: number
+  message: string
+  type: ToastType
+  duration: number
+  removing: boolean
+}
+
+declare global {
+  interface Window {
+    __addToast?: (message: string, type?: ToastType, duration?: number) => number
+  }
+}
+
+let toastIdCounter = 0
+
+const ICON_COLORS: Record<ToastType, string> = {
+  success: '#22c55e',
+  error: '#ef4444',
+  warning: '#f59e0b',
+  info: '#6366f1',
+}
+
+export function ToastContainer() {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const addToast = useCallback((message: string, type: ToastType = 'info', duration: number = 3000) => {
+    const id = ++toastIdCounter
+    setToasts(prev => [...prev, { id, message, type, duration, removing: false }])
+
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts(prev => prev.map(t => t.id === id ? { ...t, removing: true } : t))
+        setTimeout(() => {
+          setToasts(prev => prev.filter(t => t.id !== id))
+        }, 400)
+      }, duration)
+    }
+
+    return id
+  }, [])
+
+  const removeToast = useCallback((id: number) => {
+    setToasts(prev => prev.map(t => t.id === id ? { ...t, removing: true } : t))
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id))
+    }, 400)
+  }, [])
+
+  useEffect(() => {
+    window.__addToast = addToast
+    return () => { delete window.__addToast }
+  }, [addToast])
+
+  const icons: Record<ToastType, React.ReactNode> = {
+    success: <CheckCircle size={18} style={{ color: ICON_COLORS.success, flexShrink: 0 }} />,
+    error: <XCircle size={18} style={{ color: ICON_COLORS.error, flexShrink: 0 }} />,
+    warning: <AlertCircle size={18} style={{ color: ICON_COLORS.warning, flexShrink: 0 }} />,
+    info: <Info size={18} style={{ color: ICON_COLORS.info, flexShrink: 0 }} />,
+  }
+
+  return (
+    <>
+      <style>{`
+        @keyframes toast-in {
+          from { opacity: 0; transform: translateY(16px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes toast-out {
+          from { opacity: 1; transform: translateY(0) scale(1); }
+          to { opacity: 0; transform: translateY(8px) scale(0.95); }
+        }
+        .nomad-toast {
+          background: rgba(255, 255, 255, 0.65);
+          border: 1px solid rgba(0, 0, 0, 0.06);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgba(255,255,255,0.5);
+        }
+        .nomad-toast span { color: rgba(0, 0, 0, 0.8) !important; }
+        .dark .nomad-toast {
+          background: rgba(30, 30, 40, 0.55);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255,255,255,0.08);
+        }
+        .dark .nomad-toast span { color: rgba(255, 255, 255, 0.9) !important; }
+        .nomad-toast-close { color: rgba(0, 0, 0, 0.4); }
+        .dark .nomad-toast-close { color: rgba(255, 255, 255, 0.4); }
+      `}</style>
+      <div style={{
+        position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
+        zIndex: 9999, display: 'flex', flexDirection: 'column-reverse', gap: 8,
+        pointerEvents: 'none', maxWidth: 420, width: '100%', padding: '0 16px',
+      }}>
+        {toasts.map(toast => (
+          <div
+            key={toast.id}
+            className="nomad-toast"
+            style={{
+              display: 'flex', alignItems: 'center', gap: 10,
+              padding: '10px 14px',
+              borderRadius: 14,
+              backdropFilter: 'blur(24px) saturate(180%)',
+              WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+              pointerEvents: 'auto',
+              animation: toast.removing ? 'toast-out 0.35s ease forwards' : 'toast-in 0.35s cubic-bezier(0.16,1,0.3,1) forwards',
+            }}
+          >
+            {icons[toast.type] || icons.info}
+            <span style={{
+              flex: 1, fontSize: 13, fontWeight: 500, color: 'rgba(255, 255, 255, 0.9)',
+              lineHeight: 1.4,
+              fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+            }}>
+              {toast.message}
+            </span>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="nomad-toast-close"
+              style={{
+                background: 'none', border: 'none', cursor: 'pointer',
+                display: 'flex', padding: 2,
+                flexShrink: 0, borderRadius: 6, transition: 'opacity 0.15s',
+                opacity: 0.35,
+              }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.7'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '0.35'}
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export const useToast = () => {
+  const show = useCallback((message: string, type: ToastType, duration?: number) => {
+    if (window.__addToast) {
+      window.__addToast(message, type, duration)
+    }
+  }, [])
+
+  return {
+    success: (message: string, duration?: number) => show(message, 'success', duration),
+    error: (message: string, duration?: number) => show(message, 'error', duration),
+    warning: (message: string, duration?: number) => show(message, 'warning', duration),
+    info: (message: string, duration?: number) => show(message, 'info', duration),
+  }
+}
+
+export default useToast

client/src/components/shared/categoryIcons.ts

@@ -0,0 +1,44 @@
+import {
+  MapPin, Building2, BedDouble, UtensilsCrossed, Landmark, ShoppingBag,
+  Bus, Train, Car, Plane, Ship, Bike,
+  Activity, Dumbbell, Mountain, Tent, Anchor,
+  Coffee, Beer, Wine, Utensils,
+  Camera, Music, Theater, Ticket,
+  TreePine, Waves, Leaf, Flower2, Sun,
+  Globe, Compass, Flag, Navigation, Map,
+  Church, Library, Store, Home, Cross,
+  Heart, Star, CreditCard, Wifi,
+  Luggage, Backpack, Zap,
+  LucideIcon,
+} from 'lucide-react'
+
+export const CATEGORY_ICON_MAP: Record<string, LucideIcon> = {
+  MapPin, Building2, BedDouble, UtensilsCrossed, Landmark, ShoppingBag,
+  Bus, Train, Car, Plane, Ship, Bike,
+  Activity, Dumbbell, Mountain, Tent, Anchor,
+  Coffee, Beer, Wine, Utensils,
+  Camera, Music, Theater, Ticket,
+  TreePine, Waves, Leaf, Flower2, Sun,
+  Globe, Compass, Flag, Navigation, Map,
+  Church, Library, Store, Home, Cross,
+  Heart, Star, CreditCard, Wifi,
+  Luggage, Backpack, Zap,
+}
+
+export const ICON_LABELS: Record<string, string> = {
+  MapPin: 'Pin', Building2: 'Building', BedDouble: 'Hotel', UtensilsCrossed: 'Restaurant',
+  Landmark: 'Attraction', ShoppingBag: 'Shopping', Bus: 'Bus', Train: 'Train',
+  Car: 'Car', Plane: 'Plane', Ship: 'Ship', Bike: 'Bicycle',
+  Activity: 'Activity', Dumbbell: 'Fitness', Mountain: 'Mountain', Tent: 'Camping',
+  Anchor: 'Harbor', Coffee: 'Cafe', Beer: 'Bar', Wine: 'Wine', Utensils: 'Food',
+  Camera: 'Photo', Music: 'Music', Theater: 'Theater', Ticket: 'Events',
+  TreePine: 'Nature', Waves: 'Beach', Leaf: 'Green', Flower2: 'Garden', Sun: 'Sun',
+  Globe: 'World', Compass: 'Explore', Flag: 'Flag', Navigation: 'Navigation', Map: 'Map',
+  Church: 'Church', Library: 'Museum', Store: 'Market', Home: 'Accommodation', Cross: 'Medicine',
+  Heart: 'Favorite', Star: 'Top', CreditCard: 'Bank', Wifi: 'Internet',
+  Luggage: 'Luggage', Backpack: 'Backpack', Zap: 'Adventure',
+}
+
+export function getCategoryIcon(iconName: string | null | undefined): LucideIcon {
+  return (iconName && CATEGORY_ICON_MAP[iconName]) || MapPin
+}

client/src/hooks/useDayNotes.ts

@@ -0,0 +1,78 @@
+import { useState, useRef } from 'react'
+import { useTripStore } from '../store/tripStore'
+import { useToast } from '../components/shared/Toast'
+import type { MergedItem, DayNotesMap, DayNote } from '../types'
+
+interface NoteUiState {
+  mode: 'add' | 'edit'
+  noteId?: number
+  text: string
+  time: string
+  icon: string
+  sortOrder?: number
+}
+
+interface NoteUiMap {
+  [dayId: string]: NoteUiState
+}
+
+export function useDayNotes(tripId: number | string) {
+  const [noteUi, setNoteUi] = useState<NoteUiMap>({})
+  const noteInputRef = useRef<HTMLInputElement | null>(null)
+  const tripStore = useTripStore()
+  const toast = useToast()
+  const dayNotes: DayNotesMap = tripStore.dayNotes || {}
+
+  const openAddNote = (dayId: number, getMergedItems: (dayId: number) => MergedItem[], expandDay?: (dayId: number) => void) => {
+    const merged = getMergedItems(dayId)
+    const maxKey = merged.length > 0 ? Math.max(...merged.map((i) => i.sortKey)) : -1
+    setNoteUi((prev) => ({ ...prev, [dayId]: { mode: 'add', text: '', time: '', icon: 'FileText', sortOrder: maxKey + 1 } }))
+    expandDay?.(dayId)
+    setTimeout(() => noteInputRef.current?.focus(), 50)
+  }
+
+  const openEditNote = (dayId: number, note: DayNote) => {
+    setNoteUi((prev) => ({ ...prev, [dayId]: { mode: 'edit', noteId: note.id, text: note.text, time: note.time || '', icon: note.icon || 'FileText' } }))
+    setTimeout(() => noteInputRef.current?.focus(), 50)
+  }
+
+  const cancelNote = (dayId: number) => {
+    setNoteUi((prev) => { const n = { ...prev }; delete n[dayId]; return n })
+  }
+
+  const saveNote = async (dayId: number) => {
+    const ui = noteUi[dayId]
+    if (!ui?.text?.trim()) return
+    try {
+      if (ui.mode === 'add') {
+        await tripStore.addDayNote(tripId, dayId, { text: ui.text.trim(), time: ui.time || null, icon: ui.icon || 'FileText', sort_order: ui.sortOrder })
+      } else {
+        await tripStore.updateDayNote(tripId, dayId, ui.noteId!, { text: ui.text.trim(), time: ui.time || null, icon: ui.icon || 'FileText' })
+      }
+      cancelNote(dayId)
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }
+
+  const deleteNote = async (dayId: number, noteId: number) => {
+    try { await tripStore.deleteDayNote(tripId, dayId, noteId) }
+    catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }
+
+  const moveNote = async (dayId: number, noteId: number, direction: 'up' | 'down', getMergedItems: (dayId: number) => MergedItem[]) => {
+    const merged = getMergedItems(dayId)
+    const idx = merged.findIndex((i) => i.type === 'note' && (i.data as DayNote).id === noteId)
+    if (idx === -1) return
+    let newSortOrder: number
+    if (direction === 'up') {
+      if (idx === 0) return
+      newSortOrder = idx >= 2 ? (merged[idx - 2].sortKey + merged[idx - 1].sortKey) / 2 : merged[idx - 1].sortKey - 1
+    } else {
+      if (idx >= merged.length - 1) return
+      newSortOrder = idx < merged.length - 2 ? (merged[idx + 1].sortKey + merged[idx + 2].sortKey) / 2 : merged[idx + 1].sortKey + 1
+    }
+    try { await tripStore.updateDayNote(tripId, dayId, noteId, { sort_order: newSortOrder }) }
+    catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }
+
+  return { noteUi, setNoteUi, noteInputRef, dayNotes, openAddNote, openEditNote, cancelNote, saveNote, deleteNote, moveNote }
+}

client/src/hooks/usePlaceSelection.ts

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react'
+
+export function usePlaceSelection() {
+  const [selectedPlaceId, _setSelectedPlaceId] = useState<number | null>(null)
+  const [selectedAssignmentId, setSelectedAssignmentId] = useState<number | null>(null)
+
+  const setSelectedPlaceId = useCallback((placeId: number | null) => {
+    _setSelectedPlaceId(placeId)
+    setSelectedAssignmentId(null)
+  }, [])
+
+  const selectAssignment = useCallback((assignmentId: number | null, placeId: number | null) => {
+    setSelectedAssignmentId(assignmentId)
+    _setSelectedPlaceId(placeId)
+  }, [])
+
+  return { selectedPlaceId, selectedAssignmentId, setSelectedPlaceId, selectAssignment }
+}

client/src/hooks/useResizablePanels.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect, useRef } from 'react'
+
+const MIN_SIDEBAR = 200
+const MAX_SIDEBAR = 520
+
+export function useResizablePanels() {
+  const [leftWidth, setLeftWidth] = useState<number>(() => parseInt(localStorage.getItem('sidebarLeftWidth') || '') || 340)
+  const [rightWidth, setRightWidth] = useState<number>(() => parseInt(localStorage.getItem('sidebarRightWidth') || '') || 300)
+  const [leftCollapsed, setLeftCollapsed] = useState(false)
+  const [rightCollapsed, setRightCollapsed] = useState(false)
+  const isResizingLeft = useRef(false)
+  const isResizingRight = useRef(false)
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (isResizingLeft.current) {
+        const w = Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, e.clientX - 10))
+        setLeftWidth(w)
+        localStorage.setItem('sidebarLeftWidth', String(w))
+      }
+      if (isResizingRight.current) {
+        const w = Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, window.innerWidth - e.clientX - 10))
+        setRightWidth(w)
+        localStorage.setItem('sidebarRightWidth', String(w))
+      }
+    }
+    const onUp = () => {
+      isResizingLeft.current = false
+      isResizingRight.current = false
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+    return () => {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+  }, [])
+
+  const startResizeLeft = () => { isResizingLeft.current = true; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none' }
+  const startResizeRight = () => { isResizingRight.current = true; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none' }
+
+  return { leftWidth, rightWidth, leftCollapsed, rightCollapsed, setLeftCollapsed, setRightCollapsed, startResizeLeft, startResizeRight }
+}

client/src/hooks/useRouteCalculation.ts

@@ -0,0 +1,44 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { useSettingsStore } from '../store/settingsStore'
+import { calculateSegments } from '../components/Map/RouteCalculator'
+import type { TripStoreState } from '../store/tripStore'
+import type { RouteSegment, RouteResult } from '../types'
+
+/**
+ * Manages route calculation state for a selected day. Extracts geo-coded waypoints from
+ * day assignments, draws a straight-line route, and optionally fetches per-segment
+ * driving/walking durations via OSRM. Aborts in-flight requests when the day changes.
+ */
+export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null) {
+  const [route, setRoute] = useState<[number, number][] | null>(null)
+  const [routeInfo, setRouteInfo] = useState<RouteResult | null>(null)
+  const [routeSegments, setRouteSegments] = useState<RouteSegment[]>([])
+  const routeCalcEnabled = useSettingsStore((s) => s.settings.route_calculation) !== false
+  const routeAbortRef = useRef<AbortController | null>(null)
+
+  const updateRouteForDay = useCallback(async (dayId: number | null) => {
+    if (routeAbortRef.current) routeAbortRef.current.abort()
+    if (!dayId) { setRoute(null); setRouteSegments([]); return }
+    const da = (tripStore.assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
+    const waypoints = da.map((a) => a.place).filter((p) => p?.lat && p?.lng)
+    if (waypoints.length < 2) { setRoute(null); setRouteSegments([]); return }
+    setRoute(waypoints.map((p) => [p.lat!, p.lng!]))
+    if (!routeCalcEnabled) { setRouteSegments([]); return }
+    const controller = new AbortController()
+    routeAbortRef.current = controller
+    try {
+      const segments = await calculateSegments(waypoints as { lat: number; lng: number }[], { signal: controller.signal })
+      if (!controller.signal.aborted) setRouteSegments(segments)
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') setRouteSegments([])
+      else if (!(err instanceof Error)) setRouteSegments([])
+    }
+  }, [tripStore, routeCalcEnabled])
+
+  useEffect(() => {
+    if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
+    updateRouteForDay(selectedDayId)
+  }, [selectedDayId, tripStore.assignments])
+
+  return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
+}

client/src/hooks/useTripWebSocket.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react'
+import { useTripStore } from '../store/tripStore'
+import { joinTrip, leaveTrip, addListener, removeListener } from '../api/websocket'
+import type { WebSocketEvent } from '../types'
+
+export function useTripWebSocket(tripId: number | string | undefined) {
+  const tripStore = useTripStore()
+
+  useEffect(() => {
+    if (!tripId) return
+    const handler = useTripStore.getState().handleRemoteEvent
+    joinTrip(tripId)
+    addListener(handler)
+    const collabFileSync = (event: WebSocketEvent) => {
+      if (event?.type === 'collab:note:deleted' || event?.type === 'collab:note:updated') {
+        tripStore.loadFiles?.(tripId)
+      }
+    }
+    addListener(collabFileSync)
+    const localFileSync = () => tripStore.loadFiles?.(tripId)
+    window.addEventListener('collab-files-changed', localFileSync)
+    return () => {
+      leaveTrip(tripId)
+      removeListener(handler)
+      removeListener(collabFileSync)
+      window.removeEventListener('collab-files-changed', localFileSync)
+    }
+  }, [tripId])
+}

client/src/i18n/TranslationContext.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, useContext, useMemo, ReactNode } from 'react'
+import { useSettingsStore } from '../store/settingsStore'
+import de from './translations/de'
+import en from './translations/en'
+
+type TranslationStrings = Record<string, string>
+
+const translations: Record<string, TranslationStrings> = { de, en }
+
+interface TranslationContextValue {
+  t: (key: string, params?: Record<string, string | number>) => string
+  language: string
+  locale: string
+}
+
+const TranslationContext = createContext<TranslationContextValue>({ t: (k: string) => k, language: 'de', locale: 'de-DE' })
+
+interface TranslationProviderProps {
+  children: ReactNode
+}
+
+export function TranslationProvider({ children }: TranslationProviderProps) {
+  const language = useSettingsStore((s) => s.settings.language) || 'de'
+
+  const value = useMemo((): TranslationContextValue => {
+    const strings = translations[language] || translations.de
+    const fallback = translations.de
+
+    function t(key: string, params?: Record<string, string | number>): string {
+      let val: string = strings[key] ?? fallback[key] ?? key
+      if (params) {
+        Object.entries(params).forEach(([k, v]) => {
+          val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v))
+        })
+      }
+      return val
+    }
+
+    return { t, language, locale: language === 'en' ? 'en-US' : 'de-DE' }
+  }, [language])
+
+  return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>
+}
+
+export function useTranslation(): TranslationContextValue {
+  return useContext(TranslationContext)
+}

client/src/i18n/index.ts

@@ -0,0 +1 @@
+export { TranslationProvider, useTranslation } from './TranslationContext'

client/src/index.css

@@ -0,0 +1,482 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html { height: 100%; overflow: hidden; background-color: var(--bg-primary); }
+body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
+
+
+.atlas-tooltip {
+  background: rgba(10, 10, 20, 0.6) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+  color: #f1f5f9 !important;
+  border: 1px solid rgba(255,255,255,0.1) !important;
+  border-radius: 14px !important;
+  padding: 10px 14px !important;
+  font-size: 12px !important;
+  font-family: inherit !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
+  transition: none !important;
+}
+.atlas-tooltip::before { border-top-color: rgba(10, 10, 20, 0.6) !important; }
+html:not(.dark) .atlas-tooltip {
+  background: rgba(255, 255, 255, 0.75) !important;
+  color: #0f172a !important;
+  border: 1px solid rgba(0,0,0,0.08) !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+}
+html:not(.dark) .atlas-tooltip::before { border-top-color: rgba(255, 255, 255, 0.75) !important; }
+.leaflet-tooltip.atlas-tooltip { opacity: 1 !important; }
+.leaflet-tooltip-pane { transition: none !important; }
+.leaflet-fade-anim .leaflet-tooltip { transition: none !important; opacity: 1 !important; }
+
+.dark .leaflet-control-zoom a {
+  background: rgba(10, 10, 20, 0.7) !important;
+  color: #e2e8f0 !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(12px);
+}
+.dark .leaflet-control-zoom a:hover {
+  background: rgba(30, 30, 40, 0.8) !important;
+}
+@media (max-width: 767px) {
+  .leaflet-control-zoom { display: none !important; }
+}
+
+/* Dark mode overrides for pages using hardcoded slate-* Tailwind classes */
+html.dark .bg-slate-50 { background-color: var(--bg-secondary) !important; }
+html.dark .bg-white { background-color: var(--bg-card) !important; }
+html.dark .bg-slate-100 { background-color: var(--bg-secondary) !important; }
+html.dark .bg-slate-900.text-white { background-color: #e2e8f0 !important; color: #0f172a !important; }
+html.dark .border-slate-200, html.dark .border-slate-300 { border-color: var(--border-primary) !important; }
+html.dark .border-slate-100, html.dark .border-b-slate-100 { border-color: var(--border-secondary) !important; }
+html.dark .text-slate-900 { color: var(--text-primary) !important; }
+html.dark .text-slate-700 { color: var(--text-secondary) !important; }
+html.dark .text-slate-600 { color: var(--text-muted) !important; }
+html.dark .text-slate-500 { color: var(--text-muted) !important; }
+html.dark .text-slate-400 { color: var(--text-faint) !important; }
+html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color: var(--bg-hover) !important; }
+html.dark .hover\:text-slate-900:hover { color: var(--text-primary) !important; }
+html.dark .hover\:bg-slate-700:hover { background-color: var(--bg-hover) !important; }
+html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-secondary) !important; }
+html.dark .focus\:ring-slate-400:focus { --tw-ring-color: var(--text-faint) !important; }
+html.dark input[class*="border-slate"], html.dark input[class*="text-slate"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-primary) !important; }
+html.dark .text-amber-900 { color: #fbbf24 !important; }
+html.dark .text-amber-700 { color: #f59e0b !important; }
+html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.1) !important; }
+html.dark .border-amber-200 { border-color: rgba(245,158,11,0.2) !important; }
+html.dark .disabled\:bg-slate-400:disabled { background-color: var(--text-faint) !important; }
+html.dark button.bg-slate-900 { background-color: #e2e8f0 !important; color: #0f172a !important; opacity: 1 !important; }
+html.dark button.bg-slate-900:hover { background-color: #cbd5e1 !important; }
+html.dark button.bg-slate-900:disabled { background-color: #ffffff !important; color: #000000 !important; opacity: 0.4 !important; }
+html.dark span.bg-slate-900 { background-color: #e2e8f0 !important; color: #0f172a !important; }
+html.dark span.bg-slate-100 { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; }
+html.dark .border-b { border-bottom-color: var(--border-secondary) !important; }
+/* Gray variants (CategoryManager, BackupPanel) */
+html.dark .bg-gray-50 { background-color: var(--bg-secondary) !important; }
+html.dark .bg-gray-100 { background-color: var(--bg-secondary) !important; }
+html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--border-primary) !important; }
+html.dark .border-gray-100 { border-color: var(--border-secondary) !important; }
+html.dark .text-gray-900 { color: var(--text-primary) !important; }
+html.dark .text-gray-700 { color: var(--text-secondary) !important; }
+html.dark .text-gray-600 { color: var(--text-muted) !important; }
+html.dark .text-gray-500 { color: var(--text-muted) !important; }
+html.dark .text-gray-400 { color: var(--text-faint) !important; }
+html.dark .text-gray-300 { color: var(--text-faint) !important; }
+html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-200:hover { background-color: var(--bg-hover) !important; }
+html.dark .hover\:border-gray-200:hover, html.dark .hover\:border-gray-400:hover { border-color: var(--border-primary) !important; }
+html.dark input.bg-white, html.dark input[class*="bg-white"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
+html.dark .bg-gray-200 { background-color: var(--border-primary) !important; }
+html.dark .border-gray-300.border-t-slate-600 { border-color: var(--border-primary) !important; border-top-color: var(--text-primary) !important; }
+/* Modal buttons */
+html.dark button[class*="text-slate-600"][class*="border-slate-200"] { color: var(--text-muted) !important; border-color: var(--border-primary) !important; }
+html.dark button[class*="text-slate-600"][class*="border-slate-200"]:hover { background: var(--bg-hover) !important; }
+/* Dashed borders */
+html.dark .border-dashed.border-gray-300 { border-color: var(--border-primary) !important; }
+html.dark .bg-slate-50\/60, html.dark [class*="bg-slate-50/"] { background-color: transparent !important; }
+
+/* Reorder buttons: desktop = original style; mobile = always visible, larger touch targets */
+.reorder-buttons {
+  flex-direction: column;
+  opacity: 0;
+}
+.reorder-buttons button {
+  background: none !important;
+  padding: 1px 2px;
+}
+@media (max-width: 767px) {
+  .reorder-buttons {
+    flex-direction: row !important;
+    opacity: 1 !important;
+    align-items: center;
+    margin-left: auto;
+  }
+  .reorder-buttons button {
+    background: var(--bg-tertiary) !important;
+    border-radius: 6px;
+    width: 32px;
+    height: 32px;
+    padding: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+  .note-edit-buttons {
+    opacity: 1 !important;
+  }
+}
+
+/* Ort-Zeile Hover: Sortier-Buttons anzeigen */
+.place-row:hover .reorder-btns {
+  opacity: 1 !important;
+}
+
+/* Ladeanimation */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Design tokens ─────────────────────────────── */
+:root {
+  --safe-top: env(safe-area-inset-top, 0px);
+  --nav-h: calc(56px + var(--safe-top));
+  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-6: 24px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.1);
+
+  /* Theme colors */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --bg-elevated: rgba(250,250,250,0.82);
+  --bg-card: #ffffff;
+  --bg-input: #ffffff;
+  --bg-hover: rgba(0,0,0,0.03);
+  --text-primary: #111827;
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-faint: #9ca3af;
+  --border-primary: #e5e7eb;
+  --border-secondary: #f3f4f6;
+  --border-faint: rgba(0,0,0,0.06);
+  --accent: #111827;
+  --accent-text: #ffffff;
+  --sidebar-bg: rgba(250,250,250,0.82);
+  --sidebar-shadow: 0 4px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
+  --tooltip-bg: rgba(255,255,255,0.96);
+  --scrollbar-track: #f1f5f9;
+  --scrollbar-thumb: #d1d5db;
+  --scrollbar-hover: #9ca3af;
+}
+
+.dark {
+  --bg-primary: #121215;
+  --bg-secondary: #1a1a1e;
+  --bg-tertiary: #1c1c21;
+  --bg-elevated: rgba(19,19,22,0.82);
+  --bg-card: #131316;
+  --bg-input: #1c1c21;
+  --bg-hover: rgba(255,255,255,0.06);
+  --text-primary: #f4f4f5;
+  --text-secondary: #d4d4d8;
+  --text-muted: #a1a1aa;
+  --text-faint: #71717a;
+  --border-primary: #27272a;
+  --border-secondary: #1c1c21;
+  --border-faint: rgba(255,255,255,0.07);
+  --accent: #e4e4e7;
+  --accent-text: #09090b;
+  --sidebar-bg: rgba(19,19,22,0.82);
+  --sidebar-shadow: 0 4px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
+  --tooltip-bg: rgba(19,19,22,0.96);
+  --scrollbar-track: #131316;
+  --scrollbar-thumb: #3f3f46;
+  --scrollbar-hover: #52525b;
+}
+
+body {
+  font-family: var(--font-system);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.2s, color 0.2s;
+}
+
+/* ── Marker cluster custom styling ────────────── */
+.marker-cluster-wrapper {
+  background: transparent !important;
+  border: none !important;
+}
+
+.marker-cluster-custom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #111827;
+  border: 2.5px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(17, 24, 39, 0.15);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.marker-cluster-custom:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(17, 24, 39, 0.2);
+}
+
+.marker-cluster-custom span {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1;
+}
+
+/* Hide default markercluster styles we don't need */
+.marker-cluster-small,
+.marker-cluster-medium,
+.marker-cluster-large {
+  background: transparent !important;
+}
+.marker-cluster-small div,
+.marker-cluster-medium div,
+.marker-cluster-large div {
+  background: transparent !important;
+}
+
+/* ── Leaflet z-index ───────────────────────────── */
+.leaflet-container {
+  z-index: 0;
+}
+.leaflet-pane {
+  z-index: 0 !important;
+}
+.leaflet-top, .leaflet-bottom {
+  z-index: 1 !important;
+}
+
+/* ── iOS-style map tooltip ─────────────────────── */
+.leaflet-tooltip.map-tooltip {
+  background: var(--tooltip-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: none;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-elevated);
+  padding: 6px 10px;
+  font-family: var(--font-system);
+  pointer-events: none;
+  color: var(--text-primary);
+}
+.leaflet-tooltip.map-tooltip::before {
+  border-right-color: var(--tooltip-bg);
+}
+.leaflet-tooltip-left.map-tooltip::before {
+  border-left-color: var(--tooltip-bg);
+}
+
+/* Scrollbalken */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-hover);
+}
+
+.route-info-pill { background: none !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
+.chat-scroll { overflow-y: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+.chat-scroll::-webkit-scrollbar { width: 0; background: transparent; }
+
+
+/* Einheitliche Formular-Inputs */
+.form-input {
+  width: 100%;
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  color: var(--text-primary);
+  background: var(--bg-input);
+  transition: border-color 0.15s;
+}
+.form-input:focus {
+  border-color: var(--text-faint);
+}
+.form-input::placeholder {
+  color: var(--text-faint);
+}
+
+/* Brand images: no save/copy/drag */
+img[alt="TREK"] {
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+}
+
+/* Weiche Übergänge */
+.transition-smooth {
+  transition: all 0.2s ease;
+}
+
+
+
+/* Tagesliste */
+.day-list-item {
+  transition: background-color 0.15s ease;
+}
+
+.day-list-item:hover {
+  background-color: var(--bg-secondary);
+}
+
+.day-list-item.active {
+  background-color: #4f46e5;
+  color: white;
+}
+
+.scroll-container {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* ── Dark-Mode: Tailwind-Klassen ─────────────── */
+.dark .bg-slate-50 { background-color: #131316 !important; }
+.dark .bg-slate-100 { background-color: #1c1c21 !important; }
+.dark .bg-white { background-color: #09090b !important; }
+.dark .bg-gray-50 { background-color: #131316 !important; }
+.dark .bg-gray-100 { background-color: #1c1c21 !important; }
+.dark .text-slate-900, .dark .text-gray-900, .dark .text-slate-800 { color: #f4f4f5 !important; }
+.dark .text-slate-700, .dark .text-gray-700 { color: #d4d4d8 !important; }
+.dark .text-slate-600, .dark .text-gray-600 { color: #a1a1aa !important; }
+.dark .text-slate-500, .dark .text-gray-500 { color: #a1a1aa !important; }
+.dark .text-slate-400, .dark .text-gray-400 { color: #71717a !important; }
+.dark .border-slate-200, .dark .border-gray-200, .dark .border-slate-300 { border-color: #27272a !important; }
+.dark .border-gray-100, .dark .border-slate-100 { border-color: #1c1c21 !important; }
+.dark .hover\:bg-slate-50:hover, .dark .hover\:bg-gray-50:hover { background-color: #1c1c21 !important; }
+.dark .bg-slate-50\/60 { background-color: transparent !important; }
+.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #27272a !important; }
+.dark .bg-slate-100 { background-color: #27272a !important; }
+.dark .bg-slate-900 { background-color: #e4e4e7 !important; color: #09090b !important; }
+.dark .hover\:bg-slate-700:hover { background-color: #d4d4d8 !important; color: #09090b !important; }
+.dark input, .dark textarea, .dark select {
+  background-color: #1c1c21;
+  color: #f4f4f5;
+  border-color: #27272a;
+}
+.dark input::placeholder, .dark textarea::placeholder { color: #71717a; }
+.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.15) !important; }
+.dark .bg-red-50 { background-color: rgba(239,68,68,0.15) !important; }
+
+/* Ladebildschirm */
+.dark .min-h-screen { background-color: var(--bg-primary) !important; }
+
+/* Modal-Hintergrund */
+.dark .modal-backdrop { background: rgba(0,0,0,0.6); }
+
+/* ── Dark: Fallback für Komponenten die noch nicht auf CSS-Variablen umgestellt sind ── */
+.dark {
+  color-scheme: dark;
+}
+
+/* Scroll-Container */
+.scroll-container {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d5db #f1f5f9;
+}
+
+/* Toast-Animationen */
+@keyframes slide-in-right {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slide-out-right {
+  from { transform: translateX(0); opacity: 1; }
+  to { transform: translateX(100%); opacity: 0; }
+}
+
+.toast-enter {
+  animation: slide-in-right 0.3s ease-out forwards;
+}
+
+.toast-exit {
+  animation: slide-out-right 0.3s ease-in forwards;
+}
+
+/* Modal-Hintergrund */
+.modal-backdrop {
+  backdrop-filter: blur(4px);
+}
+
+/* Fortschrittsbalken */
+@keyframes progress-fill {
+  from { width: 0; }
+  to { width: var(--progress); }
+}
+
+/* Anmeldeseiten-Gradient */
+.auth-gradient {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Bildanzeige-Overlay */
+.lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.95);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Markdown in Collab Notes */
+.collab-note-md strong, .collab-note-md-full strong { font-weight: 700 !important; }
+.collab-note-md em, .collab-note-md-full em { font-style: italic !important; }
+.collab-note-md h1, .collab-note-md h2, .collab-note-md h3 { font-weight: 700 !important; margin: 0; }
+.collab-note-md-full h1 { font-size: 1.3em !important; font-weight: 700 !important; margin: 0.8em 0 0.3em; }
+.collab-note-md-full h2 { font-size: 1.15em !important; font-weight: 700 !important; margin: 0.8em 0 0.3em; }
+.collab-note-md-full h3 { font-size: 1em !important; font-weight: 700 !important; margin: 0.8em 0 0.3em; }
+.collab-note-md p, .collab-note-md-full p { margin: 0 0 0.3em; }
+.collab-note-md ul, .collab-note-md-full ul { list-style-type: disc !important; padding-left: 1.4em !important; margin: 0.2em 0; }
+.collab-note-md ol, .collab-note-md-full ol { list-style-type: decimal !important; padding-left: 1.4em !important; margin: 0.2em 0; }
+.collab-note-md li, .collab-note-md-full li { display: list-item !important; margin: 0.1em 0; }
+.collab-note-md code, .collab-note-md-full code { font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--bg-secondary); }
+.collab-note-md-full pre { padding: 10px 12px; border-radius: 8px; background: var(--bg-secondary); overflow-x: auto; margin: 0.5em 0; }
+.collab-note-md-full pre code { padding: 0; background: none; }
+.collab-note-md a, .collab-note-md-full a { color: #3b82f6; text-decoration: underline; }
+.collab-note-md blockquote, .collab-note-md-full blockquote { border-left: 3px solid var(--border-primary); padding-left: 12px; margin: 0.5em 0; color: var(--text-muted); }
+.collab-note-md-full table { border-collapse: collapse; width: 100%; margin: 0.5em 0; }
+.collab-note-md-full th, .collab-note-md-full td { border: 1px solid var(--border-primary); padding: 4px 8px; font-size: 0.9em; }
+.collab-note-md-full hr { border: none; border-top: 1px solid var(--border-primary); margin: 0.8em 0; }

client/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

client/src/pages/AtlasPage.tsx

@@ -0,0 +1,518 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from '../i18n'
+import { useSettingsStore } from '../store/settingsStore'
+import Navbar from '../components/Layout/Navbar'
+import apiClient from '../api/client'
+import { Globe, MapPin, Briefcase, Calendar, Flag, ChevronRight, PanelLeftOpen, PanelLeftClose, X } from 'lucide-react'
+import L from 'leaflet'
+import type { AtlasPlace, GeoJsonFeatureCollection, TranslationFn } from '../types'
+
+// Convert country code to flag emoji
+interface AtlasCountry {
+  code: string
+  tripCount: number
+  placeCount: number
+  firstVisit?: string | null
+  lastVisit?: string | null
+}
+
+interface AtlasStats {
+  totalTrips: number
+  totalPlaces: number
+  totalCountries: number
+  totalDays: number
+  totalCities?: number
+}
+
+interface AtlasData {
+  countries: AtlasCountry[]
+  stats: AtlasStats
+  mostVisited?: AtlasCountry | null
+  continents?: Record<string, number>
+  lastTrip?: { id: number; title: string; countryCode?: string } | null
+  nextTrip?: { id: number; title: string; countryCode?: string } | null
+  streak?: number
+  firstYear?: number
+  tripsThisYear?: number
+}
+
+interface CountryDetail {
+  places: AtlasPlace[]
+  trips: { id: number; title: string }[]
+}
+
+function MobileStats({ data, stats, countries, resolveName, t, dark }: { data: AtlasData | null; stats: AtlasStats; countries: AtlasCountry[]; resolveName: (code: string) => string; t: TranslationFn; dark: boolean }): React.ReactElement {
+  const tp = dark ? '#f1f5f9' : '#0f172a'
+  const tf = dark ? '#475569' : '#94a3b8'
+  const { continents, lastTrip, nextTrip, streak, firstYear, tripsThisYear } = data || {}
+  const CL = { 'Europe': t('atlas.europe'), 'Asia': t('atlas.asia'), 'North America': t('atlas.northAmerica'), 'South America': t('atlas.southAmerica'), 'Africa': t('atlas.africa'), 'Oceania': t('atlas.oceania') }
+  const thisYear = new Date().getFullYear()
+
+  return (
+    <div className="space-y-4">
+      {/* Stats grid */}
+      <div className="grid grid-cols-5 gap-2">
+        {[[stats.totalCountries, t('atlas.countries')], [stats.totalTrips, t('atlas.trips')], [stats.totalPlaces, t('atlas.places')], [stats.totalCities || 0, t('atlas.cities')], [stats.totalDays, t('atlas.days')]].map(([v, l], i) => (
+          <div key={i} className="text-center py-2">
+            <p className="text-xl font-black tabular-nums" style={{ color: tp }}>{v}</p>
+            <p className="text-[9px] font-semibold uppercase tracking-wide" style={{ color: tf }}>{l}</p>
+          </div>
+        ))}
+      </div>
+      {/* Continents */}
+      <div className="grid grid-cols-6 gap-1">
+        {['Europe', 'Asia', 'North America', 'South America', 'Africa', 'Oceania'].map(cont => {
+          const count = continents?.[cont] || 0
+          return (
+            <div key={cont} className="text-center py-1">
+              <p className="text-base font-bold tabular-nums" style={{ color: count > 0 ? tp : (dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.12)') }}>{count}</p>
+              <p className="text-[8px] font-semibold uppercase" style={{ color: count > 0 ? tf : (dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)') }}>{CL[cont]}</p>
+            </div>
+          )
+        })}
+      </div>
+      {/* Highlights */}
+      <div className="flex gap-3">
+        {streak > 0 && (
+          <div className="text-center flex-1 py-2">
+            <p className="text-xl font-black tabular-nums" style={{ color: tp }}>{streak}</p>
+            <p className="text-[9px] font-semibold uppercase tracking-wide" style={{ color: tf }}>{streak === 1 ? t('atlas.yearInRow') : t('atlas.yearsInRow')}</p>
+          </div>
+        )}
+        {tripsThisYear > 0 && (
+          <div className="text-center flex-1 py-2">
+            <p className="text-xl font-black tabular-nums" style={{ color: tp }}>{tripsThisYear}</p>
+            <p className="text-[9px] font-semibold uppercase tracking-wide" style={{ color: tf }}>{tripsThisYear === 1 ? t('atlas.tripIn') : t('atlas.tripsIn')} {thisYear}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function countryCodeToFlag(code: string): string {
+  if (!code || code.length !== 2) return ''
+  return String.fromCodePoint(...[...code.toUpperCase()].map(c => 0x1F1E6 + c.charCodeAt(0) - 65))
+}
+
+function useCountryNames(language: string): (code: string) => string {
+  const [resolver, setResolver] = useState<(code: string) => string>(() => (code: string) => code)
+  useEffect(() => {
+    try {
+      const dn = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' })
+      setResolver(() => (code: string) => { try { return dn.of(code) || code } catch { return code } })
+    } catch { /* */ }
+  }, [language])
+  return resolver
+}
+
+// Map visited country codes to ISO-3166 alpha3 (GeoJSON uses alpha3)
+const A2_TO_A3: Record<string, string> = {"AF":"AFG","AL":"ALB","DZ":"DZA","AD":"AND","AO":"AGO","AR":"ARG","AM":"ARM","AU":"AUS","AT":"AUT","AZ":"AZE","BR":"BRA","BE":"BEL","BG":"BGR","CA":"CAN","CL":"CHL","CN":"CHN","CO":"COL","HR":"HRV","CZ":"CZE","DK":"DNK","EG":"EGY","EE":"EST","FI":"FIN","FR":"FRA","DE":"DEU","GR":"GRC","HU":"HUN","IS":"ISL","IN":"IND","ID":"IDN","IR":"IRN","IQ":"IRQ","IE":"IRL","IL":"ISR","IT":"ITA","JP":"JPN","KE":"KEN","KR":"KOR","LV":"LVA","LT":"LTU","LU":"LUX","MY":"MYS","MX":"MEX","MA":"MAR","NL":"NLD","NZ":"NZL","NO":"NOR","PK":"PAK","PE":"PER","PH":"PHL","PL":"POL","PT":"PRT","RO":"ROU","RU":"RUS","SA":"SAU","RS":"SRB","SK":"SVK","SI":"SVN","ZA":"ZAF","ES":"ESP","SE":"SWE","CH":"CHE","TH":"THA","TR":"TUR","UA":"UKR","AE":"ARE","GB":"GBR","US":"USA","VN":"VNM","NG":"NGA"}
+
+export default function AtlasPage(): React.ReactElement {
+  const { t, language } = useTranslation()
+  const { settings } = useSettingsStore()
+  const navigate = useNavigate()
+  const resolveName = useCountryNames(language)
+  const dm = settings.dark_mode
+  const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const mapRef = useRef<HTMLDivElement>(null)
+  const mapInstance = useRef<L.Map | null>(null)
+  const geoLayerRef = useRef<L.GeoJSON | null>(null)
+  const glareRef = useRef<HTMLDivElement>(null)
+  const borderGlareRef = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const handlePanelMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
+    if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
+    const rect = panelRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    // Subtle inner glow
+    glareRef.current.style.background = `radial-gradient(circle 300px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.25)'} 0%, transparent 70%)`
+    glareRef.current.style.opacity = '1'
+    // Border glow that follows cursor
+    borderGlareRef.current.style.opacity = '1'
+    borderGlareRef.current.style.maskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+    borderGlareRef.current.style.WebkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+  }
+  const handlePanelMouseLeave = () => {
+    if (glareRef.current) glareRef.current.style.opacity = '0'
+    if (borderGlareRef.current) borderGlareRef.current.style.opacity = '0'
+  }
+
+  const [data, setData] = useState<AtlasData | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [sidebarOpen, setSidebarOpen] = useState<boolean>(true)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState<boolean>(false)
+  const [selectedCountry, setSelectedCountry] = useState<string | null>(null)
+  const [countryDetail, setCountryDetail] = useState<CountryDetail | null>(null)
+  const [geoData, setGeoData] = useState<GeoJsonFeatureCollection | null>(null)
+
+  // Load atlas data
+  useEffect(() => {
+    apiClient.get('/addons/atlas/stats').then(r => {
+      setData(r.data)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [])
+
+  // Load GeoJSON world data (direct GeoJSON, no conversion needed)
+  useEffect(() => {
+    fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson')
+      .then(r => r.json())
+      .then(geo => setGeoData(geo))
+      .catch(() => {})
+  }, [])
+
+  // Initialize map — runs after loading is done and mapRef is available
+  useEffect(() => {
+    if (loading || !mapRef.current) return
+    if (mapInstance.current) { mapInstance.current.remove(); mapInstance.current = null }
+
+    const map = L.map(mapRef.current, {
+      center: [25, 0],
+      zoom: 3,
+      minZoom: 3,
+      maxZoom: 7,
+      zoomControl: false,
+      attributionControl: false,
+      maxBounds: [[-90, -220], [90, 220]],
+      maxBoundsViscosity: 1.0,
+      fadeAnimation: false,
+      preferCanvas: true,
+    })
+
+    L.control.zoom({ position: 'bottomright' }).addTo(map)
+
+    const tileUrl = dark
+      ? 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png'
+      : 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png'
+
+    L.tileLayer(tileUrl, {
+      maxZoom: 8,
+      keepBuffer: 25,
+      updateWhenZooming: true,
+      updateWhenIdle: false,
+      tileSize: 256,
+      zoomOffset: 0,
+      crossOrigin: true,
+      loading: true,
+    }).addTo(map)
+
+    // Preload adjacent zoom level tiles
+    L.tileLayer(tileUrl, {
+      maxZoom: 8,
+      keepBuffer: 10,
+      opacity: 0,
+      tileSize: 256,
+      crossOrigin: true,
+    }).addTo(map)
+
+    mapInstance.current = map
+    return () => { map.remove(); mapInstance.current = null }
+  }, [dark, loading])
+
+  // Render GeoJSON countries
+  useEffect(() => {
+    if (!mapInstance.current || !geoData || !data) return
+
+    const visitedA3 = new Set(data.countries.map(c => A2_TO_A3[c.code]).filter(Boolean))
+    const countryMap = {}
+    data.countries.forEach(c => { if (A2_TO_A3[c.code]) countryMap[A2_TO_A3[c.code]] = c })
+
+    if (geoLayerRef.current) {
+      mapInstance.current.removeLayer(geoLayerRef.current)
+    }
+
+    // Generate deterministic color per country code
+    const VISITED_COLORS = ['#6366f1','#ec4899','#14b8a6','#f97316','#8b5cf6','#ef4444','#3b82f6','#22c55e','#06b6d4','#f43f5e','#a855f7','#10b981','#0ea5e9','#e11d48','#0d9488','#7c3aed','#2563eb','#dc2626','#059669','#d946ef']
+    // Assign colors in order of visit (by index in countries array) so no two neighbors share a color easily
+    const visitedA3List = [...visitedA3]
+    const colorMap = {}
+    visitedA3List.forEach((a3, i) => { colorMap[a3] = VISITED_COLORS[i % VISITED_COLORS.length] })
+    const colorForCode = (a3) => colorMap[a3] || VISITED_COLORS[0]
+
+    const canvasRenderer = L.canvas({ padding: 0.5, tolerance: 5 })
+
+    geoLayerRef.current = L.geoJSON(geoData, {
+      renderer: canvasRenderer,
+      interactive: true,
+      bubblingMouseEvents: false,
+      style: (feature) => {
+        const a3 = feature.properties?.ISO_A3 || feature.properties?.ADM0_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
+        const visited = visitedA3.has(a3)
+        return {
+          fillColor: visited ? colorForCode(a3) : (dark ? '#1e1e2e' : '#e2e8f0'),
+          fillOpacity: visited ? 0.7 : 0.3,
+          color: dark ? '#333' : '#cbd5e1',
+          weight: 0.5,
+        }
+      },
+      onEachFeature: (feature, layer) => {
+        const a3 = feature.properties?.ISO_A3 || feature.properties?.ADM0_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
+        const c = countryMap[a3]
+        if (c) {
+          const name = resolveName(c.code)
+          const formatDate = (d) => { if (!d) return '—'; const dt = new Date(d); return dt.toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { month: 'short', year: 'numeric' }) }
+          const tooltipHtml = `
+            <div style="display:flex;flex-direction:column;gap:8px;min-width:160px">
+              <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding-bottom:6px;border-bottom:1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}">${name}</div>
+              <div style="display:flex;gap:14px">
+                <div><span style="font-size:16px;font-weight:800">${c.tripCount}</span> <span style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:0.05em">${c.tripCount === 1 ? t('atlas.tripSingular') : t('atlas.tripPlural')}</span></div>
+                <div><span style="font-size:16px;font-weight:800">${c.placeCount}</span> <span style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:0.05em">${c.placeCount === 1 ? t('atlas.placeVisited') : t('atlas.placesVisited')}</span></div>
+              </div>
+              <div style="display:flex;gap:2px;border-top:1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'};padding-top:8px">
+                <div style="flex:1;display:flex;flex-direction:column;gap:2px">
+                  <span style="font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.4">${t('atlas.firstVisit')}</span>
+                  <span style="font-size:12px;font-weight:700">${formatDate(c.firstVisit)}</span>
+                </div>
+                <div style="flex:1;display:flex;flex-direction:column;gap:2px">
+                  <span style="font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.4">${t('atlas.lastVisitLabel')}</span>
+                  <span style="font-size:12px;font-weight:700">${formatDate(c.lastVisit)}</span>
+                </div>
+              </div>
+              </div>
+            </div>`
+          layer.bindTooltip(tooltipHtml, {
+            sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+          })
+          layer.on('click', () => loadCountryDetail(c.code))
+          layer.on('mouseover', (e) => {
+            e.target.setStyle({ fillOpacity: 0.9, weight: 2, color: dark ? '#818cf8' : '#4f46e5' })
+          })
+          layer.on('mouseout', (e) => {
+            geoLayerRef.current.resetStyle(e.target)
+          })
+        }
+      }
+    }).addTo(mapInstance.current)
+  }, [geoData, data, dark])
+
+  const loadCountryDetail = async (code: string): Promise<void> => {
+    setSelectedCountry(code)
+    try {
+      const r = await apiClient.get(`/addons/atlas/country/${code}`)
+      setCountryDetail(r.data)
+    } catch { /* */ }
+  }
+
+  const stats = data?.stats || { totalTrips: 0, totalPlaces: 0, totalCountries: 0, totalDays: 0 }
+  const countries = data?.countries || []
+
+  if (loading) {
+    return (
+      <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+        <Navbar />
+        <div className="flex items-center justify-center" style={{ paddingTop: 'var(--nav-h)', minHeight: 'calc(100vh - var(--nav-h))' }}>
+          <div className="w-8 h-8 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+      <Navbar />
+      <div style={{ position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0 }}>
+        {/* Map */}
+        <div ref={mapRef} style={{ position: 'absolute', inset: 0, zIndex: 1, background: dark ? '#1a1a2e' : '#f0f0f0' }} />
+
+        {/* Mobile: Bottom bar */}
+        <div className="md:hidden absolute bottom-3 left-0 right-0 z-10 flex justify-center" style={{ touchAction: 'manipulation' }}>
+          <div className="flex items-center gap-4 px-5 py-4 rounded-2xl"
+            style={{ background: dark ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.5)', backdropFilter: 'blur(16px)' }}>
+            {/* Countries highlighted */}
+            <div className="text-center px-3 py-1.5 rounded-xl" style={{ background: dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)' }}>
+              <p className="text-3xl font-black tabular-nums leading-none" style={{ color: 'var(--text-primary)' }}>{stats.totalCountries}</p>
+              <p className="text-[9px] font-semibold uppercase tracking-wide mt-1" style={{ color: 'var(--text-faint)' }}>{t('atlas.countries')}</p>
+            </div>
+            {[[stats.totalTrips, t('atlas.trips')], [stats.totalPlaces, t('atlas.places')], [stats.totalCities || 0, t('atlas.cities')], [stats.totalDays, t('atlas.days')]].map(([v, l], i) => (
+              <div key={i} className="text-center px-1">
+                <p className="text-xl font-black tabular-nums leading-none" style={{ color: 'var(--text-primary)' }}>{v}</p>
+                <p className="text-[9px] font-semibold uppercase tracking-wide mt-1" style={{ color: 'var(--text-faint)' }}>{l}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Desktop Panel — bottom center, glass effect */}
+        <div
+          ref={panelRef}
+          onMouseMove={handlePanelMouseMove}
+          onMouseLeave={handlePanelMouseLeave}
+          className="hidden md:flex flex-col absolute z-10 overflow-hidden transition-all duration-300"
+          style={{
+            bottom: 16,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: 'fit-content',
+            background: dark ? 'rgba(10,10,15,0.55)' : 'rgba(255,255,255,0.2)',
+            backdropFilter: 'blur(24px) saturate(180%)',
+            WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+            border: '1px solid ' + (dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'),
+            borderRadius: 20,
+            boxShadow: dark
+              ? '0 8px 32px rgba(0,0,0,0.3)'
+              : '0 8px 32px rgba(0,0,0,0.08)',
+          }}
+        >
+          {/* Liquid glass glare effect */}
+          <div ref={glareRef} className="absolute inset-0 pointer-events-none" style={{ opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20 }} />
+          {/* Border glow that follows cursor */}
+          <div ref={borderGlareRef} className="absolute inset-0 pointer-events-none" style={{
+            opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20,
+            border: dark ? '1.5px solid rgba(255,255,255,0.5)' : '2px solid rgba(0,0,0,0.15)',
+          }} />
+          <SidebarContent
+            data={data} stats={stats} countries={countries} selectedCountry={selectedCountry}
+            countryDetail={countryDetail} resolveName={resolveName}
+            onCountryClick={loadCountryDetail} onTripClick={(id) => navigate(`/trips/${id}`)}
+            t={t} dark={dark}
+          />
+        </div>
+
+
+      </div>
+    </div>
+  )
+}
+
+interface SidebarContentProps {
+  data: AtlasData | null
+  stats: AtlasStats
+  countries: AtlasCountry[]
+  selectedCountry: string | null
+  countryDetail: CountryDetail | null
+  resolveName: (code: string) => string
+  onCountryClick: (code: string) => void
+  onTripClick: (id: number) => void
+  t: TranslationFn
+  dark: boolean
+}
+
+function SidebarContent({ data, stats, countries, selectedCountry, countryDetail, resolveName, onCountryClick, onTripClick, t, dark }: SidebarContentProps): React.ReactElement {
+  const bg = (o) => dark ? `rgba(255,255,255,${o})` : `rgba(0,0,0,${o})`
+  const tp = dark ? '#f1f5f9' : '#0f172a'
+  const tm = dark ? '#94a3b8' : '#64748b'
+  const tf = dark ? '#475569' : '#94a3b8'
+  const accent = '#818cf8'
+
+  const { mostVisited, continents, lastTrip, nextTrip, streak, firstYear, tripsThisYear } = data || {}
+  const contEntries = continents ? Object.entries(continents).sort((a, b) => b[1] - a[1]) : []
+  const maxCont = contEntries.length > 0 ? contEntries[0][1] : 1
+  const CL = { 'Europe': t('atlas.europe'), 'Asia': t('atlas.asia'), 'North America': t('atlas.northAmerica'), 'South America': t('atlas.southAmerica'), 'Africa': t('atlas.africa'), 'Oceania': t('atlas.oceania') }
+  const contColors = ['#818cf8', '#f472b6', '#34d399', '#fbbf24', '#fb923c', '#22d3ee']
+
+  if (countries.length === 0 && !lastTrip) {
+    return (
+      <div className="p-8 text-center">
+        <Globe size={28} className="mx-auto mb-2" style={{ color: tf, opacity: 0.4 }} />
+        <p className="text-sm font-medium" style={{ color: tm }}>{t('atlas.noData')}</p>
+        <p className="text-xs mt-1" style={{ color: tf }}>{t('atlas.noDataHint')}</p>
+      </div>
+    )
+  }
+
+  const thisYear = new Date().getFullYear()
+  const divider = `2px solid ${bg(0.08)}`
+
+  return (
+    <div className="flex items-stretch justify-center">
+
+      {/* ═══ SECTION 1: Numbers ═══ */}
+      {/* Countries hero */}
+      <div className="flex items-baseline gap-1.5 px-5 py-4 mx-2 my-2 rounded-xl" style={{ background: bg(0.08) }}>
+        <span className="text-5xl font-black tabular-nums leading-none" style={{ color: tp }}>{stats.totalCountries}</span>
+        <span className="text-sm font-medium" style={{ color: tm }}>{t('atlas.countries')}</span>
+      </div>
+      {/* Other stats */}
+      {[[stats.totalTrips, t('atlas.trips')], [stats.totalPlaces, t('atlas.places')], [stats.totalCities || 0, t('atlas.cities')], [stats.totalDays, t('atlas.days')]].map(([v, l], i) => (
+        <div key={i} className="flex flex-col items-center justify-center px-3 py-5 shrink-0">
+          <span className="text-2xl font-black tabular-nums leading-none" style={{ color: tp }}>{v}</span>
+          <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide whitespace-nowrap" style={{ color: tf }}>{l}</span>
+        </div>
+      ))}
+
+      {/* ═══ DIVIDER ═══ */}
+      <div style={{ width: 2, background: bg(0.08), margin: '12px 14px' }} />
+
+      {/* ═══ SECTION 2: Continents ═══ */}
+      <div className="flex items-center gap-4 px-3 py-4 shrink-0">
+        {['Europe', 'Asia', 'North America', 'South America', 'Africa', 'Oceania'].map((cont) => {
+          const count = continents?.[cont] || 0
+          const active = count > 0
+          return (
+            <div key={cont} className="flex flex-col items-center shrink-0">
+              <span className="text-2xl font-black tabular-nums leading-none" style={{ color: active ? tp : bg(0.15) }}>{count}</span>
+              <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide whitespace-nowrap" style={{ color: active ? tf : bg(0.1) }}>{CL[cont]}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* ═══ DIVIDER ═══ */}
+      <div style={{ width: 2, background: bg(0.08), margin: '12px 14px' }} />
+
+      {/* ═══ SECTION 3: Highlights & Streaks ═══ */}
+      <div className="flex items-center gap-5 px-3 py-4">
+        {/* Last trip */}
+        {lastTrip && (
+          <button onClick={() => onTripClick(lastTrip.id)} className="flex items-center gap-2.5 text-left transition-opacity hover:opacity-75">
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0" style={{ background: bg(0.06) }}>
+              {lastTrip.countryCode ? countryCodeToFlag(lastTrip.countryCode) : <MapPin size={16} style={{ color: tm }} />}
+            </div>
+            <div className="min-w-0">
+              <p className="text-[9px] uppercase tracking-wider font-semibold" style={{ color: tf }}>{t('atlas.lastTrip')}</p>
+              <p className="text-[13px] font-bold truncate" style={{ color: tp }}>{lastTrip.title}</p>
+            </div>
+          </button>
+        )}
+        {/* Streak */}
+        {streak > 0 && (
+          <div className="flex flex-col items-center justify-center px-3">
+            <span className="text-2xl font-black tabular-nums leading-none" style={{ color: tp }}>{streak}</span>
+            <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide text-center leading-tight whitespace-nowrap" style={{ color: tf }}>
+              {streak === 1 ? t('atlas.yearInRow') : t('atlas.yearsInRow')}
+            </span>
+          </div>
+        )}
+        {/* This year */}
+        {tripsThisYear > 0 && (
+          <div className="flex flex-col items-center justify-center px-3">
+            <span className="text-2xl font-black tabular-nums leading-none" style={{ color: tp }}>{tripsThisYear}</span>
+            <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide text-center leading-tight whitespace-nowrap" style={{ color: tf }}>
+              {tripsThisYear === 1 ? t('atlas.tripIn') : t('atlas.tripsIn')} {thisYear}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* ═══ Country detail overlay ═══ */}
+      {selectedCountry && countryDetail && (
+        <>
+          <div style={{ width: 2, background: bg(0.08), margin: '12px 0' }} />
+          <div className="flex items-center gap-3 px-6 py-4">
+            <span className="text-3xl">{countryCodeToFlag(selectedCountry)}</span>
+            <div>
+              <p className="text-sm font-bold" style={{ color: tp }}>{resolveName(selectedCountry)}</p>
+              <p className="text-[10px] mb-1" style={{ color: tf }}>{countryDetail.places.length} {t('atlas.places')} · {countryDetail.trips.length} Trips</p>
+              <div className="flex flex-wrap gap-1">
+                {countryDetail.trips.slice(0, 3).map(trip => (
+                  <button key={trip.id} onClick={() => onTripClick(trip.id)}
+                    className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold transition-opacity hover:opacity-75"
+                    style={{ background: bg(0.08), color: tp }}>
+                    <Briefcase size={9} style={{ color: tm }} />
+                    {trip.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+

client/src/pages/DashboardPage.tsx

@@ -0,0 +1,773 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { tripsApi } from '../api/client'
+import { useAuthStore } from '../store/authStore'
+import { useSettingsStore } from '../store/settingsStore'
+import { useTranslation } from '../i18n'
+import { getApiErrorMessage } from '../types'
+import Navbar from '../components/Layout/Navbar'
+import DemoBanner from '../components/Layout/DemoBanner'
+import CurrencyWidget from '../components/Dashboard/CurrencyWidget'
+import TimezoneWidget from '../components/Dashboard/TimezoneWidget'
+import TripFormModal from '../components/Trips/TripFormModal'
+import { useToast } from '../components/shared/Toast'
+import {
+  Plus, Calendar, Trash2, Edit2, Map, ChevronDown, ChevronUp,
+  Archive, ArchiveRestore, Clock, MapPin, Settings, X, ArrowRightLeft,
+} from 'lucide-react'
+
+interface DashboardTrip {
+  id: number
+  title: string
+  description?: string | null
+  start_date?: string | null
+  end_date?: string | null
+  cover_image?: string | null
+  is_archived?: boolean
+  is_owner?: boolean
+  owner_username?: string
+  day_count?: number
+  place_count?: number
+  [key: string]: string | number | boolean | null | undefined
+}
+
+const font: React.CSSProperties = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+
+const MS_PER_DAY = 86400000
+
+function daysUntil(dateStr: string | null | undefined): number | null {
+  if (!dateStr) return null
+  const today = new Date(); today.setHours(0, 0, 0, 0)
+  const d = new Date(dateStr + 'T00:00:00'); d.setHours(0, 0, 0, 0)
+  return Math.round((d - today) / MS_PER_DAY)
+}
+
+function getTripStatus(trip: DashboardTrip): string | null {
+  const today = new Date().toISOString().split('T')[0]
+  if (trip.start_date && trip.end_date && trip.start_date <= today && trip.end_date >= today) return 'ongoing'
+  const until = daysUntil(trip.start_date)
+  if (until === null) return null
+  if (until === 0) return 'today'
+  if (until === 1) return 'tomorrow'
+  if (until > 1) return 'future'
+  return 'past'
+}
+
+function formatDate(dateStr: string | null | undefined, locale: string = 'de-DE'): string | null {
+  if (!dateStr) return null
+  return new Date(dateStr + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+function formatDateShort(dateStr: string | null | undefined, locale: string = 'de-DE'): string | null {
+  if (!dateStr) return null
+  return new Date(dateStr + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short' })
+}
+
+function sortTrips(trips: DashboardTrip[]): DashboardTrip[] {
+  const today = new Date().toISOString().split('T')[0]
+  function rank(t) {
+    if (t.start_date && t.end_date && t.start_date <= today && t.end_date >= today) return 0 // ongoing
+    if (t.start_date && t.start_date >= today) return 1 // upcoming
+    return 2 // past
+  }
+  return [...trips].sort((a, b) => {
+    const ra = rank(a), rb = rank(b)
+    if (ra !== rb) return ra - rb
+    const ad = a.start_date || '', bd = b.start_date || ''
+    if (ra <= 1) return ad.localeCompare(bd)
+    return bd.localeCompare(ad)
+  })
+}
+
+// Gradient backgrounds when no cover image
+const GRADIENTS = [
+  'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+  'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+  'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+  'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+  'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
+  'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
+  'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)',
+]
+function tripGradient(id: number): string { return GRADIENTS[id % GRADIENTS.length] }
+
+// ── Liquid Glass hover effect ────────────────────────────────────────────────
+interface LiquidGlassProps {
+  children: React.ReactNode
+  dark: boolean
+  style?: React.CSSProperties
+  className?: string
+  onClick?: () => void
+}
+
+function LiquidGlass({ children, dark, style, className = '', onClick }: LiquidGlassProps): React.ReactElement {
+  const ref = useRef<HTMLDivElement>(null)
+  const glareRef = useRef<HTMLDivElement>(null)
+  const borderRef = useRef<HTMLDivElement>(null)
+
+  const onMove = (e: React.MouseEvent<HTMLDivElement>): void => {
+    if (!ref.current || !glareRef.current || !borderRef.current) return
+    const rect = ref.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    glareRef.current.style.background = `radial-gradient(circle 250px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)'} 0%, transparent 70%)`
+    glareRef.current.style.opacity = '1'
+    borderRef.current.style.opacity = '1'
+    borderRef.current.style.maskImage = `radial-gradient(circle 120px at ${x}px ${y}px, black 0%, transparent 100%)`
+    borderRef.current.style.WebkitMaskImage = `radial-gradient(circle 120px at ${x}px ${y}px, black 0%, transparent 100%)`
+  }
+  const onLeave = () => {
+    if (glareRef.current) glareRef.current.style.opacity = '0'
+    if (borderRef.current) borderRef.current.style.opacity = '0'
+  }
+
+  return (
+    <div ref={ref} onMouseMove={onMove} onMouseLeave={onLeave} onClick={onClick} className={className}
+      style={{ position: 'relative', overflow: 'hidden', ...style }}>
+      <div ref={glareRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0, transition: 'opacity 0.3s', borderRadius: 'inherit', zIndex: 1 }} />
+      <div ref={borderRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0, transition: 'opacity 0.3s', borderRadius: 'inherit', zIndex: 1,
+        border: dark ? '1.5px solid rgba(255,255,255,0.4)' : '1.5px solid rgba(0,0,0,0.12)',
+      }} />
+      {children}
+    </div>
+  )
+}
+
+// ── Spotlight Card (next upcoming trip) ─────────────────────────────────────
+interface TripCardProps {
+  trip: DashboardTrip
+  onEdit: (trip: DashboardTrip) => void
+  onDelete: (trip: DashboardTrip) => void
+  onArchive: (id: number) => void
+  onClick: (trip: DashboardTrip) => void
+  t: (key: string, params?: Record<string, string | number | null>) => string
+  locale: string
+  dark?: boolean
+}
+
+function SpotlightCard({ trip, onEdit, onDelete, onArchive, onClick, t, locale, dark }: TripCardProps): React.ReactElement {
+  const status = getTripStatus(trip)
+
+  const coverBg = trip.cover_image
+    ? `url(${trip.cover_image}) center/cover no-repeat`
+    : tripGradient(trip.id)
+
+  return (
+    <LiquidGlass dark={dark} style={{ marginBottom: 32, borderRadius: 20, boxShadow: '0 8px 40px rgba(0,0,0,0.13)', cursor: 'pointer' }}
+      onClick={() => onClick(trip)}>
+      {/* Cover / Background */}
+      <div style={{ height: 300, background: coverBg, position: 'relative' }}>
+        <div style={{
+          position: 'absolute', inset: 0,
+          background: 'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 100%)',
+        }} />
+
+        {/* Badges top-left */}
+        <div style={{ position: 'absolute', top: 16, left: 16, display: 'flex', gap: 8 }}>
+          {status && (
+            <span style={{
+              background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(8px)',
+              color: 'white', fontSize: 12, fontWeight: 700,
+              padding: '5px 12px', borderRadius: 99, border: '1px solid rgba(255,255,255,0.25)',
+              display: 'flex', alignItems: 'center', gap: 6,
+            }}>
+              {status === 'ongoing' && (
+                <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#ef4444', animation: 'blink 1s ease-in-out infinite', display: 'inline-block', flexShrink: 0 }} />
+              )}
+              {status === 'ongoing' ? t('dashboard.status.ongoing')
+                : status === 'today' ? t('dashboard.status.today')
+                : status === 'tomorrow' ? t('dashboard.status.tomorrow')
+                : status === 'future' ? t('dashboard.status.daysLeft', { count: daysUntil(trip.start_date) })
+                : t('dashboard.status.past')}
+            </span>
+          )}
+        </div>
+
+        {/* Top-right actions */}
+        <div style={{ position: 'absolute', top: 16, right: 16, display: 'flex', gap: 6 }}
+          onClick={e => e.stopPropagation()}>
+          <IconBtn onClick={() => onEdit(trip)} title={t('common.edit')}><Edit2 size={14} /></IconBtn>
+          <IconBtn onClick={() => onArchive(trip.id)} title={t('dashboard.archive')}><Archive size={14} /></IconBtn>
+          <IconBtn onClick={() => onDelete(trip)} title={t('common.delete')} danger><Trash2 size={14} /></IconBtn>
+        </div>
+
+        {/* Bottom content */}
+        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '20px 24px' }}>
+          <div style={{ fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.65)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>
+            {trip.is_owner ? t('dashboard.nextTrip') : t('dashboard.sharedBy', { name: trip.owner_username })}
+          </div>
+          <h2 style={{ margin: 0, fontSize: 26, fontWeight: 800, color: 'white', lineHeight: 1.2, textShadow: '0 1px 4px rgba(0,0,0,0.3)' }}>
+            {trip.title}
+          </h2>
+          {trip.description && (
+            <p style={{ margin: '6px 0 0', fontSize: 13.5, color: 'rgba(255,255,255,0.75)', lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
+              {trip.description}
+            </p>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 12 }}>
+            {trip.start_date && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>
+                <Calendar size={13} />
+                {formatDateShort(trip.start_date, locale)}
+                {trip.end_date && <> — {formatDateShort(trip.end_date, locale)}</>}
+              </div>
+            )}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>
+              <Clock size={13} /> {trip.day_count || 0} {t('dashboard.days')}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>
+              <MapPin size={13} /> {trip.place_count || 0} {t('dashboard.places')}
+            </div>
+          </div>
+        </div>
+      </div>
+    </LiquidGlass>
+  )
+}
+
+// ── Regular Trip Card ────────────────────────────────────────────────────────
+function TripCard({ trip, onEdit, onDelete, onArchive, onClick, t, locale }: Omit<TripCardProps, 'dark'>): React.ReactElement {
+  const status = getTripStatus(trip)
+  const [hovered, setHovered] = useState(false)
+
+  const coverBg = trip.cover_image
+    ? `url(${trip.cover_image}) center/cover no-repeat`
+    : tripGradient(trip.id)
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => onClick(trip)}
+      style={{
+        background: hovered ? 'var(--bg-tertiary)' : 'var(--bg-card)', borderRadius: 16, overflow: 'hidden', cursor: 'pointer',
+        border: `1px solid ${hovered ? 'var(--text-faint)' : 'var(--border-primary)'}`, transition: 'all 0.18s',
+        boxShadow: hovered ? '0 8px 28px rgba(0,0,0,0.15)' : '0 1px 4px rgba(0,0,0,0.04)',
+        transform: hovered ? 'translateY(-2px)' : 'none',
+      }}
+    >
+      {/* Image area */}
+      <div style={{ height: 120, background: coverBg, position: 'relative', overflow: 'hidden' }}>
+        {trip.cover_image && <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 60%)' }} />}
+
+        {/* Status badge */}
+        {status && (
+          <div style={{ position: 'absolute', top: 8, left: 8 }}>
+            <span style={{
+              fontSize: 10.5, fontWeight: 700, padding: '2px 8px', borderRadius: 99,
+              background: 'rgba(0,0,0,0.4)', color: 'white', backdropFilter: 'blur(4px)',
+              display: 'flex', alignItems: 'center', gap: 5,
+            }}>
+              {status === 'ongoing' && (
+                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ef4444', animation: 'blink 1s ease-in-out infinite', display: 'inline-block', flexShrink: 0 }} />
+              )}
+              {status === 'ongoing' ? t('dashboard.status.ongoing')
+                : status === 'today' ? t('dashboard.status.today')
+                : status === 'tomorrow' ? t('dashboard.status.tomorrow')
+                : status === 'future' ? t('dashboard.status.daysLeft', { count: daysUntil(trip.start_date) })
+                : t('dashboard.status.past')}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div style={{ padding: '12px 14px 14px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, overflow: 'hidden', marginBottom: 3 }}>
+          <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {trip.title}
+          </span>
+          {!trip.is_owner && (
+            <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', background: 'var(--bg-tertiary)', padding: '1px 6px', borderRadius: 99, whiteSpace: 'nowrap', flexShrink: 0 }}>
+              {t('dashboard.shared')}
+            </span>
+          )}
+        </div>
+        {trip.description && (
+          <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 8px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {trip.description}
+          </p>
+        )}
+
+        {(trip.start_date || trip.end_date) && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 }}>
+            <Calendar size={11} style={{ flexShrink: 0 }} />
+            {trip.start_date && trip.end_date
+              ? `${formatDateShort(trip.start_date, locale)} — ${formatDateShort(trip.end_date, locale)}`
+              : formatDate(trip.start_date || trip.end_date, locale)}
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
+          <Stat label={t('dashboard.days')} value={trip.day_count || 0} />
+          <Stat label={t('dashboard.places')} value={trip.place_count || 0} />
+        </div>
+
+        <div style={{ display: 'flex', gap: 6, borderTop: '1px solid #f3f4f6', paddingTop: 10 }}
+          onClick={e => e.stopPropagation()}>
+          <CardAction onClick={() => onEdit(trip)} icon={<Edit2 size={12} />} label={t('common.edit')} />
+          <CardAction onClick={() => onArchive(trip.id)} icon={<Archive size={12} />} label={t('dashboard.archive')} />
+          <CardAction onClick={() => onDelete(trip)} icon={<Trash2 size={12} />} label={t('common.delete')} danger />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Archived Trip Row ────────────────────────────────────────────────────────
+interface ArchivedRowProps {
+  trip: DashboardTrip
+  onEdit: (trip: DashboardTrip) => void
+  onUnarchive: (id: number) => void
+  onDelete: (trip: DashboardTrip) => void
+  onClick: (trip: DashboardTrip) => void
+  t: (key: string, params?: Record<string, string | number | null>) => string
+  locale: string
+}
+
+function ArchivedRow({ trip, onEdit, onUnarchive, onDelete, onClick, t, locale }: ArchivedRowProps): React.ReactElement {
+  return (
+    <div onClick={() => onClick(trip)} style={{
+      display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px',
+      borderRadius: 12, border: '1px solid #f3f4f6', background: 'white', cursor: 'pointer',
+      transition: 'border-color 0.12s',
+    }}
+      onMouseEnter={e => e.currentTarget.style.borderColor = '#e5e7eb'}
+      onMouseLeave={e => e.currentTarget.style.borderColor = '#f3f4f6'}>
+      {/* Mini cover */}
+      <div style={{
+        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
+        background: trip.cover_image ? `url(${trip.cover_image}) center/cover no-repeat` : tripGradient(trip.id),
+        opacity: 0.7,
+      }} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: '#6b7280', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{trip.title}</span>
+          {!trip.is_owner && <span style={{ fontSize: 10, color: '#9ca3af', background: '#f3f4f6', padding: '1px 6px', borderRadius: 99, flexShrink: 0 }}>{t('dashboard.shared')}</span>}
+        </div>
+        {trip.start_date && (
+          <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 1 }}>
+            {formatDateShort(trip.start_date, locale)}{trip.end_date ? ` — ${formatDateShort(trip.end_date, locale)}` : ''}
+          </div>
+        )}
+      </div>
+      <div style={{ display: 'flex', gap: 4, flexShrink: 0 }} onClick={e => e.stopPropagation()}>
+        <button onClick={() => onUnarchive(trip.id)} title={t('dashboard.restore')} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid #e5e7eb', background: 'white', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#6b7280' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-faint)'; e.currentTarget.style.color = 'var(--text-primary)' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#6b7280' }}>
+          <ArchiveRestore size={12} /> {t('dashboard.restore')}
+        </button>
+        <button onClick={() => onDelete(trip)} title={t('common.delete')} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid #e5e7eb', background: 'white', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#9ca3af' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#fecaca'; e.currentTarget.style.color = '#ef4444' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
+          <Trash2 size={12} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function Stat({ value, label }: { value: number | string; label: string }): React.ReactElement {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      <span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>{value}</span>
+      <span style={{ fontSize: 11, color: '#9ca3af' }}>{label}</span>
+    </div>
+  )
+}
+
+function CardAction({ onClick, icon, label, danger }: { onClick: () => void; icon: React.ReactNode; label: string; danger?: boolean }): React.ReactElement {
+  return (
+    <button onClick={onClick} style={{
+      display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8,
+      border: 'none', background: 'none', cursor: 'pointer', fontSize: 11,
+      color: danger ? '#9ca3af' : '#9ca3af', fontFamily: 'inherit',
+    }}
+      onMouseEnter={e => { e.currentTarget.style.background = danger ? '#fef2f2' : '#f3f4f6'; e.currentTarget.style.color = danger ? '#ef4444' : '#374151' }}
+      onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = '#9ca3af' }}>
+      {icon}{label}
+    </button>
+  )
+}
+
+function IconBtn({ onClick, title, danger, loading, children }: { onClick: () => void; title: string; danger?: boolean; loading?: boolean; children: React.ReactNode }): React.ReactElement {
+  return (
+    <button onClick={onClick} title={title} disabled={loading} style={{
+      width: 32, height: 32, borderRadius: 99, border: '1px solid rgba(255,255,255,0.25)',
+      background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(8px)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      cursor: 'pointer', color: danger ? '#fca5a5' : 'white', transition: 'background 0.12s',
+    }}
+      onMouseEnter={e => e.currentTarget.style.background = danger ? 'rgba(239,68,68,0.5)' : 'rgba(255,255,255,0.25)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,0,0,0.3)'}>
+      {children}
+    </button>
+  )
+}
+
+// ── Skeleton ─────────────────────────────────────────────────────────────────
+function SkeletonCard(): React.ReactElement {
+  return (
+    <div style={{ background: 'white', borderRadius: 16, overflow: 'hidden', border: '1px solid #f3f4f6' }}>
+      <div style={{ height: 120, background: '#f3f4f6', animation: 'pulse 1.5s ease-in-out infinite' }} />
+      <div style={{ padding: '12px 14px 14px' }}>
+        <div style={{ height: 14, background: '#f3f4f6', borderRadius: 6, marginBottom: 8, width: '70%' }} />
+        <div style={{ height: 11, background: '#f3f4f6', borderRadius: 6, width: '50%' }} />
+      </div>
+    </div>
+  )
+}
+
+// ── Main Page ────────────────────────────────────────────────────────────────
+export default function DashboardPage(): React.ReactElement {
+  const [trips, setTrips] = useState<DashboardTrip[]>([])
+  const [archivedTrips, setArchivedTrips] = useState<DashboardTrip[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [showForm, setShowForm] = useState<boolean>(false)
+  const [editingTrip, setEditingTrip] = useState<DashboardTrip | null>(null)
+  const [showArchived, setShowArchived] = useState<boolean>(false)
+  const [showWidgetSettings, setShowWidgetSettings] = useState<boolean | 'mobile'>(false)
+
+  const navigate = useNavigate()
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const { demoMode } = useAuthStore()
+  const { settings, updateSetting } = useSettingsStore()
+  const dm = settings.dark_mode
+  const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const showCurrency = settings.dashboard_currency !== 'off'
+  const showTimezone = settings.dashboard_timezone !== 'off'
+  const showSidebar = showCurrency || showTimezone
+
+  useEffect(() => {
+    if (showWidgetSettings === 'mobile') {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [showWidgetSettings])
+
+  useEffect(() => { loadTrips() }, [])
+
+  const loadTrips = async () => {
+    setIsLoading(true)
+    try {
+      const [active, archived] = await Promise.all([
+        tripsApi.list(),
+        tripsApi.list({ archived: 1 }),
+      ])
+      setTrips(sortTrips(active.trips))
+      setArchivedTrips(sortTrips(archived.trips))
+    } catch {
+      toast.error(t('dashboard.toast.loadError'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCreate = async (tripData) => {
+    try {
+      const data = await tripsApi.create(tripData)
+      setTrips(prev => sortTrips([data.trip, ...prev]))
+      toast.success(t('dashboard.toast.created'))
+      return data
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, t('dashboard.toast.createError')))
+    }
+  }
+
+  const handleUpdate = async (tripData) => {
+    try {
+      const data = await tripsApi.update(editingTrip.id, tripData)
+      setTrips(prev => sortTrips(prev.map(t => t.id === editingTrip.id ? data.trip : t)))
+      toast.success(t('dashboard.toast.updated'))
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, t('dashboard.toast.updateError')))
+    }
+  }
+
+  const handleDelete = async (trip) => {
+    if (!confirm(t('dashboard.confirm.delete', { title: trip.title }))) return
+    try {
+      await tripsApi.delete(trip.id)
+      setTrips(prev => prev.filter(t => t.id !== trip.id))
+      setArchivedTrips(prev => prev.filter(t => t.id !== trip.id))
+      toast.success(t('dashboard.toast.deleted'))
+    } catch {
+      toast.error(t('dashboard.toast.deleteError'))
+    }
+  }
+
+  const handleArchive = async (id) => {
+    try {
+      const data = await tripsApi.archive(id)
+      setTrips(prev => prev.filter(t => t.id !== id))
+      setArchivedTrips(prev => sortTrips([data.trip, ...prev]))
+      toast.success(t('dashboard.toast.archived'))
+    } catch {
+      toast.error(t('dashboard.toast.archiveError'))
+    }
+  }
+
+  const handleUnarchive = async (id) => {
+    try {
+      const data = await tripsApi.unarchive(id)
+      setArchivedTrips(prev => prev.filter(t => t.id !== id))
+      setTrips(prev => sortTrips([data.trip, ...prev]))
+      toast.success(t('dashboard.toast.restored'))
+    } catch {
+      toast.error(t('dashboard.toast.restoreError'))
+    }
+  }
+
+  const handleCoverUpdate = (tripId: number, coverImage: string | null): void => {
+    const update = (t: DashboardTrip) => t.id === tripId ? { ...t, cover_image: coverImage } : t
+    setTrips(prev => prev.map(update))
+    setArchivedTrips(prev => prev.map(update))
+  }
+
+  const today = new Date().toISOString().split('T')[0]
+  const spotlight = trips.find(t => t.start_date && t.end_date && t.start_date <= today && t.end_date >= today)
+    || trips.find(t => t.start_date && t.start_date >= today)
+    || trips[0]
+    || null
+  const rest = spotlight ? trips.filter(t => t.id !== spotlight.id) : trips
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--bg-secondary)', ...font }}>
+      <Navbar />
+      {demoMode && <DemoBanner />}
+      <div style={{ flex: 1, overflow: 'auto', overscrollBehavior: 'contain', marginTop: 'var(--nav-h)' }}>
+        <div style={{ maxWidth: 1300, margin: '0 auto', padding: '32px 20px 60px' }}>
+
+          {/* Header */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
+            <div>
+              <h1 style={{ margin: 0, fontSize: 24, fontWeight: 800, color: 'var(--text-primary)' }}>{t('dashboard.title')}</h1>
+              <p style={{ margin: '3px 0 0', fontSize: 13, color: '#9ca3af' }}>
+                {isLoading ? t('common.loading')
+                  : trips.length > 0 ? `${t(trips.length !== 1 ? 'dashboard.subtitle.activeMany' : 'dashboard.subtitle.activeOne', { count: trips.length })}${archivedTrips.length > 0 ? t('dashboard.subtitle.archivedSuffix', { count: archivedTrips.length }) : ''}`
+                  : t('dashboard.subtitle.empty')}
+              </p>
+            </div>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
+              {/* Widget settings */}
+              <button
+                onClick={() => setShowWidgetSettings(s => s ? false : true)}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  padding: '0 14px',
+                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
+                  cursor: 'pointer', color: 'var(--text-faint)', fontFamily: 'inherit',
+                  transition: 'background 0.15s, border-color 0.15s',
+                }}
+                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.borderColor = 'var(--text-faint)' }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.borderColor = 'var(--border-primary)' }}
+              >
+                <Settings size={15} />
+              </button>
+              <button
+                onClick={() => { setEditingTrip(null); setShowForm(true) }}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 7, padding: '9px 18px',
+                  background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 12,
+                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                }}
+                onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+            >
+              <Plus size={15} /> {t('dashboard.newTrip')}
+              </button>
+            </div>
+          </div>
+
+          {/* Widget settings dropdown */}
+          {showWidgetSettings && (
+            <div className="rounded-xl border p-3 mb-4 flex items-center gap-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+              <span className="text-xs font-semibold" style={{ color: 'var(--text-muted)' }}>Widgets:</span>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <button onClick={() => updateSetting('dashboard_currency', showCurrency ? 'off' : 'on')}
+                  className="relative inline-flex h-5 w-9 items-center rounded-full transition-colors"
+                  style={{ background: showCurrency ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                  <span className="absolute left-0.5 h-4 w-4 rounded-full transition-transform duration-200"
+                    style={{ background: 'var(--bg-card)', transform: showCurrency ? 'translateX(16px)' : 'translateX(0)' }} />
+                </button>
+                <span className="text-xs" style={{ color: 'var(--text-primary)' }}>{t('dashboard.currency')}</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <button onClick={() => updateSetting('dashboard_timezone', showTimezone ? 'off' : 'on')}
+                  className="relative inline-flex h-5 w-9 items-center rounded-full transition-colors"
+                  style={{ background: showTimezone ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                  <span className="absolute left-0.5 h-4 w-4 rounded-full transition-transform duration-200"
+                    style={{ background: 'var(--bg-card)', transform: showTimezone ? 'translateX(16px)' : 'translateX(0)' }} />
+                </button>
+                <span className="text-xs" style={{ color: 'var(--text-primary)' }}>{t('dashboard.timezone')}</span>
+              </label>
+            </div>
+          )}
+
+          {/* Mobile widgets button */}
+          {showSidebar && (
+            <button
+              onClick={() => setShowWidgetSettings('mobile')}
+              className="lg:hidden flex items-center justify-center gap-2 w-full py-2.5 rounded-xl text-xs font-semibold mb-4"
+              style={{ background: 'var(--bg-card)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}
+            >
+              <ArrowRightLeft size={13} style={{ color: 'var(--text-faint)' }} />
+              {showCurrency && showTimezone ? `${t('dashboard.currency')} & ${t('dashboard.timezone')}` : showCurrency ? t('dashboard.currency') : t('dashboard.timezone')}
+            </button>
+          )}
+
+          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
+          {/* Main content */}
+          <div style={{ flex: 1, minWidth: 0 }}>
+
+          {/* Loading skeletons */}
+          {isLoading && (
+            <>
+              <div style={{ height: 260, background: '#e5e7eb', borderRadius: 20, marginBottom: 32, animation: 'pulse 1.5s ease-in-out infinite' }} />
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
+                {[1, 2, 3].map(i => <SkeletonCard key={i} />)}
+              </div>
+            </>
+          )}
+
+          {/* Empty state */}
+          {!isLoading && trips.length === 0 && (
+            <div style={{ textAlign: 'center', padding: '80px 20px' }}>
+              <div style={{ width: 80, height: 80, background: '#f3f4f6', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
+                <Map size={36} style={{ color: '#d1d5db' }} />
+              </div>
+              <h3 style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('dashboard.emptyTitle')}</h3>
+              <p style={{ margin: '0 0 24px', fontSize: 14, color: '#9ca3af', maxWidth: 340, marginLeft: 'auto', marginRight: 'auto' }}>
+                {t('dashboard.emptyText')}
+              </p>
+              <button
+                onClick={() => { setEditingTrip(null); setShowForm(true) }}
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '10px 22px', background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}
+              >
+                <Plus size={16} /> {t('dashboard.emptyButton')}
+              </button>
+            </div>
+          )}
+
+          {/* Spotlight */}
+          {!isLoading && spotlight && (
+            <SpotlightCard
+              trip={spotlight}
+              t={t} locale={locale} dark={dark}
+              onEdit={tr => { setEditingTrip(tr); setShowForm(true) }}
+              onDelete={handleDelete}
+              onArchive={handleArchive}
+              onClick={tr => navigate(`/trips/${tr.id}`)}
+            />
+          )}
+
+          {/* Rest grid */}
+          {!isLoading && rest.length > 0 && (
+            <div className="trip-grid" style={{ display: 'grid', gap: 16, marginBottom: 40 }}>
+              {rest.map(trip => (
+                <TripCard
+                  key={trip.id}
+                  trip={trip}
+                  t={t} locale={locale}
+                  onEdit={tr => { setEditingTrip(tr); setShowForm(true) }}
+                  onDelete={handleDelete}
+                  onArchive={handleArchive}
+                  onClick={tr => navigate(`/trips/${tr.id}`)}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Archived section */}
+          {!isLoading && archivedTrips.length > 0 && (
+            <div style={{ borderTop: '1px solid #f3f4f6', paddingTop: 24 }}>
+              <button
+                onClick={() => setShowArchived(v => !v)}
+                style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0', marginBottom: showArchived ? 16 : 0, fontFamily: 'inherit' }}
+              >
+                <Archive size={15} style={{ color: '#9ca3af' }} />
+                <span style={{ fontSize: 13, fontWeight: 600, color: '#6b7280' }}>
+                  {t('dashboard.archived')} ({archivedTrips.length})
+                </span>
+                {showArchived ? <ChevronUp size={14} style={{ color: '#9ca3af' }} /> : <ChevronDown size={14} style={{ color: '#9ca3af' }} />}
+              </button>
+              {showArchived && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {archivedTrips.map(trip => (
+                    <ArchivedRow
+                      key={trip.id}
+                      trip={trip}
+                      t={t} locale={locale}
+                      onEdit={tr => { setEditingTrip(tr); setShowForm(true) }}
+                      onUnarchive={handleUnarchive}
+                      onDelete={handleDelete}
+                      onClick={tr => navigate(`/trips/${tr.id}`)}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          </div>
+
+          {/* Widgets sidebar */}
+          {showSidebar && (
+            <div className="hidden lg:flex flex-col gap-4" style={{ position: 'sticky', top: 80, flexShrink: 0, width: 280 }}>
+              {showCurrency && <LiquidGlass dark={dark} style={{ borderRadius: 16 }}><CurrencyWidget /></LiquidGlass>}
+              {showTimezone && <LiquidGlass dark={dark} style={{ borderRadius: 16 }}><TimezoneWidget /></LiquidGlass>}
+            </div>
+          )}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile widgets bottom sheet */}
+      {showWidgetSettings === 'mobile' && (
+        <div className="lg:hidden fixed inset-0 z-50" style={{ background: 'rgba(0,0,0,0.3)', touchAction: 'none' }} onClick={() => setShowWidgetSettings(false)}>
+          <div className="absolute bottom-0 left-0 right-0 flex flex-col overflow-hidden"
+            style={{ maxHeight: '80vh', background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', overscrollBehavior: 'contain' }}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+              <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Widgets</span>
+              <button onClick={() => setShowWidgetSettings(false)} className="w-7 h-7 rounded-full flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
+                <X size={14} style={{ color: 'var(--text-primary)' }} />
+              </button>
+            </div>
+            <div className="flex-1 overflow-auto p-4 space-y-4">
+              {showCurrency && <CurrencyWidget />}
+              {showTimezone && <TimezoneWidget />}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <TripFormModal
+        isOpen={showForm}
+        onClose={() => { setShowForm(false); setEditingTrip(null) }}
+        onSave={editingTrip ? handleUpdate : handleCreate}
+        trip={editingTrip}
+        onCoverUpdate={handleCoverUpdate}
+      />
+
+      <style>{`
+        @keyframes pulse {
+          0%, 100% { opacity: 1 }
+          50% { opacity: 0.5 }
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1 }
+          50% { opacity: 0 }
+        }
+        .trip-grid { grid-template-columns: repeat(3, 1fr); }
+        @media(max-width: 1024px) { .trip-grid { grid-template-columns: repeat(2, 1fr); } }
+        @media(max-width: 640px) { .trip-grid { grid-template-columns: 1fr; } }
+      `}</style>
+    </div>
+  )
+}

client/src/pages/FilesPage.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { useTripStore } from '../store/tripStore'
+import { tripsApi, placesApi } from '../api/client'
+import Navbar from '../components/Layout/Navbar'
+import FileManager from '../components/Files/FileManager'
+import { ArrowLeft } from 'lucide-react'
+import { useTranslation } from '../i18n'
+import type { Trip, Place, TripFile } from '../types'
+
+export default function FilesPage(): React.ReactElement {
+  const { t } = useTranslation()
+  const { id: tripId } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const tripStore = useTripStore()
+
+  const [trip, setTrip] = useState<Trip | null>(null)
+  const [places, setPlaces] = useState<Place[]>([])
+  const [files, setFiles] = useState<TripFile[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    loadData()
+  }, [tripId])
+
+  const loadData = async (): Promise<void> => {
+    setIsLoading(true)
+    try {
+      const [tripData, placesData] = await Promise.all([
+        tripsApi.get(tripId),
+        placesApi.list(tripId),
+      ])
+      setTrip(tripData.trip)
+      setPlaces(placesData.places)
+      await tripStore.loadFiles(tripId)
+    } catch (err: unknown) {
+      navigate('/dashboard')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    setFiles(tripStore.files)
+  }, [tripStore.files])
+
+  const handleUpload = async (formData: FormData): Promise<void> => {
+    await tripStore.addFile(tripId, formData)
+  }
+
+  const handleDelete = async (fileId: number): Promise<void> => {
+    await tripStore.deleteFile(tripId, fileId)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-700 rounded-full animate-spin"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <Navbar tripTitle={trip?.name} tripId={tripId} showBack onBack={() => navigate(`/trips/${tripId}`)} />
+
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
+        <div className="max-w-5xl mx-auto px-4 py-6">
+          <div className="flex items-center gap-3 mb-6">
+            <Link
+              to={`/trips/${tripId}`}
+              className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              {t('common.backToPlanning')}
+            </Link>
+          </div>
+
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">Dateien & Dokumente</h1>
+              <p className="text-gray-500 text-sm">{files.length} Dateien für {trip?.name}</p>
+            </div>
+          </div>
+
+          <FileManager
+            files={files}
+            onUpload={handleUpload}
+            onDelete={handleDelete}
+            places={places}
+            tripId={tripId}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/LoginPage.tsx

@@ -0,0 +1,635 @@
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../store/authStore'
+import { useSettingsStore } from '../store/settingsStore'
+import { useTranslation } from '../i18n'
+import { authApi } from '../api/client'
+import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield } from 'lucide-react'
+
+interface AppConfig {
+  has_users: boolean
+  allow_registration: boolean
+  demo_mode: boolean
+  oidc_configured: boolean
+  oidc_display_name?: string
+}
+
+export default function LoginPage(): React.ReactElement {
+  const { t, language } = useTranslation()
+  const [mode, setMode] = useState<'login' | 'register'>('login')
+  const [username, setUsername] = useState<string>('')
+  const [email, setEmail] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+  const [showPassword, setShowPassword] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  const [appConfig, setAppConfig] = useState<AppConfig | null>(null)
+
+  const { login, register, demoLogin } = useAuthStore()
+  const { setLanguageLocal } = useSettingsStore()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    authApi.getAppConfig?.().catch(() => null).then((config: AppConfig | null) => {
+      if (config) {
+        setAppConfig(config)
+        if (!config.has_users) setMode('register')
+      }
+    })
+
+    // Handle OIDC callback via short-lived auth code (secure exchange)
+    const params = new URLSearchParams(window.location.search)
+    const oidcCode = params.get('oidc_code')
+    const oidcError = params.get('oidc_error')
+    if (oidcCode) {
+      window.history.replaceState({}, '', '/login')
+      fetch('/api/auth/oidc/exchange?code=' + encodeURIComponent(oidcCode))
+        .then(r => r.json())
+        .then(data => {
+          if (data.token) {
+            localStorage.setItem('auth_token', data.token)
+            navigate('/dashboard')
+            window.location.reload()
+          } else {
+            setError(data.error || 'OIDC login failed')
+          }
+        })
+        .catch(() => setError('OIDC login failed'))
+    }
+    if (oidcError) {
+      const errorMessages: Record<string, string> = {
+        registration_disabled: t('login.oidc.registrationDisabled'),
+        no_email: t('login.oidc.noEmail'),
+        token_failed: t('login.oidc.tokenFailed'),
+        invalid_state: t('login.oidc.invalidState'),
+      }
+      setError(errorMessages[oidcError] || oidcError)
+      window.history.replaceState({}, '', '/login')
+    }
+  }, [])
+
+  const handleDemoLogin = async (): Promise<void> => {
+    setError('')
+    setIsLoading(true)
+    try {
+      await demoLogin()
+      setShowTakeoff(true)
+      setTimeout(() => navigate('/dashboard'), 2600)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('login.demoFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const [showTakeoff, setShowTakeoff] = useState<boolean>(false)
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault()
+    setError('')
+    setIsLoading(true)
+    try {
+      if (mode === 'register') {
+        if (!username.trim()) { setError('Username is required'); setIsLoading(false); return }
+        if (password.length < 6) { setError('Password must be at least 6 characters'); setIsLoading(false); return }
+        await register(username, email, password)
+      } else {
+        await login(email, password)
+      }
+      setShowTakeoff(true)
+      setTimeout(() => navigate('/dashboard'), 2600)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('login.error'))
+      setIsLoading(false)
+    }
+  }
+
+  const showRegisterOption = appConfig?.allow_registration || !appConfig?.has_users
+
+  const inputBase: React.CSSProperties = {
+    width: '100%', padding: '11px 12px 11px 40px', border: '1px solid #e5e7eb',
+    borderRadius: 12, fontSize: 14, fontFamily: 'inherit', outline: 'none',
+    color: '#111827', background: 'white', boxSizing: 'border-box', transition: 'border-color 0.15s',
+  }
+
+  if (showTakeoff) {
+    return (
+      <div className="takeoff-overlay" style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'hidden' }}>
+        {/* Sky gradient */}
+        <div className="takeoff-sky" style={{ position: 'absolute', inset: 0 }} />
+
+        {/* Stars */}
+        {Array.from({ length: 60 }, (_, i) => (
+          <div key={i} className="takeoff-star" style={{
+            position: 'absolute',
+            width: Math.random() > 0.7 ? 3 : 1.5,
+            height: Math.random() > 0.7 ? 3 : 1.5,
+            borderRadius: '50%',
+            background: 'white',
+            top: `${Math.random() * 100}%`,
+            left: `${Math.random() * 100}%`,
+            animationDelay: `${0.3 + Math.random() * 0.5}s, ${Math.random() * 1}s`,
+          }} />
+        ))}
+
+        {/* Clouds rushing past */}
+        {[0, 1, 2, 3, 4].map(i => (
+          <div key={i} className="takeoff-cloud" style={{
+            position: 'absolute',
+            width: 120 + i * 40,
+            height: 40 + i * 10,
+            borderRadius: '50%',
+            background: 'rgba(255,255,255,0.15)',
+            filter: 'blur(8px)',
+            right: -200,
+            top: `${25 + i * 12}%`,
+            animationDelay: `${0.3 + i * 0.25}s`,
+          }} />
+        ))}
+
+        {/* Speed lines */}
+        {Array.from({ length: 12 }, (_, i) => (
+          <div key={i} className="takeoff-speedline" style={{
+            position: 'absolute',
+            width: 80 + Math.random() * 120,
+            height: 1.5,
+            background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
+            top: `${10 + Math.random() * 80}%`,
+            right: -200,
+            animationDelay: `${0.5 + i * 0.12}s`,
+          }} />
+        ))}
+
+        {/* Plane */}
+        <div className="takeoff-plane" style={{ position: 'absolute', left: '50%', bottom: '10%', transform: 'translate(-50%, 0)' }}>
+          <svg viewBox="0 0 480 120" style={{ width: 200, filter: 'drop-shadow(0 0 20px rgba(255,255,255,0.3))' }}>
+            <g fill="white" transform="translate(240,60) rotate(-12)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
+              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+        </div>
+
+        {/* Contrail */}
+        <div className="takeoff-trail" style={{
+          position: 'absolute', left: '50%', bottom: '8%',
+          width: 3, height: 0, background: 'linear-gradient(to top, transparent, rgba(255,255,255,0.5))',
+          transformOrigin: 'bottom center',
+        }} />
+
+        {/* Logo fade in + burst */}
+        <div className="takeoff-logo" style={{
+          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
+          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
+        }}>
+          <img src="/logo-light.svg" alt="TREK" style={{ height: 72 }} />
+          <p style={{ margin: 0, fontSize: 20, color: 'rgba(255,255,255,0.6)', fontFamily: "'MuseoModerno', sans-serif", textTransform: 'lowercase', whiteSpace: 'nowrap' }}>{t('login.tagline')}</p>
+        </div>
+
+
+        <style>{`
+          .takeoff-sky {
+            background: linear-gradient(to top, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #0a0a23 100%);
+            animation: skyShift 2.6s ease-in-out forwards;
+          }
+          @keyframes skyShift {
+            0%   { background: linear-gradient(to top, #0a0a23 0%, #0f172a 40%, #111827 100%); }
+            100% { background: linear-gradient(to top, #000011 0%, #000016 50%, #000011 100%); }
+          }
+
+          .takeoff-star {
+            opacity: 0;
+            animation: starAppear 0.5s ease-out forwards, starTwinkle 2s ease-in-out infinite alternate;
+          }
+          @keyframes starAppear {
+            0%   { opacity: 0; transform: scale(0); }
+            100% { opacity: 0.7; transform: scale(1); }
+          }
+          @keyframes starTwinkle {
+            0%   { opacity: 0.3; }
+            100% { opacity: 0.9; }
+          }
+
+          .takeoff-cloud {
+            animation: cloudRush 0.6s ease-in forwards;
+          }
+          @keyframes cloudRush {
+            0%   { right: -200px; opacity: 0; }
+            20%  { opacity: 0.4; }
+            100% { right: 120%; opacity: 0; }
+          }
+
+          .takeoff-speedline {
+            animation: speedRush 0.4s ease-in forwards;
+          }
+          @keyframes speedRush {
+            0%   { right: -200px; opacity: 0; }
+            30%  { opacity: 0.6; }
+            100% { right: 120%; opacity: 0; }
+          }
+
+          .takeoff-plane {
+            animation: planeUp 1s ease-in forwards;
+          }
+          @keyframes planeUp {
+            0%   { transform: translate(-50%, 0) rotate(0deg) scale(1); bottom: 8%; left: 50%; opacity: 1; }
+            100% { transform: translate(-50%, 0) rotate(-22deg) scale(0.15); bottom: 120%; left: 58%; opacity: 0; }
+          }
+
+          .takeoff-trail {
+            animation: trailGrow 0.9s ease-out 0.15s forwards;
+          }
+          @keyframes trailGrow {
+            0%   { height: 0; opacity: 0; transform: translateX(-50%) rotate(-5deg); }
+            30%  { height: 150px; opacity: 0.6; }
+            60%  { height: 350px; opacity: 0.4; }
+            100% { height: 600px; opacity: 0; transform: translateX(-50%) rotate(-8deg); }
+          }
+
+          .takeoff-logo {
+            opacity: 0;
+            animation: logoReveal 0.5s ease-out 0.9s forwards;
+          }
+          @keyframes logoReveal {
+            0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
+            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}>
+
+      {/* Sprach-Toggle oben rechts */}
+      <button
+        onClick={() => setLanguageLocal(language === 'en' ? 'de' : 'en')}
+        style={{
+          position: 'absolute', top: 16, right: 16, zIndex: 10,
+          display: 'flex', alignItems: 'center', gap: 6,
+          padding: '6px 12px', borderRadius: 99,
+          background: 'rgba(0,0,0,0.06)', border: 'none',
+          fontSize: 13, fontWeight: 500, color: '#374151',
+          cursor: 'pointer', fontFamily: 'inherit',
+          transition: 'background 0.15s',
+        }}
+        onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = 'rgba(0,0,0,0.1)'}
+        onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = 'rgba(0,0,0,0.06)'}
+      >
+        <Globe size={14} />
+        {language === 'en' ? 'EN' : 'DE'}
+      </button>
+
+      {/* Left — branding */}
+      <div style={{ display: 'none', width: '55%', background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '60px 48px', position: 'relative', overflow: 'hidden' }}
+        className="lg-panel">
+        <style>{`@media(min-width:1024px){.lg-panel{display:flex!important}}`}</style>
+
+        {/* Stars */}
+        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+          {Array.from({ length: 40 }, (_, i) => (
+            <div key={i} className="login-star" style={{
+              position: 'absolute',
+              width: Math.random() > 0.7 ? 2 : 1,
+              height: Math.random() > 0.7 ? 2 : 1,
+              borderRadius: '50%',
+              background: 'white',
+              opacity: 0.15 + Math.random() * 0.25,
+              top: `${Math.random() * 70}%`,
+              left: `${Math.random() * 100}%`,
+              animationDelay: `${Math.random() * 4}s`,
+            }} />
+          ))}
+        </div>
+
+        {/* Animated glow orbs */}
+        <div className="login-orb1" style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%)', filter: 'blur(80px)' }} />
+        <div className="login-orb2" style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: 'radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%)', filter: 'blur(60px)' }} />
+
+        {/* Animated planes — realistic silhouettes at different sizes/speeds */}
+        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
+          {/* Plane 1 — large, slow, foreground */}
+          <svg className="login-plane1" viewBox="0 0 480 120" style={{ position: 'absolute', width: 48, opacity: 0.12 }}>
+            <g fill="white" transform="translate(240,60) rotate(-12)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
+              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+
+          {/* Plane 2 — small, faster, higher */}
+          <svg className="login-plane2" viewBox="0 0 480 120" style={{ position: 'absolute', width: 24, opacity: 0.08 }}>
+            <g fill="white" transform="translate(240,60) rotate(-12)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+
+          {/* Plane 3 — medium, mid-speed */}
+          <svg className="login-plane3" viewBox="0 0 480 120" style={{ position: 'absolute', width: 32, opacity: 0.06 }}>
+            <g fill="white" transform="translate(240,60) rotate(-5)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
+              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+
+          {/* Plane 4 — tiny, fast, high */}
+          <svg className="login-plane4" viewBox="0 0 480 120" style={{ position: 'absolute', width: 16, opacity: 0.07 }}>
+            <g fill="white" transform="translate(240,60) rotate(-10)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+
+          {/* Plane 5 — medium, right to left, lower */}
+          <svg className="login-plane5" viewBox="0 0 480 120" style={{ position: 'absolute', width: 28, opacity: 0.05 }}>
+            <g fill="white" transform="translate(240,60) rotate(8) scale(-1,1)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
+              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+
+          {/* Plane 6 — tiny distant */}
+          <svg className="login-plane6" viewBox="0 0 480 120" style={{ position: 'absolute', width: 12, opacity: 0.04 }}>
+            <g fill="white" transform="translate(240,60) rotate(-15)">
+              <ellipse cx="0" cy="0" rx="120" ry="12" />
+              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
+              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
+              <ellipse cx="60" cy="0" rx="18" ry="8" />
+            </g>
+          </svg>
+        </div>
+
+
+        <div style={{ position: 'relative', zIndex: 1, maxWidth: 560, textAlign: 'center' }}>
+          {/* Logo */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 48 }}>
+            <img src="/logo-light.svg" alt="TREK" style={{ height: 64 }} />
+          </div>
+
+          <h2 style={{ margin: '0 0 12px', fontSize: 36, fontWeight: 700, color: 'white', lineHeight: 1.15, letterSpacing: '-0.02em', fontFamily: "'MuseoModerno', sans-serif", textTransform: 'lowercase' }}>
+            {t('login.tagline')}
+          </h2>
+          <p style={{ margin: '0 0 44px', fontSize: 15, color: 'rgba(255,255,255,0.5)', lineHeight: 1.7 }}>
+            {t('login.description')}
+          </p>
+
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
+            {[
+              { Icon: Map, label: t('login.features.maps'), desc: t('login.features.mapsDesc') },
+              { Icon: Zap, label: t('login.features.realtime'), desc: t('login.features.realtimeDesc') },
+              { Icon: Wallet, label: t('login.features.budget'), desc: t('login.features.budgetDesc') },
+              { Icon: Users, label: t('login.features.collab'), desc: t('login.features.collabDesc') },
+              { Icon: CheckSquare, label: t('login.features.packing'), desc: t('login.features.packingDesc') },
+              { Icon: BookMarked, label: t('login.features.bookings'), desc: t('login.features.bookingsDesc') },
+              { Icon: FolderOpen, label: t('login.features.files'), desc: t('login.features.filesDesc') },
+              { Icon: Route, label: t('login.features.routes'), desc: t('login.features.routesDesc') },
+            ].map(({ Icon, label, desc }) => (
+              <div key={label} style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '14px 12px', border: '1px solid rgba(255,255,255,0.06)', textAlign: 'left', transition: 'all 0.2s' }}
+                onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)' }}
+                onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)' }}>
+                <Icon size={17} style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 7 }} />
+                <div style={{ fontSize: 12.5, color: 'white', fontWeight: 600, marginBottom: 2 }}>{label}</div>
+                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', lineHeight: 1.4 }}>{desc}</div>
+              </div>
+            ))}
+          </div>
+
+          <p style={{ marginTop: 36, fontSize: 11.5, color: 'rgba(255,255,255,0.25)', letterSpacing: '0.03em' }}>
+            {t('login.selfHosted')}
+          </p>
+        </div>
+      </div>
+
+      {/* Right — form */}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 24px', background: '#f9fafb' }}>
+        <div style={{ width: '100%', maxWidth: 400 }}>
+
+          {/* Mobile logo */}
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, marginBottom: 36 }}
+            className="mobile-logo">
+            <style>{`@media(min-width:1024px){.mobile-logo{display:none!important}}`}</style>
+            <img src="/logo-dark.svg" alt="TREK" style={{ height: 48 }} />
+            <p style={{ margin: 0, fontSize: 16, color: '#9ca3af', fontFamily: "'MuseoModerno', sans-serif", textTransform: 'lowercase', whiteSpace: 'nowrap' }}>{t('login.tagline')}</p>
+          </div>
+
+          <div style={{ background: 'white', borderRadius: 20, border: '1px solid #e5e7eb', padding: '36px 32px', boxShadow: '0 2px 16px rgba(0,0,0,0.06)' }}>
+            <h2 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 800, color: '#111827' }}>
+              {mode === 'register' ? (!appConfig?.has_users ? t('login.createAdmin') : t('login.createAccount')) : t('login.title')}
+            </h2>
+            <p style={{ margin: '0 0 28px', fontSize: 13.5, color: '#9ca3af' }}>
+              {mode === 'register' ? (!appConfig?.has_users ? t('login.createAdminHint') : t('login.createAccountHint')) : t('login.subtitle')}
+            </p>
+
+            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+              {error && (
+                <div style={{ padding: '10px 14px', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 10, fontSize: 13, color: '#dc2626' }}>
+                  {error}
+                </div>
+              )}
+
+              {/* Username (register only) */}
+              {mode === 'register' && (
+                <div>
+                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('login.username')}</label>
+                  <div style={{ position: 'relative' }}>
+                    <User size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                    <input
+                      type="text" value={username} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)} required
+                      placeholder="admin" style={inputBase}
+                      onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                      onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Email */}
+              <div>
+                <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('common.email')}</label>
+                <div style={{ position: 'relative' }}>
+                  <Mail size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                  <input
+                    type="email" value={email} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} required
+                    placeholder={t('login.emailPlaceholder')} style={inputBase}
+                    onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                    onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                  />
+                </div>
+              </div>
+
+              {/* Password */}
+              <div>
+                <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('common.password')}</label>
+                <div style={{ position: 'relative' }}>
+                  <Lock size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                  <input
+                    type={showPassword ? 'text' : 'password'} value={password} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} required
+                    placeholder="••••••••" style={{ ...inputBase, paddingRight: 44 }}
+                    onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                    onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                  />
+                  <button type="button" onClick={() => setShowPassword(v => !v)} style={{
+                    position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
+                    background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', color: '#9ca3af',
+                  }}>
+                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
+              </div>
+
+              <button type="submit" disabled={isLoading} style={{
+                marginTop: 4, width: '100%', padding: '12px', background: '#111827', color: 'white',
+                border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700, cursor: isLoading ? 'default' : 'pointer',
+                fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+                opacity: isLoading ? 0.7 : 1, transition: 'opacity 0.15s',
+              }}
+                onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => { if (!isLoading) e.currentTarget.style.background = '#1f2937' }}
+                onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = '#111827'}
+              >
+                {isLoading
+                  ? <><div style={{ width: 15, height: 15, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />{mode === 'register' ? t('login.creating') : t('login.signingIn')}</>
+                  : <><Plane size={16} />{mode === 'register' ? t('login.createAccount') : t('login.signIn')}</>
+                }
+              </button>
+            </form>
+
+            {/* Toggle login/register */}
+            {showRegisterOption && appConfig?.has_users && !appConfig?.demo_mode && (
+              <p style={{ textAlign: 'center', marginTop: 16, fontSize: 13, color: '#9ca3af' }}>
+                {mode === 'login' ? t('login.noAccount') + ' ' : t('login.hasAccount') + ' '}
+                <button onClick={() => { setMode(m => m === 'login' ? 'register' : 'login'); setError('') }}
+                  style={{ background: 'none', border: 'none', color: '#111827', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13 }}>
+                  {mode === 'login' ? t('login.register') : t('login.signIn')}
+                </button>
+              </p>
+            )}
+          </div>
+
+          {/* OIDC / SSO login button */}
+          {appConfig?.oidc_configured && (
+            <>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
+                <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
+                <span style={{ fontSize: 12, color: '#9ca3af' }}>{t('common.or')}</span>
+                <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
+              </div>
+              <a href="/api/auth/oidc/login"
+                style={{
+                  marginTop: 12, width: '100%', padding: '12px',
+                  background: 'white', color: '#374151',
+                  border: '1px solid #d1d5db', borderRadius: 12,
+                  fontSize: 14, fontWeight: 600, cursor: 'pointer',
+                  fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+                  textDecoration: 'none', transition: 'all 0.15s',
+                  boxSizing: 'border-box',
+                }}
+                onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.background = '#f9fafb'; e.currentTarget.style.borderColor = '#9ca3af' }}
+                onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.background = 'white'; e.currentTarget.style.borderColor = '#d1d5db' }}
+              >
+                <Shield size={16} />
+                {t('login.oidcSignIn', { name: appConfig.oidc_display_name })}
+              </a>
+            </>
+          )}
+
+          {/* Demo login button */}
+          {appConfig?.demo_mode && (
+            <button onClick={handleDemoLogin} disabled={isLoading}
+              style={{
+                marginTop: 16, width: '100%', padding: '14px',
+                background: 'linear-gradient(135deg, #f59e0b, #d97706)',
+                color: '#451a03', border: 'none', borderRadius: 14,
+                fontSize: 15, fontWeight: 700, cursor: isLoading ? 'default' : 'pointer',
+                fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
+                opacity: isLoading ? 0.7 : 1, transition: 'all 0.2s',
+                boxShadow: '0 2px 12px rgba(245, 158, 11, 0.3)',
+              }}
+              onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => { if (!isLoading) e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 4px 16px rgba(245, 158, 11, 0.4)' }}
+              onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 12px rgba(245, 158, 11, 0.3)' }}
+            >
+              <Plane size={18} />
+              {t('login.demoHint')}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes spin { to { transform: rotate(360deg) } }
+        @keyframes orbFloat1 {
+          0%, 100% { top: 15%; left: 30%; }
+          25% { top: 25%; left: 55%; }
+          50% { top: 45%; left: 40%; }
+          75% { top: 20%; left: 20%; }
+        }
+        @keyframes orbFloat2 {
+          0%, 100% { bottom: 20%; right: 15%; }
+          25% { bottom: 35%; right: 35%; }
+          50% { bottom: 15%; right: 45%; }
+          75% { bottom: 40%; right: 20%; }
+        }
+        .login-orb1 { animation: orbFloat1 20s ease-in-out infinite; }
+        .login-orb2 { animation: orbFloat2 25s ease-in-out infinite; }
+
+        @keyframes twinkle {
+          0%, 100% { opacity: 0.15; }
+          50% { opacity: 0.5; }
+        }
+        .login-star { animation: twinkle 3s ease-in-out infinite; }
+
+        @keyframes plane1Move {
+          0%   { left: -8%; top: 30%; transform: rotate(-8deg); }
+          100% { left: 108%; top: 10%; transform: rotate(-12deg); }
+        }
+        @keyframes plane2Move {
+          0%   { right: -5%; top: 18%; transform: rotate(5deg); }
+          100% { right: 110%; top: 8%; transform: rotate(3deg); }
+        }
+        @keyframes plane3Move {
+          0%   { left: -6%; top: 55%; transform: rotate(-10deg); }
+          100% { left: 110%; top: 35%; transform: rotate(-6deg); }
+        }
+        @keyframes plane4Move {
+          0%   { left: -4%; top: 8%; transform: rotate(-3deg); }
+          100% { left: 110%; top: 5%; transform: rotate(-5deg); }
+        }
+        @keyframes plane5Move {
+          0%   { right: -6%; top: 65%; transform: rotate(3deg); }
+          100% { right: 110%; top: 50%; transform: rotate(-2deg); }
+        }
+        @keyframes plane6Move {
+          0%   { left: -3%; top: 75%; transform: rotate(-7deg); }
+          100% { left: 110%; top: 58%; transform: rotate(-5deg); }
+        }
+        .login-plane1 { animation: plane1Move 24s ease-in-out infinite; }
+        .login-plane2 { animation: plane2Move 18s ease-in-out infinite; animation-delay: 6s; }
+        .login-plane3 { animation: plane3Move 30s ease-in-out infinite; animation-delay: 12s; }
+        .login-plane4 { animation: plane4Move 14s ease-in-out infinite; animation-delay: 3s; }
+        .login-plane5 { animation: plane5Move 22s ease-in-out infinite; animation-delay: 9s; }
+        .login-plane6 { animation: plane6Move 32s ease-in-out infinite; animation-delay: 16s; }
+
+      `}</style>
+    </div>
+  )
+}

client/src/pages/PhotosPage.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { useTripStore } from '../store/tripStore'
+import { tripsApi, daysApi, placesApi } from '../api/client'
+import Navbar from '../components/Layout/Navbar'
+import PhotoGallery from '../components/Photos/PhotoGallery'
+import { ArrowLeft } from 'lucide-react'
+import { useTranslation } from '../i18n'
+import type { Trip, Day, Place, Photo } from '../types'
+
+export default function PhotosPage(): React.ReactElement {
+  const { t } = useTranslation()
+  const { id: tripId } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const tripStore = useTripStore()
+
+  const [trip, setTrip] = useState<Trip | null>(null)
+  const [days, setDays] = useState<Day[]>([])
+  const [places, setPlaces] = useState<Place[]>([])
+  const [photos, setPhotos] = useState<Photo[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    loadData()
+  }, [tripId])
+
+  const loadData = async (): Promise<void> => {
+    setIsLoading(true)
+    try {
+      const [tripData, daysData, placesData] = await Promise.all([
+        tripsApi.get(tripId),
+        daysApi.list(tripId),
+        placesApi.list(tripId),
+      ])
+      setTrip(tripData.trip)
+      setDays(daysData.days)
+      setPlaces(placesData.places)
+
+      // Load photos
+      await tripStore.loadPhotos(tripId)
+    } catch (err: unknown) {
+      navigate('/dashboard')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // Sync photos from store
+  useEffect(() => {
+    setPhotos(tripStore.photos)
+  }, [tripStore.photos])
+
+  const handleUpload = async (formData: FormData): Promise<void> => {
+    await tripStore.addPhoto(tripId, formData)
+  }
+
+  const handleDelete = async (photoId: number): Promise<void> => {
+    await tripStore.deletePhoto(tripId, photoId)
+  }
+
+  const handleUpdate = async (photoId: number, data: Record<string, string | number | null>): Promise<void> => {
+    await tripStore.updatePhoto(tripId, photoId, data)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-700 rounded-full animate-spin"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <Navbar tripTitle={trip?.name} tripId={tripId} showBack onBack={() => navigate(`/trips/${tripId}`)} />
+
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          {/* Header */}
+          <div className="flex items-center gap-3 mb-6">
+            <Link
+              to={`/trips/${tripId}`}
+              className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              {t('common.backToPlanning')}
+            </Link>
+          </div>
+
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">Fotos</h1>
+              <p className="text-gray-500 text-sm">{photos.length} Fotos für {trip?.name}</p>
+            </div>
+          </div>
+
+          <PhotoGallery
+            photos={photos}
+            onUpload={handleUpload}
+            onDelete={handleDelete}
+            onUpdate={handleUpdate}
+            places={places}
+            days={days}
+            tripId={tripId}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/RegisterPage.tsx

@@ -0,0 +1,187 @@
+import React, { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../store/authStore'
+import { useTranslation } from '../i18n'
+import { Map, Eye, EyeOff, Mail, Lock, User } from 'lucide-react'
+
+export default function RegisterPage(): React.ReactElement {
+  const { t } = useTranslation()
+  const [username, setUsername] = useState<string>('')
+  const [email, setEmail] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+  const [confirmPassword, setConfirmPassword] = useState<string>('')
+  const [showPassword, setShowPassword] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+
+  const { register } = useAuthStore()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault()
+    setError('')
+
+    if (password !== confirmPassword) {
+      setError(t('register.passwordMismatch'))
+      return
+    }
+
+    if (password.length < 6) {
+      setError(t('register.passwordTooShort'))
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      await register(username, email, password)
+      navigate('/dashboard')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('register.failed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Left panel */}
+      <div className="hidden lg:flex lg:w-1/2 bg-slate-900 flex-col justify-center items-center p-12 text-white">
+        <div className="max-w-sm text-center">
+          <div className="w-20 h-20 bg-white/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Map className="w-10 h-10 text-white" />
+          </div>
+          <h1 className="text-4xl font-bold mb-4">{t('register.getStarted')}</h1>
+          <p className="text-slate-300 text-lg leading-relaxed">
+            {t('register.subtitle')}
+          </p>
+
+          <div className="mt-10 space-y-3 text-left">
+            {[
+              `✓ ${t('register.feature1')}`,
+              `✓ ${t('register.feature2')}`,
+              `✓ ${t('register.feature3')}`,
+              `✓ ${t('register.feature4')}`,
+              `✓ ${t('register.feature5')}`,
+              `✓ ${t('register.feature6')}`,
+            ].map(item => (
+              <p key={item} className="text-slate-200 text-sm">{item}</p>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Right panel */}
+      <div className="flex-1 flex items-center justify-center p-8 bg-slate-50">
+        <div className="w-full max-w-md">
+          <div className="lg:hidden flex items-center gap-2 mb-8 justify-center">
+            <Map className="w-8 h-8 text-slate-900" />
+            <span className="text-2xl font-bold text-slate-900">TREK</span>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
+            <h2 className="text-2xl font-bold text-slate-900 mb-1">{t('register.createAccount')}</h2>
+            <p className="text-slate-500 mb-8">{t('register.startPlanning')}</p>
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {error && (
+                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.username')}</label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                  <input
+                    type="text"
+                    value={username}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
+                    required
+                    placeholder="johndoe"
+                    minLength={3}
+                    className="w-full pl-10 pr-4 py-2.5 border border-slate-300 rounded-lg text-slate-900 placeholder-slate-400 focus:ring-2 focus:ring-slate-400 focus:border-transparent transition-all"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('common.email')}</label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+                    required
+                    placeholder="your@email.com"
+                    className="w-full pl-10 pr-4 py-2.5 border border-slate-300 rounded-lg text-slate-900 placeholder-slate-400 focus:ring-2 focus:ring-slate-400 focus:border-transparent transition-all"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('common.password')}</label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+                    required
+                    placeholder={t('register.minChars')}
+                    className="w-full pl-10 pr-12 py-2.5 border border-slate-300 rounded-lg text-slate-900 placeholder-slate-400 focus:ring-2 focus:ring-slate-400 focus:border-transparent transition-all"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                  >
+                    {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('register.confirmPassword')}</label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    value={confirmPassword}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfirmPassword(e.target.value)}
+                    required
+                    placeholder={t('register.repeatPassword')}
+                    className="w-full pl-10 pr-4 py-2.5 border border-slate-300 rounded-lg text-slate-900 placeholder-slate-400 focus:ring-2 focus:ring-slate-400 focus:border-transparent transition-all"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full py-2.5 px-4 bg-slate-900 hover:bg-slate-700 disabled:bg-slate-400 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                    {t('register.registering')}
+                  </>
+                ) : t('register.register')}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-sm text-slate-500">
+                {t('register.hasAccount')}{' '}
+                <Link to="/login" className="text-slate-900 hover:text-slate-700 font-medium">
+                  {t('register.signIn')}
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/SettingsPage.tsx

@@ -0,0 +1,650 @@
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../store/authStore'
+import { useSettingsStore } from '../store/settingsStore'
+import { useTranslation } from '../i18n'
+import Navbar from '../components/Layout/Navbar'
+import CustomSelect from '../components/shared/CustomSelect'
+import { useToast } from '../components/shared/Toast'
+import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock } from 'lucide-react'
+import { authApi, adminApi } from '../api/client'
+import type { LucideIcon } from 'lucide-react'
+import type { UserWithOidc } from '../types'
+import { getApiErrorMessage } from '../types'
+
+interface MapPreset {
+  name: string
+  url: string
+}
+
+const MAP_PRESETS: MapPreset[] = [
+  { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
+  { name: 'OpenStreetMap DE', url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png' },
+  { name: 'CartoDB Light', url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png' },
+  { name: 'CartoDB Dark', url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' },
+  { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
+]
+
+interface SectionProps {
+  title: string
+  icon: LucideIcon
+  children: React.ReactNode
+}
+
+function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
+  return (
+    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="px-6 py-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-secondary)' }}>
+        <Icon className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+        <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
+      </div>
+      <div className="p-6 space-y-4">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default function SettingsPage(): React.ReactElement {
+  const { user, updateProfile, uploadAvatar, deleteAvatar, logout } = useAuthStore()
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
+  const avatarInputRef = React.useRef<HTMLInputElement>(null)
+  const { settings, updateSetting, updateSettings } = useSettingsStore()
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const navigate = useNavigate()
+
+  const [saving, setSaving] = useState<Record<string, boolean>>({})
+
+  // Map settings
+  const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
+  const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
+  const [defaultLng, setDefaultLng] = useState<number | string>(settings.default_lng || 2.3522)
+  const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)
+
+  // Display
+  const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
+
+  // Account
+  const [username, setUsername] = useState<string>(user?.username || '')
+  const [email, setEmail] = useState<string>(user?.email || '')
+  const [currentPassword, setCurrentPassword] = useState<string>('')
+  const [newPassword, setNewPassword] = useState<string>('')
+  const [confirmPassword, setConfirmPassword] = useState<string>('')
+
+  useEffect(() => {
+    setMapTileUrl(settings.map_tile_url || '')
+    setDefaultLat(settings.default_lat || 48.8566)
+    setDefaultLng(settings.default_lng || 2.3522)
+    setDefaultZoom(settings.default_zoom || 10)
+    setTempUnit(settings.temperature_unit || 'celsius')
+  }, [settings])
+
+  useEffect(() => {
+    setUsername(user?.username || '')
+    setEmail(user?.email || '')
+  }, [user])
+
+  const saveMapSettings = async (): Promise<void> => {
+    setSaving(s => ({ ...s, map: true }))
+    try {
+      await updateSettings({
+        map_tile_url: mapTileUrl,
+        default_lat: parseFloat(String(defaultLat)),
+        default_lng: parseFloat(String(defaultLng)),
+        default_zoom: parseInt(String(defaultZoom)),
+      })
+      toast.success(t('settings.toast.mapSaved'))
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Error')
+    } finally {
+      setSaving(s => ({ ...s, map: false }))
+    }
+  }
+
+  const saveDisplay = async (): Promise<void> => {
+    setSaving(s => ({ ...s, display: true }))
+    try {
+      await updateSetting('temperature_unit', tempUnit)
+      toast.success(t('settings.toast.displaySaved'))
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Error')
+    } finally {
+      setSaving(s => ({ ...s, display: false }))
+    }
+  }
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    try {
+      await uploadAvatar(file)
+      toast.success(t('settings.avatarUploaded'))
+    } catch {
+      toast.error(t('settings.avatarError'))
+    }
+    if (avatarInputRef.current) avatarInputRef.current.value = ''
+  }
+
+  const handleAvatarRemove = async (): Promise<void> => {
+    try {
+      await deleteAvatar()
+      toast.success(t('settings.avatarRemoved'))
+    } catch {
+      toast.error(t('settings.avatarError'))
+    }
+  }
+
+  const saveProfile = async (): Promise<void> => {
+    setSaving(s => ({ ...s, profile: true }))
+    try {
+      await updateProfile({ username, email })
+      toast.success(t('settings.toast.profileSaved'))
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Error')
+    } finally {
+      setSaving(s => ({ ...s, profile: false }))
+    }
+  }
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--bg-secondary)' }}>
+      <Navbar />
+
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
+        <div className="max-w-2xl mx-auto px-4 py-8 space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('settings.title')}</h1>
+            <p className="text-sm mt-0.5" style={{ color: 'var(--text-muted)' }}>{t('settings.subtitle')}</p>
+          </div>
+
+          {/* Map settings */}
+          <Section title={t('settings.map')} icon={Map}>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapTemplate')}</label>
+              <CustomSelect
+                value=""
+                onChange={(value: string) => { if (value) setMapTileUrl(value) }}
+                placeholder={t('settings.mapTemplatePlaceholder.select')}
+                options={MAP_PRESETS.map(p => ({
+                  value: p.url,
+                  label: p.name,
+                }))}
+                size="sm"
+                style={{ marginBottom: 8 }}
+              />
+              <input
+                type="text"
+                value={mapTileUrl}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapTileUrl(e.target.value)}
+                placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+              <p className="text-xs text-slate-400 mt-1">{t('settings.mapDefaultHint')}</p>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.latitude')}</label>
+                <input
+                  type="number"
+                  step="any"
+                  value={defaultLat}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLat(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.longitude')}</label>
+                <input
+                  type="number"
+                  step="any"
+                  value={defaultLng}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLng(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                />
+              </div>
+            </div>
+
+            <button
+              onClick={saveMapSettings}
+              disabled={saving.map}
+              className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+            >
+              {saving.map ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
+              {t('settings.saveMap')}
+            </button>
+          </Section>
+
+          {/* Display */}
+          <Section title={t('settings.display')} icon={Palette}>
+            {/* Dark Mode Toggle */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.colorMode')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: 'light', label: t('settings.light'), icon: Sun },
+                  { value: 'dark', label: t('settings.dark'), icon: Moon },
+                  { value: 'auto', label: t('settings.auto'), icon: Monitor },
+                ].map(opt => {
+                  const current = settings.dark_mode
+                  const isActive = current === opt.value || (opt.value === 'light' && current === false) || (opt.value === 'dark' && current === true)
+                  return (
+                    <button
+                      key={opt.value}
+                      onClick={async () => {
+                        try {
+                          await updateSetting('dark_mode', opt.value)
+                        } catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                      }}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 8,
+                        padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                        fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                        border: isActive ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                        background: isActive ? 'var(--bg-hover)' : 'var(--bg-card)',
+                        color: 'var(--text-primary)',
+                        transition: 'all 0.15s',
+                      }}
+                    >
+                      <opt.icon size={16} />
+                      {opt.label}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* Sprache */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: 'de', label: 'Deutsch' },
+                  { value: 'en', label: 'English' },
+                ].map(opt => (
+                  <button
+                    key={opt.value}
+                    onClick={async () => {
+                      try { await updateSetting('language', opt.value) }
+                      catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: settings.language === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: settings.language === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Temperature */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.temperature')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: 'celsius', label: '°C Celsius' },
+                  { value: 'fahrenheit', label: '°F Fahrenheit' },
+                ].map(opt => (
+                  <button
+                    key={opt.value}
+                    onClick={async () => {
+                      setTempUnit(opt.value)
+                      try { await updateSetting('temperature_unit', opt.value) }
+                      catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: tempUnit === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: tempUnit === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Zeitformat */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: '24h', label: '24h (14:30)' },
+                  { value: '12h', label: '12h (2:30 PM)' },
+                ].map(opt => (
+                  <button
+                    key={opt.value}
+                    onClick={async () => {
+                      try { await updateSetting('time_format', opt.value) }
+                      catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: settings.time_format === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: settings.time_format === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          {/* Route Calculation */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.routeCalculation')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: true, label: t('settings.on') || 'On' },
+                  { value: false, label: t('settings.off') || 'Off' },
+                ].map(opt => (
+                  <button
+                    key={String(opt.value)}
+                    onClick={async () => {
+                      try { await updateSetting('route_calculation', opt.value) }
+                      catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: (settings.route_calculation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: (settings.route_calculation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </Section>
+
+          {/* Account */}
+          <Section title={t('settings.account')} icon={User}>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.username')}</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.email')}</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+            </div>
+
+            {/* Change Password */}
+            <div style={{ paddingTop: 8, marginTop: 8, borderTop: '1px solid var(--border-secondary)' }}>
+              <label className="block text-sm font-medium text-slate-700 mb-3">{t('settings.changePassword')}</label>
+              <div className="space-y-3">
+                <input
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCurrentPassword(e.target.value)}
+                  placeholder={t('settings.currentPassword')}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                />
+                <input
+                  type="password"
+                  value={newPassword}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPassword(e.target.value)}
+                  placeholder={t('settings.newPassword')}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                />
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfirmPassword(e.target.value)}
+                  placeholder={t('settings.confirmPassword')}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                />
+                <button
+                  onClick={async () => {
+                    if (!currentPassword) return toast.error(t('settings.currentPasswordRequired'))
+                    if (!newPassword) return toast.error(t('settings.passwordRequired'))
+                    if (newPassword.length < 8) return toast.error(t('settings.passwordTooShort'))
+                    if (newPassword !== confirmPassword) return toast.error(t('settings.passwordMismatch'))
+                    try {
+                      await authApi.changePassword({ current_password: currentPassword, new_password: newPassword })
+                      toast.success(t('settings.passwordChanged'))
+                      setCurrentPassword(''); setNewPassword(''); setConfirmPassword('')
+                    } catch (err: unknown) {
+                      toast.error(getApiErrorMessage(err, t('common.error')))
+                    }
+                  }}
+                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                  style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)' }}
+                  onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = 'var(--bg-hover)'}
+                  onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = 'var(--bg-card)'}
+                >
+                  <Lock size={14} />
+                  {t('settings.updatePassword')}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <div style={{ position: 'relative', flexShrink: 0 }}>
+                {user?.avatar_url ? (
+                  <img src={user.avatar_url} alt="" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover' }} />
+                ) : (
+                  <div style={{
+                    width: 64, height: 64, borderRadius: '50%',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontSize: 24, fontWeight: 700,
+                    background: 'var(--bg-hover)', color: 'var(--text-secondary)',
+                  }}>
+                    {user?.username?.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <input
+                  ref={avatarInputRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleAvatarUpload}
+                  style={{ display: 'none' }}
+                />
+                <button
+                  onClick={() => avatarInputRef.current?.click()}
+                  style={{
+                    position: 'absolute', bottom: -3, right: -3,
+                    width: 28, height: 28, borderRadius: '50%',
+                    background: 'var(--text-primary)', color: 'var(--bg-card)',
+                    border: '2px solid var(--bg-card)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    cursor: 'pointer', padding: 0, transition: 'transform 0.15s, opacity 0.15s',
+                  }}
+                  onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.transform = 'scale(1.15)'; e.currentTarget.style.opacity = '0.85' }}
+                  onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.opacity = '1' }}
+                >
+                  <Camera size={14} />
+                </button>
+                {user?.avatar_url && (
+                  <button
+                    onClick={handleAvatarRemove}
+                    style={{
+                      position: 'absolute', top: -2, right: -2,
+                      width: 20, height: 20, borderRadius: '50%',
+                      background: '#ef4444', color: 'white',
+                      border: '2px solid var(--bg-card)',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      cursor: 'pointer', padding: 0,
+                    }}
+                  >
+                    <Trash2 size={10} />
+                  </button>
+                )}
+              </div>
+              <div className="flex flex-col gap-1">
+                <div className="text-sm" style={{ color: 'var(--text-muted)' }}>
+                  <span className="font-medium" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--text-secondary)' }}>
+                    {user?.role === 'admin' ? <><Shield size={13} /> {t('settings.roleAdmin')}</> : t('settings.roleUser')}
+                  </span>
+                  {(user as UserWithOidc)?.oidc_issuer && (
+                    <span style={{
+                      display: 'inline-flex', alignItems: 'center', gap: 4,
+                      fontSize: 10, fontWeight: 500, padding: '1px 8px', borderRadius: 99,
+                      background: '#dbeafe', color: '#1d4ed8', marginLeft: 6,
+                    }}>
+                      SSO
+                    </span>
+                  )}
+                </div>
+                {(user as UserWithOidc)?.oidc_issuer && (
+                  <p style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -2 }}>
+                    {t('settings.oidcLinked')} {(user as UserWithOidc).oidc_issuer!.replace('https://', '').replace(/\/+$/, '')}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
+              <button
+                onClick={saveProfile}
+                disabled={saving.profile}
+                className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+              >
+                {saving.profile ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
+                {t('settings.saveProfile')}
+              </button>
+              <button
+                onClick={async () => {
+                  if (user?.role === 'admin') {
+                    try {
+                      const data = await adminApi.stats()
+                      const adminUsers = (await adminApi.users()).users.filter((u: { role: string }) => u.role === 'admin')
+                      if (adminUsers.length <= 1) {
+                        setShowDeleteConfirm('blocked')
+                        return
+                      }
+                    } catch {}
+                  }
+                  setShowDeleteConfirm(true)
+                }}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors text-red-500 hover:bg-red-50"
+                style={{ border: '1px solid #fecaca' }}
+              >
+                <Trash2 size={14} />
+                {t('settings.deleteAccount')}
+              </button>
+            </div>
+          </Section>
+
+          {/* Delete Account Confirmation */}
+          {showDeleteConfirm === 'blocked' && (
+            <div style={{
+              position: 'fixed', inset: 0, zIndex: 9999,
+              background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
+            }} onClick={() => setShowDeleteConfirm(false)}>
+              <div style={{
+                background: 'var(--bg-card)', borderRadius: 16, padding: '28px 24px',
+                maxWidth: 400, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+              }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
+                  <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fef3c7', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <Shield size={18} style={{ color: '#d97706' }} />
+                  </div>
+                  <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('settings.deleteBlockedTitle')}</h3>
+                </div>
+                <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>
+                  {t('settings.deleteBlockedMessage')}
+                </p>
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    style={{
+                      padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
+                      border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)',
+                      cursor: 'pointer', fontFamily: 'inherit',
+                    }}
+                  >
+                    {t('common.ok') || 'OK'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {showDeleteConfirm === true && (
+            <div style={{
+              position: 'fixed', inset: 0, zIndex: 9999,
+              background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
+            }} onClick={() => setShowDeleteConfirm(false)}>
+              <div style={{
+                background: 'var(--bg-card)', borderRadius: 16, padding: '28px 24px',
+                maxWidth: 400, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+              }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
+                  <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <Trash2 size={18} style={{ color: '#ef4444' }} />
+                  </div>
+                  <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('settings.deleteAccountTitle')}</h3>
+                </div>
+                <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>
+                  {t('settings.deleteAccountWarning')}
+                </p>
+                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    style={{
+                      padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
+                      border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)',
+                      cursor: 'pointer', fontFamily: 'inherit',
+                    }}
+                  >
+                    {t('common.cancel')}
+                  </button>
+                  <button
+                    onClick={async () => {
+                      try {
+                        await authApi.deleteOwnAccount()
+                        logout()
+                        navigate('/login')
+                      } catch (err: unknown) {
+                        toast.error(getApiErrorMessage(err, t('common.error')))
+                        setShowDeleteConfirm(false)
+                      }
+                    }}
+                    style={{
+                      padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 600,
+                      border: 'none', background: '#ef4444', color: 'white',
+                      cursor: 'pointer', fontFamily: 'inherit',
+                    }}
+                  >
+                    {t('settings.deleteAccountConfirm')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/TripPlannerPage.tsx

@@ -0,0 +1,672 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import ReactDOM from 'react-dom'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useTripStore } from '../store/tripStore'
+import { useSettingsStore } from '../store/settingsStore'
+import { MapView } from '../components/Map/MapView'
+import DayPlanSidebar from '../components/Planner/DayPlanSidebar'
+import PlacesSidebar from '../components/Planner/PlacesSidebar'
+import PlaceInspector from '../components/Planner/PlaceInspector'
+import DayDetailPanel from '../components/Planner/DayDetailPanel'
+import PlaceFormModal from '../components/Planner/PlaceFormModal'
+import TripFormModal from '../components/Trips/TripFormModal'
+import TripMembersModal from '../components/Trips/TripMembersModal'
+import { ReservationModal } from '../components/Planner/ReservationModal'
+import ReservationsPanel from '../components/Planner/ReservationsPanel'
+import PackingListPanel from '../components/Packing/PackingListPanel'
+import FileManager from '../components/Files/FileManager'
+import BudgetPanel from '../components/Budget/BudgetPanel'
+import CollabPanel from '../components/Collab/CollabPanel'
+import Navbar from '../components/Layout/Navbar'
+import { useToast } from '../components/shared/Toast'
+import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react'
+import { useTranslation } from '../i18n'
+import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi } from '../api/client'
+import ConfirmDialog from '../components/shared/ConfirmDialog'
+import { useResizablePanels } from '../hooks/useResizablePanels'
+import { useTripWebSocket } from '../hooks/useTripWebSocket'
+import { useRouteCalculation } from '../hooks/useRouteCalculation'
+import { usePlaceSelection } from '../hooks/usePlaceSelection'
+import type { Accommodation, TripMember, Day, Place, Reservation } from '../types'
+
+export default function TripPlannerPage(): React.ReactElement | null {
+  const { id: tripId } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const toast = useToast()
+  const { t, language } = useTranslation()
+  const { settings } = useSettingsStore()
+  const tripStore = useTripStore()
+  const { trip, days, places, assignments, packingItems, categories, reservations, budgetItems, files, selectedDayId, isLoading } = tripStore
+
+  const [enabledAddons, setEnabledAddons] = useState<Record<string, boolean>>({ packing: true, budget: true, documents: true })
+  const [tripAccommodations, setTripAccommodations] = useState<Accommodation[]>([])
+  const [allowedFileTypes, setAllowedFileTypes] = useState<string | null>(null)
+  const [tripMembers, setTripMembers] = useState<TripMember[]>([])
+
+  const loadAccommodations = useCallback(() => {
+    if (tripId) {
+      accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
+      tripStore.loadReservations(tripId)
+    }
+  }, [tripId])
+
+  useEffect(() => {
+    addonsApi.enabled().then(data => {
+      const map = {}
+      data.addons.forEach(a => { map[a.id] = true })
+      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab })
+    }).catch(() => {})
+    authApi.getAppConfig().then(config => {
+      if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
+    }).catch(() => {})
+  }, [])
+
+  const TRIP_TABS = [
+    { id: 'plan', label: t('trip.tabs.plan') },
+    { id: 'buchungen', label: t('trip.tabs.reservations'), shortLabel: t('trip.tabs.reservationsShort') },
+    ...(enabledAddons.packing ? [{ id: 'packliste', label: t('trip.tabs.packing'), shortLabel: t('trip.tabs.packingShort') }] : []),
+    ...(enabledAddons.budget ? [{ id: 'finanzplan', label: t('trip.tabs.budget') }] : []),
+    ...(enabledAddons.documents ? [{ id: 'dateien', label: t('trip.tabs.files') }] : []),
+    ...(enabledAddons.collab ? [{ id: 'collab', label: 'Collab' }] : []),
+  ]
+
+  const [activeTab, setActiveTab] = useState<string>(() => {
+    const saved = sessionStorage.getItem(`trip-tab-${tripId}`)
+    return saved || 'plan'
+  })
+
+  const handleTabChange = (tabId: string): void => {
+    setActiveTab(tabId)
+    sessionStorage.setItem(`trip-tab-${tripId}`, tabId)
+    if (tabId === 'finanzplan') tripStore.loadBudgetItems?.(tripId)
+    if (tabId === 'dateien' && (!files || files.length === 0)) tripStore.loadFiles?.(tripId)
+  }
+  const { leftWidth, rightWidth, leftCollapsed, rightCollapsed, setLeftCollapsed, setRightCollapsed, startResizeLeft, startResizeRight } = useResizablePanels()
+  const { selectedPlaceId, selectedAssignmentId, setSelectedPlaceId, selectAssignment } = usePlaceSelection()
+  const [showDayDetail, setShowDayDetail] = useState<Day | null>(null)
+  const [showPlaceForm, setShowPlaceForm] = useState<boolean>(false)
+  const [editingPlace, setEditingPlace] = useState<Place | null>(null)
+  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string } | null>(null)
+  const [editingAssignmentId, setEditingAssignmentId] = useState<number | null>(null)
+  const [showTripForm, setShowTripForm] = useState<boolean>(false)
+  const [showMembersModal, setShowMembersModal] = useState<boolean>(false)
+  const [showReservationModal, setShowReservationModal] = useState<boolean>(false)
+  const [editingReservation, setEditingReservation] = useState<Reservation | null>(null)
+  const [fitKey, setFitKey] = useState<number>(0)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null)
+  const [deletePlaceId, setDeletePlaceId] = useState<number | null>(null)
+
+  // Load trip + files (needed for place inspector file section)
+  useEffect(() => {
+    if (tripId) {
+      tripStore.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
+      tripStore.loadFiles(tripId)
+      loadAccommodations()
+      tripsApi.getMembers(tripId).then(d => {
+        // Combine owner + members into one list
+        const all = [d.owner, ...(d.members || [])].filter(Boolean)
+        setTripMembers(all)
+      }).catch(() => {})
+    }
+  }, [tripId])
+
+  useEffect(() => {
+    if (tripId) tripStore.loadReservations(tripId)
+  }, [tripId])
+
+  useTripWebSocket(tripId)
+
+  const mapPlaces = useCallback(() => {
+    return places.filter(p => p.lat && p.lng)
+  }, [places])
+
+  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation(tripStore, selectedDayId)
+
+  const handleSelectDay = useCallback((dayId, skipFit) => {
+    const changed = dayId !== selectedDayId
+    tripStore.setSelectedDay(dayId)
+    if (changed && !skipFit) setFitKey(k => k + 1)
+    setMobileSidebarOpen(null)
+    updateRouteForDay(dayId)
+  }, [tripStore, updateRouteForDay, selectedDayId])
+
+  const handlePlaceClick = useCallback((placeId, assignmentId) => {
+    if (assignmentId) {
+      selectAssignment(assignmentId, placeId)
+    } else {
+      setSelectedPlaceId(placeId)
+    }
+    if (placeId) { setShowDayDetail(null); setLeftCollapsed(false); setRightCollapsed(false) }
+  }, [selectAssignment, setSelectedPlaceId])
+
+  const handleMarkerClick = useCallback((placeId) => {
+    const opening = placeId !== undefined
+    setSelectedPlaceId(prev => prev === placeId ? null : placeId)
+    if (opening) { setLeftCollapsed(false); setRightCollapsed(false) }
+  }, [])
+
+  const handleMapClick = useCallback(() => {
+    setSelectedPlaceId(null)
+  }, [])
+
+  const handleMapContextMenu = useCallback(async (e) => {
+    e.originalEvent?.preventDefault()
+    const { lat, lng } = e.latlng
+    setPrefillCoords({ lat, lng })
+    setEditingPlace(null)
+    setEditingAssignmentId(null)
+    setShowPlaceForm(true)
+    try {
+      const { mapsApi } = await import('../api/client')
+      const data = await mapsApi.reverse(lat, lng, language)
+      if (data.name || data.address) {
+        setPrefillCoords(prev => prev ? { ...prev, name: data.name || '', address: data.address || '' } : prev)
+      }
+    } catch { /* best effort */ }
+  }, [language])
+
+  const handleSavePlace = useCallback(async (data) => {
+    const pendingFiles = data._pendingFiles
+    delete data._pendingFiles
+    if (editingPlace) {
+      // Always strip time fields from place update — time is per-assignment only
+      const { place_time, end_time, ...placeData } = data
+      await tripStore.updatePlace(tripId, editingPlace.id, placeData)
+      // If editing from assignment context, save time per-assignment
+      if (editingAssignmentId) {
+        await assignmentsApi.updateTime(tripId, editingAssignmentId, { place_time: place_time || null, end_time: end_time || null })
+        await tripStore.refreshDays(tripId)
+      }
+      // Upload pending files with place_id
+      if (pendingFiles?.length > 0) {
+        for (const file of pendingFiles) {
+          const fd = new FormData()
+          fd.append('file', file)
+          fd.append('place_id', editingPlace.id)
+          try { await tripStore.addFile(tripId, fd) } catch {}
+        }
+      }
+      toast.success(t('trip.toast.placeUpdated'))
+    } else {
+      const place = await tripStore.addPlace(tripId, data)
+      if (pendingFiles?.length > 0 && place?.id) {
+        for (const file of pendingFiles) {
+          const fd = new FormData()
+          fd.append('file', file)
+          fd.append('place_id', place.id)
+          try { await tripStore.addFile(tripId, fd) } catch {}
+        }
+      }
+      toast.success(t('trip.toast.placeAdded'))
+    }
+  }, [editingPlace, editingAssignmentId, tripId, tripStore, toast])
+
+  const handleDeletePlace = useCallback((placeId) => {
+    setDeletePlaceId(placeId)
+  }, [])
+
+  const confirmDeletePlace = useCallback(async () => {
+    if (!deletePlaceId) return
+    try {
+      await tripStore.deletePlace(tripId, deletePlaceId)
+      if (selectedPlaceId === deletePlaceId) setSelectedPlaceId(null)
+      toast.success(t('trip.toast.placeDeleted'))
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }, [deletePlaceId, tripId, tripStore, toast, selectedPlaceId])
+
+  const handleAssignToDay = useCallback(async (placeId, dayId, position) => {
+    const target = dayId || selectedDayId
+    if (!target) { toast.error(t('trip.toast.selectDay')); return }
+    try {
+      await tripStore.assignPlaceToDay(tripId, target, placeId, position)
+      toast.success(t('trip.toast.assignedToDay'))
+      updateRouteForDay(target)
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }, [selectedDayId, tripId, tripStore, toast, updateRouteForDay])
+
+  const handleRemoveAssignment = useCallback(async (dayId, assignmentId) => {
+    try {
+      await tripStore.removeAssignment(tripId, dayId, assignmentId)
+    }
+    catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }, [tripId, tripStore, toast, updateRouteForDay])
+
+  const handleReorder = useCallback((dayId, orderedIds) => {
+    try {
+      tripStore.reorderAssignments(tripId, dayId, orderedIds).catch(() => {})
+      // Update route immediately from orderedIds
+      const dayItems = tripStore.assignments[String(dayId)] || []
+      const ordered = orderedIds.map(id => dayItems.find(a => a.id === id)).filter(Boolean)
+      const waypoints = ordered.map(a => a.place).filter(p => p?.lat && p?.lng)
+      if (waypoints.length >= 2) setRoute(waypoints.map(p => [p.lat, p.lng]))
+      else setRoute(null)
+      setRouteInfo(null)
+    }
+    catch { toast.error(t('trip.toast.reorderError')) }
+  }, [tripId, tripStore, toast])
+
+  const handleUpdateDayTitle = useCallback(async (dayId, title) => {
+    try { await tripStore.updateDayTitle(tripId, dayId, title) }
+    catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }, [tripId, tripStore, toast])
+
+  const handleSaveReservation = async (data) => {
+    try {
+      if (editingReservation) {
+        const r = await tripStore.updateReservation(tripId, editingReservation.id, data)
+        toast.success(t('trip.toast.reservationUpdated'))
+        setShowReservationModal(false)
+        if (data.type === 'hotel') {
+          accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
+        }
+        return r
+      } else {
+        const r = await tripStore.addReservation(tripId, { ...data, day_id: selectedDayId || null })
+        toast.success(t('trip.toast.reservationAdded'))
+        setShowReservationModal(false)
+        // Refresh accommodations if hotel was created
+        if (data.type === 'hotel') {
+          accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
+        }
+        return r
+      }
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }
+
+  const handleDeleteReservation = async (id) => {
+    try {
+      await tripStore.deleteReservation(tripId, id)
+      toast.success(t('trip.toast.deleted'))
+      // Refresh accommodations in case a hotel booking was deleted
+      accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
+    }
+    catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
+  }
+
+  const selectedPlace = selectedPlaceId ? places.find(p => p.id === selectedPlaceId) : null
+
+  // Build placeId → order-number map from the selected day's assignments
+  const dayOrderMap = useMemo(() => {
+    if (!selectedDayId) return {}
+    const da = assignments[String(selectedDayId)] || []
+    const sorted = [...da].sort((a, b) => a.order_index - b.order_index)
+    const map = {}
+    sorted.forEach((a, i) => {
+      if (!a.place?.id) return
+      if (!map[a.place.id]) map[a.place.id] = []
+      map[a.place.id].push(i + 1)
+    })
+    return map
+  }, [selectedDayId, assignments])
+
+  // Places assigned to selected day (with coords) — used for map fitting
+  const dayPlaces = useMemo(() => {
+    if (!selectedDayId) return []
+    const da = assignments[String(selectedDayId)] || []
+    return da.map(a => a.place).filter(p => p?.lat && p?.lng)
+  }, [selectedDayId, assignments])
+
+  const mapTileUrl = settings.map_tile_url || 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  const defaultCenter = [settings.default_lat || 48.8566, settings.default_lng || 2.3522]
+  const defaultZoom = settings.default_zoom || 10
+
+  const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif" }
+
+  if (isLoading) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f9fafb', ...fontStyle }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+          <div style={{ width: 32, height: 32, border: '3px solid rgba(0,0,0,0.1)', borderTopColor: '#111827', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
+          <span style={{ fontSize: 13, color: '#9ca3af' }}>{t('trip.loading')}</span>
+        </div>
+      </div>
+    )
+  }
+  if (!trip) return null
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', ...fontStyle }}>
+      <Navbar tripTitle={trip.title} tripId={tripId} showBack onBack={() => navigate('/dashboard')} onShare={() => setShowMembersModal(true)} />
+
+      <div style={{
+        position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, zIndex: 40,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        padding: '0 12px',
+        background: 'var(--bg-elevated)',
+        backdropFilter: 'blur(16px)',
+        WebkitBackdropFilter: 'blur(16px)',
+        borderBottom: '1px solid var(--border-faint)',
+        height: 44,
+        overflowX: 'auto', scrollbarWidth: 'none', msOverflowStyle: 'none',
+        gap: 2,
+      }}>
+        {TRIP_TABS.map(tab => {
+          const isActive = activeTab === tab.id
+          return (
+            <button
+              key={tab.id}
+              onClick={() => handleTabChange(tab.id)}
+              style={{
+                flexShrink: 0,
+                padding: '5px 14px', borderRadius: 20, border: 'none', cursor: 'pointer',
+                fontSize: 13, fontWeight: isActive ? 600 : 400,
+                background: isActive ? 'var(--accent)' : 'transparent',
+                color: isActive ? 'var(--accent-text)' : 'var(--text-muted)',
+                fontFamily: 'inherit', transition: 'all 0.15s',
+              }}
+              onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = isActive ? 'var(--accent-text)' : 'var(--text-primary)' }}
+              onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = isActive ? 'var(--accent-text)' : 'var(--text-muted)' }}
+            >{tab.shortLabel
+                ? <><span className="sm:hidden">{tab.shortLabel}</span><span className="hidden sm:inline">{tab.label}</span></>
+                : tab.label
+              }</button>
+          )
+        })}
+      </div>
+
+      {/* Offset by navbar + tab bar (44px) */}
+      <div style={{ position: 'fixed', top: 'calc(var(--nav-h) + 44px)', left: 0, right: 0, bottom: 0, overflow: 'hidden', overscrollBehavior: 'contain' }}>
+
+        {activeTab === 'plan' && (
+          <div style={{ position: 'absolute', inset: 0 }}>
+            <MapView
+              places={mapPlaces()}
+              dayPlaces={dayPlaces}
+              route={route}
+              routeSegments={routeSegments}
+              selectedPlaceId={selectedPlaceId}
+              onMarkerClick={handleMarkerClick}
+              onMapClick={handleMapClick}
+              onMapContextMenu={handleMapContextMenu}
+              center={defaultCenter}
+              zoom={defaultZoom}
+              tileUrl={mapTileUrl}
+              fitKey={fitKey}
+              dayOrderMap={dayOrderMap}
+              leftWidth={leftCollapsed ? 0 : leftWidth}
+              rightWidth={rightCollapsed ? 0 : rightWidth}
+              hasInspector={!!selectedPlace}
+            />
+
+
+            <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
+              <button onClick={() => setLeftCollapsed(c => !c)}
+                style={{
+                  position: leftCollapsed ? 'fixed' : 'absolute', top: leftCollapsed ? 'calc(var(--nav-h) + 44px + 14px)' : 14, left: leftCollapsed ? 10 : undefined, right: leftCollapsed ? undefined : -28, zIndex: -1,
+                  width: 36, height: 36, borderRadius: leftCollapsed ? 10 : '0 10px 10px 0',
+                  background: leftCollapsed ? '#000' : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                  boxShadow: leftCollapsed ? '0 2px 12px rgba(0,0,0,0.2)' : 'none', border: 'none',
+                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: leftCollapsed ? '#fff' : 'var(--text-faint)', transition: 'color 0.15s',
+                }}
+                onMouseEnter={e => { if (!leftCollapsed) e.currentTarget.style.color = 'var(--text-primary)' }}
+                onMouseLeave={e => { if (!leftCollapsed) e.currentTarget.style.color = 'var(--text-faint)' }}>
+                {leftCollapsed ? <PanelLeftOpen size={16} /> : <PanelLeftClose size={16} />}
+              </button>
+
+              <div style={{
+                width: leftCollapsed ? 0 : leftWidth, height: '100%',
+                background: 'var(--sidebar-bg)',
+                backdropFilter: 'blur(24px) saturate(180%)',
+                WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+                boxShadow: leftCollapsed ? 'none' : 'var(--sidebar-shadow)',
+                borderRadius: 16,
+                overflow: 'hidden', display: 'flex', flexDirection: 'column',
+                transition: 'width 0.25s ease',
+                opacity: leftCollapsed ? 0 : 1,
+              }}>
+                <DayPlanSidebar
+                  tripId={tripId}
+                  trip={trip}
+                  days={days}
+                  places={places}
+                  categories={categories}
+                  assignments={assignments}
+                  selectedDayId={selectedDayId}
+                  selectedPlaceId={selectedPlaceId}
+                  selectedAssignmentId={selectedAssignmentId}
+                  onSelectDay={handleSelectDay}
+                  onPlaceClick={handlePlaceClick}
+                  onReorder={handleReorder}
+                  onUpdateDayTitle={handleUpdateDayTitle}
+                  onAssignToDay={handleAssignToDay}
+                  onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText, walkingText: r.walkingText, drivingText: r.drivingText }) } else { setRoute(null); setRouteInfo(null) } }}
+                  reservations={reservations}
+                  onAddReservation={(dayId) => { setEditingReservation(null); tripStore.setSelectedDay(dayId); setShowReservationModal(true) }}
+                  onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }}
+                  onRemoveAssignment={handleRemoveAssignment}
+                  onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true) }}
+                  onDeletePlace={(placeId) => handleDeletePlace(placeId)}
+                  accommodations={tripAccommodations}
+                />
+                {!leftCollapsed && (
+                  <div
+                    onMouseDown={startResizeLeft}
+                    style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 4, cursor: 'col-resize', background: 'transparent' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.08)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  />
+                )}
+              </div>
+            </div>
+
+            <div className="hidden md:block" style={{ position: 'absolute', right: 10, top: 10, bottom: 10, zIndex: 20 }}>
+              <button onClick={() => setRightCollapsed(c => !c)}
+                style={{
+                  position: rightCollapsed ? 'fixed' : 'absolute', top: rightCollapsed ? 'calc(var(--nav-h) + 44px + 14px)' : 14, right: rightCollapsed ? 10 : undefined, left: rightCollapsed ? undefined : -28, zIndex: -1,
+                  width: 36, height: 36, borderRadius: rightCollapsed ? 10 : '10px 0 0 10px',
+                  background: rightCollapsed ? '#000' : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                  boxShadow: rightCollapsed ? '0 2px 12px rgba(0,0,0,0.2)' : 'none', border: 'none',
+                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: rightCollapsed ? '#fff' : 'var(--text-faint)', transition: 'color 0.15s',
+                }}
+                onMouseEnter={e => { if (!rightCollapsed) e.currentTarget.style.color = 'var(--text-primary)' }}
+                onMouseLeave={e => { if (!rightCollapsed) e.currentTarget.style.color = 'var(--text-faint)' }}>
+                {rightCollapsed ? <PanelRightOpen size={16} /> : <PanelRightClose size={16} />}
+              </button>
+
+              <div style={{
+                width: rightCollapsed ? 0 : rightWidth, height: '100%',
+                background: 'var(--sidebar-bg)',
+                backdropFilter: 'blur(24px) saturate(180%)',
+                WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+                boxShadow: rightCollapsed ? 'none' : 'var(--sidebar-shadow)',
+                borderRadius: 16,
+                overflow: 'hidden', display: 'flex', flexDirection: 'column',
+                transition: 'width 0.25s ease',
+                opacity: rightCollapsed ? 0 : 1,
+              }}>
+                {!rightCollapsed && (
+                  <div
+                    onMouseDown={startResizeRight}
+                    style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, cursor: 'col-resize', background: 'transparent' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.08)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  />
+                )}
+                <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', paddingLeft: 4 }}>
+                  <PlacesSidebar
+                    places={places}
+                    categories={categories}
+                    assignments={assignments}
+                    selectedDayId={selectedDayId}
+                    selectedPlaceId={selectedPlaceId}
+                    onPlaceClick={handlePlaceClick}
+                    onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true) }}
+                    onAssignToDay={handleAssignToDay}
+                    onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true) }}
+                    onDeletePlace={(placeId) => handleDeletePlace(placeId)}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Mobile sidebar buttons — portal to body to escape Leaflet touch handling */}
+            {activeTab === 'plan' && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && ReactDOM.createPortal(
+              <div className="flex md:hidden" style={{ position: 'fixed', top: 'calc(var(--nav-h) + 44px + 12px)', left: 12, right: 12, justifyContent: 'space-between', zIndex: 100, pointerEvents: 'none' }}>
+                <button onClick={() => setMobileSidebarOpen('left')}
+                  style={{ pointerEvents: 'auto', background: 'var(--bg-card)', color: 'var(--text-primary)', backdropFilter: 'blur(12px)', border: '1px solid var(--border-primary)', borderRadius: 24, padding: '11px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer', boxShadow: '0 2px 12px rgba(0,0,0,0.15)', minHeight: 44, fontFamily: 'inherit', touchAction: 'manipulation' }}>
+                  {t('trip.mobilePlan')}
+                </button>
+                <button onClick={() => setMobileSidebarOpen('right')}
+                  style={{ pointerEvents: 'auto', background: 'var(--bg-card)', color: 'var(--text-primary)', backdropFilter: 'blur(12px)', border: '1px solid var(--border-primary)', borderRadius: 24, padding: '11px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer', boxShadow: '0 2px 12px rgba(0,0,0,0.15)', minHeight: 44, fontFamily: 'inherit', touchAction: 'manipulation' }}>
+                  {t('trip.mobilePlaces')}
+                </button>
+              </div>,
+              document.body
+            )}
+
+            {showDayDetail && !selectedPlace && (() => {
+              const currentDay = days.find(d => d.id === showDayDetail.id) || showDayDetail
+              const dayAssignments = assignments[String(currentDay.id)] || []
+              const geoPlace = dayAssignments.find(a => a.place?.lat && a.place?.lng)?.place || places.find(p => p.lat && p.lng)
+              return (
+                <DayDetailPanel
+                  day={currentDay}
+                  days={days}
+                  places={places}
+                  categories={categories}
+                  tripId={tripId}
+                  assignments={assignments}
+                  reservations={reservations}
+                  lat={geoPlace?.lat}
+                  lng={geoPlace?.lng}
+                  onClose={() => setShowDayDetail(null)}
+                  onAccommodationChange={loadAccommodations}
+                />
+              )
+            })()}
+
+            {selectedPlace && (
+              <PlaceInspector
+                place={selectedPlace}
+                categories={categories}
+                days={days}
+                selectedDayId={selectedDayId}
+                selectedAssignmentId={selectedAssignmentId}
+                assignments={assignments}
+                reservations={reservations}
+                onClose={() => setSelectedPlaceId(null)}
+                onEdit={() => {
+                  // When editing from assignment context, use assignment-level times
+                  if (selectedAssignmentId) {
+                    const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
+                    const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
+                    setEditingPlace(placeWithAssignmentTimes)
+                  } else {
+                    setEditingPlace(selectedPlace)
+                  }
+                  setEditingAssignmentId(selectedAssignmentId || null)
+                  setShowPlaceForm(true)
+                }}
+                onDelete={() => handleDeletePlace(selectedPlace.id)}
+                onAssignToDay={handleAssignToDay}
+                onRemoveAssignment={handleRemoveAssignment}
+                files={files}
+                onFileUpload={(fd) => tripStore.addFile(tripId, fd)}
+                tripMembers={tripMembers}
+                onSetParticipants={async (assignmentId, dayId, userIds) => {
+                  try {
+                    const data = await assignmentsApi.setParticipants(tripId, assignmentId, userIds)
+                    useTripStore.setState(state => ({
+                      assignments: {
+                        ...state.assignments,
+                        [String(dayId)]: (state.assignments[String(dayId)] || []).map(a =>
+                          a.id === assignmentId ? { ...a, participants: data.participants } : a
+                        ),
+                      }
+                    }))
+                  } catch {}
+                }}
+                onUpdatePlace={async (placeId, data) => { try { await tripStore.updatePlace(tripId, placeId, data) } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') } }}
+              />
+            )}
+
+            {mobileSidebarOpen && ReactDOM.createPortal(
+              <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 9999 }} onClick={() => setMobileSidebarOpen(null)}>
+                <div style={{ position: 'absolute', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0, background: 'var(--bg-card)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderBottom: '1px solid var(--border-secondary)' }}>
+                    <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{mobileSidebarOpen === 'left' ? t('trip.mobilePlan') : t('trip.mobilePlaces')}</span>
+                    <button onClick={() => setMobileSidebarOpen(null)} style={{ background: 'var(--bg-tertiary)', border: 'none', borderRadius: '50%', width: 28, height: 28, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-primary)' }}>
+                      <X size={14} />
+                    </button>
+                  </div>
+                  <div style={{ flex: 1, overflow: 'auto' }}>
+                    {mobileSidebarOpen === 'left'
+                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={handlePlaceClick} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} onAddReservation={(dayId) => { setEditingReservation(null); tripStore.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); setSelectedAssignmentId(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} />
+                      : <PlacesSidebar places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={handlePlaceClick} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} days={days} isMobile />
+                    }
+                  </div>
+                </div>
+              </div>,
+              document.body
+            )}
+          </div>
+        )}
+
+        {activeTab === 'buchungen' && (
+          <div style={{ height: '100%', maxWidth: 1200, margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto', overscrollBehavior: 'contain' }}>
+            <ReservationsPanel
+              tripId={tripId}
+              reservations={reservations}
+              days={days}
+              assignments={assignments}
+              files={files}
+              onAdd={() => { setEditingReservation(null); setShowReservationModal(true) }}
+              onEdit={(r) => { setEditingReservation(r); setShowReservationModal(true) }}
+              onDelete={handleDeleteReservation}
+              onNavigateToFiles={() => handleTabChange('dateien')}
+            />
+          </div>
+        )}
+
+        {activeTab === 'packliste' && (
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1200, margin: '0 auto', width: '100%', padding: '8px 0' }}>
+            <PackingListPanel tripId={tripId} items={packingItems} />
+          </div>
+        )}
+
+        {activeTab === 'finanzplan' && (
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1800, margin: '0 auto', width: '100%', padding: '8px 0' }}>
+            <BudgetPanel tripId={tripId} tripMembers={tripMembers} />
+          </div>
+        )}
+
+        {activeTab === 'dateien' && (
+          <div style={{ height: '100%', overflow: 'hidden', overscrollBehavior: 'contain' }}>
+            <FileManager
+              files={files || []}
+              onUpload={(fd) => tripStore.addFile(tripId, fd)}
+              onDelete={(id) => tripStore.deleteFile(tripId, id)}
+              onUpdate={(id, data) => tripStore.loadFiles(tripId)}
+              places={places}
+              days={days}
+              assignments={assignments}
+              reservations={reservations}
+              tripId={tripId}
+              allowedFileTypes={allowedFileTypes}
+            />
+          </div>
+        )}
+
+        {activeTab === 'collab' && (
+          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+            <CollabPanel tripId={tripId} tripMembers={tripMembers} />
+          </div>
+        )}
+      </div>
+
+      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingAssignmentId ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripStore.addCategory?.(cat)} />
+      <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripStore.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
+      <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
+      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={(fd) => tripStore.addFile(tripId, fd)} onFileDelete={(id) => tripStore.deleteFile(tripId, id)} accommodations={tripAccommodations} />
+      <ConfirmDialog
+        isOpen={!!deletePlaceId}
+        onClose={() => setDeletePlaceId(null)}
+        onConfirm={confirmDeletePlace}
+        title={t('common.delete')}
+        message={t('trip.confirm.deletePlace')}
+      />
+    </div>
+  )
+}

client/src/pages/VacayPage.tsx

@@ -0,0 +1,282 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import ReactDOM from 'react-dom'
+import { useTranslation } from '../i18n'
+import { useVacayStore } from '../store/vacayStore'
+import { addListener, removeListener } from '../api/websocket'
+import Navbar from '../components/Layout/Navbar'
+import VacayCalendar from '../components/Vacay/VacayCalendar'
+import VacayPersons from '../components/Vacay/VacayPersons'
+import VacayStats from '../components/Vacay/VacayStats'
+import VacaySettings from '../components/Vacay/VacaySettings'
+import { Plus, Minus, ChevronLeft, ChevronRight, Settings, CalendarDays, AlertTriangle, Users, Eye, Pencil, Trash2, Unlink, ShieldCheck, SlidersHorizontal } from 'lucide-react'
+import Modal from '../components/shared/Modal'
+
+export default function VacayPage(): React.ReactElement {
+  const { t } = useTranslation()
+  const { years, selectedYear, setSelectedYear, addYear, removeYear, loadAll, loadPlan, loadEntries, loadStats, loadHolidays, loading, incomingInvites, acceptInvite, declineInvite, plan } = useVacayStore()
+  const [showSettings, setShowSettings] = useState<boolean>(false)
+  const [deleteYear, setDeleteYear] = useState<number | null>(null)
+  const [showMobileSidebar, setShowMobileSidebar] = useState<boolean>(false)
+
+  useEffect(() => { loadAll() }, [])
+
+  // Live sync via WebSocket
+  const handleWsMessage = useCallback((msg: { type: string }) => {
+    if (msg.type === 'vacay:update' || msg.type === 'vacay:settings') {
+      loadPlan()
+      loadEntries(selectedYear)
+      loadStats(selectedYear)
+      if (msg.type === 'vacay:settings') loadAll()
+    }
+    if (msg.type === 'vacay:invite' || msg.type === 'vacay:accepted' || msg.type === 'vacay:declined' || msg.type === 'vacay:cancelled' || msg.type === 'vacay:dissolved') {
+      loadAll()
+    }
+  }, [selectedYear])
+
+  useEffect(() => {
+    addListener(handleWsMessage)
+    return () => removeListener(handleWsMessage)
+  }, [handleWsMessage])
+  useEffect(() => {
+    if (selectedYear) { loadEntries(selectedYear); loadStats(selectedYear); loadHolidays(selectedYear) }
+  }, [selectedYear])
+
+  const handleAddYear = () => {
+    const nextYear = years.length > 0 ? Math.max(...years) + 1 : new Date().getFullYear()
+    addYear(nextYear)
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+        <Navbar />
+        <div className="flex items-center justify-center" style={{ paddingTop: 'var(--nav-h)', minHeight: 'calc(100vh - var(--nav-h))' }}>
+          <div className="w-8 h-8 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
+        </div>
+      </div>
+    )
+  }
+
+  // Sidebar content (shared between desktop sidebar and mobile drawer)
+  const sidebarContent = (
+    <>
+      {/* Year Selector */}
+      <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>{t('vacay.year')}</span>
+          <button onClick={handleAddYear} className="p-0.5 rounded transition-colors" style={{ color: 'var(--text-faint)' }} title={t('vacay.addYear')}>
+            <Plus size={14} />
+          </button>
+        </div>
+        <div className="flex items-center justify-between mb-2">
+          <button onClick={() => { const idx = years.indexOf(selectedYear); if (idx > 0) setSelectedYear(years[idx - 1]) }} disabled={years.indexOf(selectedYear) <= 0} className="p-1 lg:p-1 p-2 rounded-lg disabled:opacity-20 transition-colors" style={{ background: 'var(--bg-secondary)' }}>
+            <ChevronLeft size={16} style={{ color: 'var(--text-muted)' }} />
+          </button>
+          <span className="text-xl font-bold tabular-nums" style={{ color: 'var(--text-primary)' }}>{selectedYear}</span>
+          <button onClick={() => { const idx = years.indexOf(selectedYear); if (idx < years.length - 1) setSelectedYear(years[idx + 1]) }} disabled={years.indexOf(selectedYear) >= years.length - 1} className="p-1 lg:p-1 p-2 rounded-lg disabled:opacity-20 transition-colors" style={{ background: 'var(--bg-secondary)' }}>
+            <ChevronRight size={16} style={{ color: 'var(--text-muted)' }} />
+          </button>
+        </div>
+        <div className="grid grid-cols-4 gap-1">
+          {years.map(y => (
+            <div key={y} onClick={() => setSelectedYear(y)}
+              className="group relative py-1.5 rounded-lg text-xs font-medium transition-all text-center cursor-pointer"
+              style={{
+                background: y === selectedYear ? 'var(--text-primary)' : 'var(--bg-secondary)',
+                color: y === selectedYear ? 'var(--bg-card)' : 'var(--text-muted)',
+              }}>
+              {y}
+              {years.length > 1 && (
+                <span onClick={e => { e.stopPropagation(); setDeleteYear(y); setShowMobileSidebar(false) }}
+                  className="absolute -top-1 -right-1 w-3.5 h-3.5 rounded-full bg-red-500 text-white text-[7px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
+                  <Minus size={7} />
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <VacayPersons />
+
+      {/* Legend */}
+      {(plan?.holidays_enabled || plan?.company_holidays_enabled || plan?.block_weekends) && (
+        <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+          <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>{t('vacay.legend')}</span>
+          <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1.5">
+            {plan?.holidays_enabled && <LegendItem color="#fecaca" label={t('vacay.publicHoliday')} />}
+            {plan?.company_holidays_enabled && <LegendItem color="#fde68a" label={t('vacay.companyHoliday')} />}
+            {plan?.block_weekends && <LegendItem color="#e5e7eb" label={t('vacay.weekend')} />}
+          </div>
+        </div>
+      )}
+
+      <VacayStats />
+    </>
+  )
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+      <Navbar />
+
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
+        <div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-4 sm:mb-5">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
+                <CalendarDays size={18} style={{ color: 'var(--text-primary)' }} />
+              </div>
+              <div>
+                <h1 className="text-lg sm:text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Vacay</h1>
+                <p className="text-xs hidden sm:block" style={{ color: 'var(--text-muted)' }}>{t('vacay.subtitle')}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {/* Mobile sidebar toggle */}
+              <button
+                onClick={() => setShowMobileSidebar(true)}
+                className="lg:hidden flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+              >
+                <SlidersHorizontal size={14} />
+              </button>
+              <button
+                onClick={() => setShowSettings(true)}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+              >
+                <Settings size={14} />
+                <span className="hidden sm:inline">{t('vacay.settings')}</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Main layout */}
+          <div className="flex gap-4 items-start">
+            {/* Desktop Sidebar */}
+            <div className="hidden lg:flex w-[240px] shrink-0 flex-col gap-3 sticky top-[70px]">
+              {sidebarContent}
+            </div>
+
+            {/* Calendar */}
+            <div className="flex-1 min-w-0">
+              <VacayCalendar />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Sidebar Drawer */}
+      {showMobileSidebar && ReactDOM.createPortal(
+        <div className="fixed inset-0 lg:hidden" style={{ zIndex: 99980 }}>
+          <div className="absolute inset-0" style={{ background: 'rgba(0,0,0,0.4)' }} onClick={() => setShowMobileSidebar(false)} />
+          <div className="absolute left-0 top-0 bottom-0 w-[280px] overflow-y-auto p-3 flex flex-col gap-3"
+            style={{ background: 'var(--bg-primary)', boxShadow: '4px 0 24px rgba(0,0,0,0.15)', animation: 'slideInLeft 0.2s ease-out' }}>
+            {sidebarContent}
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Settings Modal */}
+      <Modal isOpen={showSettings} onClose={() => setShowSettings(false)} title={t('vacay.settings')} size="md">
+        <VacaySettings onClose={() => setShowSettings(false)} />
+      </Modal>
+
+      {/* Delete Year Modal */}
+      <Modal isOpen={deleteYear !== null} onClose={() => setDeleteYear(null)} title={t('vacay.removeYear')} size="sm">
+        <div className="space-y-4">
+          <div className="flex gap-3 p-3 rounded-lg" style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.15)' }}>
+            <AlertTriangle size={18} className="text-red-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+                {t('vacay.removeYearConfirm', { year: deleteYear })}
+              </p>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>
+                {t('vacay.removeYearHint')}
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-3 justify-end">
+            <button onClick={() => setDeleteYear(null)} className="px-4 py-2 text-sm rounded-lg transition-colors" style={{ color: 'var(--text-muted)', border: '1px solid var(--border-primary)' }}>
+              {t('common.cancel')}
+            </button>
+            <button onClick={async () => { await removeYear(deleteYear); setDeleteYear(null) }} className="px-4 py-2 text-sm bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors">
+              {t('vacay.remove')}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Incoming invite — forced fullscreen modal */}
+      {incomingInvites.length > 0 && ReactDOM.createPortal(
+        <div className="fixed inset-0 flex items-center justify-center px-4"
+          style={{ zIndex: 99995, backgroundColor: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)' }}>
+          {incomingInvites.map(inv => (
+            <div key={inv.id} className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+              style={{ background: 'var(--bg-card)', animation: 'modalIn 0.25s ease-out' }}>
+              <div className="px-6 pt-6 pb-4 text-center">
+                <div className="w-14 h-14 rounded-full mx-auto mb-4 flex items-center justify-center text-lg font-bold"
+                  style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}>
+                  {inv.username?.[0]?.toUpperCase()}
+                </div>
+                <h2 className="text-lg font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
+                  {t('vacay.inviteTitle')}
+                </h2>
+                <p className="text-sm" style={{ color: 'var(--text-muted)' }}>
+                  <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>{inv.username}</span> {t('vacay.inviteWantsToFuse')}
+                </p>
+              </div>
+              <div className="px-6 pb-4 space-y-2">
+                <InfoItem icon={Eye} text={t('vacay.fuseInfo1')} />
+                <InfoItem icon={Pencil} text={t('vacay.fuseInfo2')} />
+                <InfoItem icon={Trash2} text={t('vacay.fuseInfo3')} />
+                <InfoItem icon={ShieldCheck} text={t('vacay.fuseInfo4')} />
+                <InfoItem icon={Unlink} text={t('vacay.fuseInfo5')} />
+              </div>
+              <div className="px-6 pb-6 flex gap-3">
+                <button onClick={() => declineInvite(inv.plan_id)}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium rounded-xl transition-colors"
+                  style={{ color: 'var(--text-muted)', border: '1px solid var(--border-primary)' }}>
+                  {t('vacay.decline')}
+                </button>
+                <button onClick={() => acceptInvite(inv.plan_id)}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium rounded-xl transition-colors"
+                  style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}>
+                  {t('vacay.acceptFusion')}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>,
+        document.body
+      )}
+
+      <style>{`
+        @keyframes slideInLeft {
+          from { transform: translateX(-100%); }
+          to { transform: translateX(0); }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+function InfoItem({ icon: Icon, text }: { icon: React.ComponentType<{ size?: number; className?: string; style?: React.CSSProperties }>; text: string }): React.ReactElement {
+  return (
+    <div className="flex items-start gap-3 px-3 py-2 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
+      <Icon size={15} className="shrink-0 mt-0.5" style={{ color: 'var(--text-muted)' }} />
+      <span className="text-xs" style={{ color: 'var(--text-primary)' }}>{text}</span>
+    </div>
+  )
+}
+
+function LegendItem({ color, label }: { color: string; label: string }): React.ReactElement {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-4 h-3 rounded" style={{ background: color, border: `1px solid ${color}` }} />
+      <span className="text-[11px]" style={{ color: 'var(--text-muted)' }}>{label}</span>
+    </div>
+  )
+}

client/src/store/authStore.ts

@@ -0,0 +1,198 @@
+import { create } from 'zustand'
+import { authApi } from '../api/client'
+import { connect, disconnect } from '../api/websocket'
+import type { User } from '../types'
+import { getApiErrorMessage } from '../types'
+
+interface AuthResponse {
+  user: User
+  token: string
+}
+
+interface AvatarResponse {
+  avatar_url: string
+}
+
+interface AuthState {
+  user: User | null
+  token: string | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  error: string | null
+  demoMode: boolean
+  hasMapsKey: boolean
+
+  login: (email: string, password: string) => Promise<AuthResponse>
+  register: (username: string, email: string, password: string) => Promise<AuthResponse>
+  logout: () => void
+  loadUser: () => Promise<void>
+  updateMapsKey: (key: string | null) => Promise<void>
+  updateApiKeys: (keys: Record<string, string | null>) => Promise<void>
+  updateProfile: (profileData: Partial<User>) => Promise<void>
+  uploadAvatar: (file: File) => Promise<AvatarResponse>
+  deleteAvatar: () => Promise<void>
+  setDemoMode: (val: boolean) => void
+  setHasMapsKey: (val: boolean) => void
+  demoLogin: () => Promise<AuthResponse>
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  user: null,
+  token: localStorage.getItem('auth_token') || null,
+  isAuthenticated: !!localStorage.getItem('auth_token'),
+  isLoading: false,
+  error: null,
+  demoMode: localStorage.getItem('demo_mode') === 'true',
+  hasMapsKey: false,
+
+  login: async (email: string, password: string) => {
+    set({ isLoading: true, error: null })
+    try {
+      const data = await authApi.login({ email, password })
+      localStorage.setItem('auth_token', data.token)
+      set({
+        user: data.user,
+        token: data.token,
+        isAuthenticated: true,
+        isLoading: false,
+        error: null,
+      })
+      connect(data.token)
+      return data
+    } catch (err: unknown) {
+      const error = getApiErrorMessage(err, 'Login failed')
+      set({ isLoading: false, error })
+      throw new Error(error)
+    }
+  },
+
+  register: async (username: string, email: string, password: string) => {
+    set({ isLoading: true, error: null })
+    try {
+      const data = await authApi.register({ username, email, password })
+      localStorage.setItem('auth_token', data.token)
+      set({
+        user: data.user,
+        token: data.token,
+        isAuthenticated: true,
+        isLoading: false,
+        error: null,
+      })
+      connect(data.token)
+      return data
+    } catch (err: unknown) {
+      const error = getApiErrorMessage(err, 'Registration failed')
+      set({ isLoading: false, error })
+      throw new Error(error)
+    }
+  },
+
+  logout: () => {
+    disconnect()
+    localStorage.removeItem('auth_token')
+    set({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+      error: null,
+    })
+  },
+
+  loadUser: async () => {
+    const token = get().token
+    if (!token) {
+      set({ isLoading: false })
+      return
+    }
+    set({ isLoading: true })
+    try {
+      const data = await authApi.me()
+      set({
+        user: data.user,
+        isAuthenticated: true,
+        isLoading: false,
+      })
+      connect(token)
+    } catch (err: unknown) {
+      localStorage.removeItem('auth_token')
+      set({
+        user: null,
+        token: null,
+        isAuthenticated: false,
+        isLoading: false,
+      })
+    }
+  },
+
+  updateMapsKey: async (key: string | null) => {
+    try {
+      await authApi.updateMapsKey(key)
+      set((state) => ({
+        user: state.user ? { ...state.user, maps_api_key: key || null } : null,
+      }))
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, 'Error saving API key'))
+    }
+  },
+
+  updateApiKeys: async (keys: Record<string, string | null>) => {
+    try {
+      const data = await authApi.updateApiKeys(keys)
+      set({ user: data.user })
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, 'Error saving API keys'))
+    }
+  },
+
+  updateProfile: async (profileData: Partial<User>) => {
+    try {
+      const data = await authApi.updateSettings(profileData)
+      set({ user: data.user })
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, 'Error updating profile'))
+    }
+  },
+
+  uploadAvatar: async (file: File) => {
+    const formData = new FormData()
+    formData.append('avatar', file)
+    const data = await authApi.uploadAvatar(formData)
+    set((state) => ({ user: state.user ? { ...state.user, avatar_url: data.avatar_url } : null }))
+    return data
+  },
+
+  deleteAvatar: async () => {
+    await authApi.deleteAvatar()
+    set((state) => ({ user: state.user ? { ...state.user, avatar_url: null } : null }))
+  },
+
+  setDemoMode: (val: boolean) => {
+    if (val) localStorage.setItem('demo_mode', 'true')
+    else localStorage.removeItem('demo_mode')
+    set({ demoMode: val })
+  },
+
+  setHasMapsKey: (val: boolean) => set({ hasMapsKey: val }),
+
+  demoLogin: async () => {
+    set({ isLoading: true, error: null })
+    try {
+      const data = await authApi.demoLogin()
+      localStorage.setItem('auth_token', data.token)
+      set({
+        user: data.user,
+        token: data.token,
+        isAuthenticated: true,
+        isLoading: false,
+        demoMode: true,
+        error: null,
+      })
+      connect(data.token)
+      return data
+    } catch (err: unknown) {
+      const error = getApiErrorMessage(err, 'Demo login failed')
+      set({ isLoading: false, error })
+      throw new Error(error)
+    }
+  },
+}))

client/src/store/settingsStore.ts

@@ -0,0 +1,73 @@
+import { create } from 'zustand'
+import { settingsApi } from '../api/client'
+import type { Settings } from '../types'
+import { getApiErrorMessage } from '../types'
+
+interface SettingsState {
+  settings: Settings
+  isLoaded: boolean
+
+  loadSettings: () => Promise<void>
+  updateSetting: (key: keyof Settings, value: Settings[keyof Settings]) => Promise<void>
+  setLanguageLocal: (lang: string) => void
+  updateSettings: (settingsObj: Partial<Settings>) => Promise<void>
+}
+
+export const useSettingsStore = create<SettingsState>((set, get) => ({
+  settings: {
+    map_tile_url: '',
+    default_lat: 48.8566,
+    default_lng: 2.3522,
+    default_zoom: 10,
+    dark_mode: false,
+    default_currency: 'USD',
+    language: localStorage.getItem('app_language') || 'en',
+    temperature_unit: 'fahrenheit',
+    time_format: '12h',
+    show_place_description: false,
+  },
+  isLoaded: false,
+
+  loadSettings: async () => {
+    try {
+      const data = await settingsApi.get()
+      set((state) => ({
+        settings: { ...state.settings, ...data.settings },
+        isLoaded: true,
+      }))
+    } catch (err: unknown) {
+      set({ isLoaded: true })
+      console.error('Failed to load settings:', err)
+    }
+  },
+
+  updateSetting: async (key: keyof Settings, value: Settings[keyof Settings]) => {
+    set((state) => ({
+      settings: { ...state.settings, [key]: value },
+    }))
+    if (key === 'language') localStorage.setItem('app_language', value as string)
+    try {
+      await settingsApi.set(key, value)
+    } catch (err: unknown) {
+      console.error('Failed to save setting:', err)
+      throw new Error(getApiErrorMessage(err, 'Error saving setting'))
+    }
+  },
+
+  setLanguageLocal: (lang: string) => {
+    localStorage.setItem('app_language', lang)
+    set((state) => ({ settings: { ...state.settings, language: lang } }))
+  },
+
+  updateSettings: async (settingsObj: Partial<Settings>) => {
+    set((state) => ({
+      settings: { ...state.settings, ...settingsObj },
+    }))
+    try {
+      await settingsApi.setBulk(settingsObj)
+    } catch (err: unknown) {
+      console.error('Failed to save settings:', err)
+      throw new Error(getApiErrorMessage(err, 'Error saving settings'))
+    }
+  },
+}))