diff --git a/client/src/components/Admin/AddonManager.tsx b/client/src/components/Admin/AddonManager.tsx
index 99b9c84d8..c30e92fb9 100644
--- a/client/src/components/Admin/AddonManager.tsx
+++ b/client/src/components/Admin/AddonManager.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type ComponentType } from 'react'
 import { adminApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -27,7 +27,7 @@ function SynologyIcon({ size = 14 }: { size?: number }) {
   )
 }
 
-const PROVIDER_ICONS: Record<string, React.FC<{ size?: number }>> = {
+const PROVIDER_ICONS: Record<string, ComponentType<{ size?: number }>> = {
   immich: ImmichIcon,
   synologyphotos: SynologyIcon,
 }
diff --git a/client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx b/client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx
index 062841c78..36823ba3f 100644
--- a/client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx
+++ b/client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Loader2, CheckCircle2, AlertCircle, X } from 'lucide-react'
@@ -124,7 +124,7 @@ export default function BackgroundTasksWidget() {
     navigate(`/trips/${task.tripId}`)
   }
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       style={{ position: 'fixed', right: 16, bottom: 16, zIndex: 50000, display: 'flex', flexDirection: 'column', gap: 8, width: 380, maxWidth: 'calc(100vw - 32px)', fontFamily: 'var(--font-system)' }}
     >
diff --git a/client/src/components/Budget/BudgetPanelMemberChips.tsx b/client/src/components/Budget/BudgetPanelMemberChips.tsx
index c042638c1..376464f12 100644
--- a/client/src/components/Budget/BudgetPanelMemberChips.tsx
+++ b/client/src/components/Budget/BudgetPanelMemberChips.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Pencil, Users, Check } from 'lucide-react'
 import type { BudgetItemMember } from '../../types'
@@ -51,7 +51,7 @@ export function ChipWithTooltip({ label, avatarUrl, size = 20, paid, onClick }:
           : label?.[0]?.toUpperCase()
         }
       </div>
-      {hover && ReactDOM.createPortal(
+      {hover && createPortal(
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
@@ -140,7 +140,7 @@ export default function BudgetMemberChips({ members = [], tripMembers = [], onSe
           {members.length > 0 ? <Pencil size={iconSize} /> : <Users size={iconSize} />}
         </button>
       )}
-      {showDropdown && ReactDOM.createPortal(
+      {showDropdown && 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,
diff --git a/client/src/components/Collab/CollabChat.tsx b/client/src/components/Collab/CollabChat.tsx
index 8fef5880e..7d5f0101c 100644
--- a/client/src/components/Collab/CollabChat.tsx
+++ b/client/src/components/Collab/CollabChat.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { ArrowUp, Reply, Smile, X } from 'lucide-react'
 import type { User } from '../../types'
 import { useCollabChat } from './useCollabChat'
@@ -97,7 +97,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
       {showEmoji && <EmojiPicker onSelect={handleEmojiSelect} onClose={() => setShowEmoji(false)} anchorRef={emojiBtnRef} containerRef={containerRef} />}
 
       {/* Reaction quick menu (right-click) */}
-      {reactMenu && ReactDOM.createPortal(
+      {reactMenu && createPortal(
         <ReactionMenu x={reactMenu.x} y={reactMenu.y} onReact={(emoji) => handleReact(reactMenu.msgId, emoji)} onClose={() => setReactMenu(null)} />,
         document.body
       )}
diff --git a/client/src/components/Collab/CollabChatEmojiPicker.tsx b/client/src/components/Collab/CollabChatEmojiPicker.tsx
index 3ee269667..ec214351c 100644
--- a/client/src/components/Collab/CollabChatEmojiPicker.tsx
+++ b/client/src/components/Collab/CollabChatEmojiPicker.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { EMOJI_CATEGORIES } from './CollabChat.constants'
 import { TwemojiImg } from './CollabChatTwemojiImg'
 
@@ -37,7 +37,7 @@ export function EmojiPicker({ onSelect, onClose, anchorRef, containerRef }: Emoj
     return () => document.removeEventListener('mousedown', close)
   }, [onClose, anchorRef])
 
-  return ReactDOM.createPortal(
+  return 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,
diff --git a/client/src/components/Collab/CollabChatReactionBadge.tsx b/client/src/components/Collab/CollabChatReactionBadge.tsx
index 59b95f6c5..ba773e5ab 100644
--- a/client/src/components/Collab/CollabChatReactionBadge.tsx
+++ b/client/src/components/Collab/CollabChatReactionBadge.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { TwemojiImg } from './CollabChatTwemojiImg'
 import type { ChatReaction } from './CollabChat.types'
 
@@ -36,7 +36,7 @@ export function ReactionBadge({ reaction, currentUserId, onReact }: ReactionBadg
         <TwemojiImg emoji={reaction.emoji} size={16} />
         {reaction.count > 1 && <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)', minWidth: 8 }}>{reaction.count}</span>}
       </button>
-      {hover && names && ReactDOM.createPortal(
+      {hover && names && createPortal(
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
diff --git a/client/src/components/Collab/CollabNotes.tsx b/client/src/components/Collab/CollabNotes.tsx
index b5e8fb0e2..bf713d00a 100644
--- a/client/src/components/Collab/CollabNotes.tsx
+++ b/client/src/components/Collab/CollabNotes.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Plus, Pencil, X, StickyNote, Settings } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { useCanDo } from '../../store/permissionsStore'
@@ -363,7 +363,7 @@ function CollabNotesGrid(S: NotesState) {
 function ViewNoteModal(S: NotesState) {
   const { viewingNote, setViewingNote, canEdit, setEditingNote, getCategoryColor, t, setPreviewFile } = S
   if (!viewingNote) return null
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       style={{
         position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
diff --git a/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx b/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx
index 61a941e56..3ffdb259e 100644
--- a/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx
+++ b/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState } from 'react'
 import { Plus, Trash2, X } from 'lucide-react'
 import { FONT, NOTE_COLORS } from './CollabNotes.constants'
@@ -59,7 +59,7 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
   // Merge existing categories from notes with saved colors
   const allCats = [...new Set([...categories, ...Object.keys(localColors)])]
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div style={{
       position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))',
       backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
diff --git a/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx b/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx
index 20d9a3635..78d2c9150 100644
--- a/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx
+++ b/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useEffect } from 'react'
 import { X, ExternalLink, Loader2 } from 'lucide-react'
 import { getAuthUrl } from '../../api/authUrl'
@@ -27,7 +27,7 @@ export function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
 
   const openInNewTab = () => openFile(rawUrl).catch(() => {})
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }} onClick={onClose}>
       {isImage ? (
         /* Image lightbox — floating controls */
diff --git a/client/src/components/Collab/CollabNotesFormModal.tsx b/client/src/components/Collab/CollabNotesFormModal.tsx
index 5b7f83287..e6b6cd2ac 100644
--- a/client/src/components/Collab/CollabNotesFormModal.tsx
+++ b/client/src/components/Collab/CollabNotesFormModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useRef } from 'react'
 import { Plus, X } from 'lucide-react'
 import { useCanDo } from '../../store/permissionsStore'
@@ -67,7 +67,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
 
   const canSubmit = title.trim() && !submitting
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       style={{
         position: 'fixed',
diff --git a/client/src/components/Collab/CollabPolls.tsx b/client/src/components/Collab/CollabPolls.tsx
index 4507112d3..0e7767f03 100644
--- a/client/src/components/Collab/CollabPolls.tsx
+++ b/client/src/components/Collab/CollabPolls.tsx
@@ -7,7 +7,7 @@ import { useToast } from '../shared/Toast'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import EmptyState from '../shared/EmptyState'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import type { User } from '../../types'
 
 interface PollVoter {
@@ -87,7 +87,7 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
     } catch {} finally { setSubmitting(false) }
   }
 
-  return ReactDOM.createPortal(
+  return 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)' }}>
@@ -176,7 +176,7 @@ function VoterChip({ voter, offset }: VoterChipProps) {
         }}>
         {voter.avatar_url ? <img src={voter.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (voter.username || '?')[0].toUpperCase()}
       </div>
-      {hover && ReactDOM.createPortal(
+      {hover && createPortal(
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
diff --git a/client/src/components/Files/FileManagerAssignModal.tsx b/client/src/components/Files/FileManagerAssignModal.tsx
index 6c3ebacf5..c92ed629e 100644
--- a/client/src/components/Files/FileManagerAssignModal.tsx
+++ b/client/src/components/Files/FileManagerAssignModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { X, MapPin, Ticket, Check } from 'lucide-react'
 import { filesApi } from '../../api/client'
 import type { Place, Reservation, Day } from '../../types'
@@ -8,7 +8,7 @@ import { transportIcon } from './FileManager.helpers'
 
 export function AssignModal(S: FileManagerState) {
   const { files, assignFileId, setAssignFileId, t, days, assignments, places, reservations, tripId, handleAssign, refreshFiles } = S
-  return ReactDOM.createPortal(
+  return 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={{
diff --git a/client/src/components/Files/FileManagerAvatarChip.tsx b/client/src/components/Files/FileManagerAvatarChip.tsx
index 2ec5b5128..1f0f8582e 100644
--- a/client/src/components/Files/FileManagerAvatarChip.tsx
+++ b/client/src/components/Files/FileManagerAvatarChip.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useRef } from 'react'
 
 export function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avatarUrl?: string | null; size?: number }) {
@@ -28,7 +28,7 @@ export function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avata
           : name?.[0]?.toUpperCase()
         }
       </div>
-      {hover && ReactDOM.createPortal(
+      {hover && createPortal(
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           background: 'var(--bg-elevated)', color: 'var(--text-primary)',
diff --git a/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx b/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx
index 351b5039c..bfab94991 100644
--- a/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx
+++ b/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { ExternalLink, Download, X } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -32,7 +32,7 @@ export function MarkdownPreviewModal(S: FileManagerState) {
     return () => { cancelled = true }
   }, [previewFileUrl])
 
-  return ReactDOM.createPortal(
+  return 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)}
diff --git a/client/src/components/Files/FileManagerPdfPreviewModal.tsx b/client/src/components/Files/FileManagerPdfPreviewModal.tsx
index ce5bbe4d6..9c3c97f54 100644
--- a/client/src/components/Files/FileManagerPdfPreviewModal.tsx
+++ b/client/src/components/Files/FileManagerPdfPreviewModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { ExternalLink, Download, X } from 'lucide-react'
 import { openFile as openFileUrl } from '../../utils/fileDownload'
 import type { FileManagerState } from './useFileManager'
@@ -6,7 +6,7 @@ import { triggerDownload } from './FileManager.helpers'
 
 export function PdfPreviewModal(S: FileManagerState) {
   const { previewFile, setPreviewFile, previewFileUrl, toast, t } = S
-  return ReactDOM.createPortal(
+  return 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)}
diff --git a/client/src/components/Journey/JourneyMap.tsx b/client/src/components/Journey/JourneyMap.tsx
index 1345de53d..5ac006cbd 100644
--- a/client/src/components/Journey/JourneyMap.tsx
+++ b/client/src/components/Journey/JourneyMap.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
+import { useEffect, useRef, useImperativeHandle, useCallback, type Ref } from 'react'
 import L from 'leaflet'
 import { useSettingsStore } from '../../store/settingsStore'
 
@@ -31,6 +31,7 @@ interface MapEntry {
 }
 
 interface Props {
+  ref?: Ref<JourneyMapHandle>
   checkins: any[]
   entries: MapEntry[]
   trail?: { lat: number; lng: number }[]
@@ -84,9 +85,8 @@ function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): st
 
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []
 
-const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
-  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom },
-  ref
+function JourneyMap(
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, ref }: Props,
 ) {
   const stableTrail = trail || EMPTY_TRAIL
   const mapTileUrl = useSettingsStore(s => s.settings.map_tile_url)
@@ -314,6 +314,6 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       </div>
     </div>
   )
-})
+}
 
 export default JourneyMap
diff --git a/client/src/components/Journey/JourneyMapAuto.tsx b/client/src/components/Journey/JourneyMapAuto.tsx
index ab9332e1f..48af9b958 100644
--- a/client/src/components/Journey/JourneyMapAuto.tsx
+++ b/client/src/components/Journey/JourneyMapAuto.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, Suspense, useImperativeHandle, useRef } from 'react'
+import { Suspense, useImperativeHandle, useRef, type Ref } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import JourneyMap, { type JourneyMapHandle } from './JourneyMap'
 import ErrorBoundary from '../shared/ErrorBoundary'
@@ -22,6 +22,7 @@ interface MapEntry {
 }
 
 interface Props {
+  ref?: Ref<JourneyMapAutoHandle>
   checkins: unknown[]
   entries: MapEntry[]
   trail?: { lat: number; lng: number }[]
@@ -33,7 +34,7 @@ interface Props {
   paddingBottom?: number
 }
 
-const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyMapAuto(props, ref) {
+function JourneyMapAuto({ ref, ...props }: Props) {
   const provider = useSettingsStore(s => s.settings.map_provider)
   const token = useSettingsStore(s => s.settings.mapbox_access_token)
   const leafletRef = useRef<JourneyMapHandle>(null)
@@ -67,6 +68,6 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return <JourneyMap ref={leafletRef} {...(props as any)} />
-})
+}
 
 export default JourneyMapAuto
diff --git a/client/src/components/Journey/JourneyMapGL.tsx b/client/src/components/Journey/JourneyMapGL.tsx
index 7a1c7c043..5524094a1 100644
--- a/client/src/components/Journey/JourneyMapGL.tsx
+++ b/client/src/components/Journey/JourneyMapGL.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
+import { useEffect, useRef, useImperativeHandle, useCallback, type Ref } from 'react'
 import type mapboxgl from 'mapbox-gl'
 import { useSettingsStore } from '../../store/settingsStore'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
@@ -23,6 +23,7 @@ interface MapEntry {
 }
 
 interface Props {
+  ref?: Ref<JourneyMapGLHandle>
   checkins: unknown[]
   entries: MapEntry[]
   trail?: { lat: number; lng: number }[]
@@ -209,9 +210,8 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
 
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []
 
-const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL(
-  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl },
-  ref
+function JourneyMapGL(
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl, ref }: Props,
 ) {
   const stableTrail = trail || EMPTY_TRAIL
   const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
@@ -502,6 +502,6 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
     </div>
   )
-})
+}
 
 export default JourneyMapGL
diff --git a/client/src/components/Layout/InAppNotificationBell.tsx b/client/src/components/Layout/InAppNotificationBell.tsx
index 680cd64b1..ffabc2057 100644
--- a/client/src/components/Layout/InAppNotificationBell.tsx
+++ b/client/src/components/Layout/InAppNotificationBell.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useNavigate } from 'react-router'
 import { Bell, Trash2, CheckCheck } from 'lucide-react'
 import { useTranslation } from '../../i18n'
@@ -67,7 +67,7 @@ export default function InAppNotificationBell(): React.ReactElement {
         )}
       </button>
 
-      {open && ReactDOM.createPortal(
+      {open && createPortal(
         <>
           <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setOpen(false)} />
           <div
diff --git a/client/src/components/Layout/Navbar.tsx b/client/src/components/Layout/Navbar.tsx
index fd82ceb5f..4b282033b 100644
--- a/client/src/components/Layout/Navbar.tsx
+++ b/client/src/components/Layout/Navbar.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Link, useNavigate, useLocation } from 'react-router'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -249,7 +249,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
             <ChevronDown className="w-4 h-4 text-content-faint" />
           </button>
 
-          {userMenuOpen && ReactDOM.createPortal(
+          {userMenuOpen && createPortal(
             <>
               <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setUserMenuOpen(false)} />
               <div className="trek-menu-enter w-52 rounded-xl shadow-xl border overflow-hidden bg-surface-card border-edge" style={{ position: 'fixed', top: 'var(--nav-h)', right: 8, zIndex: 9999 }}>
diff --git a/client/src/components/Map/glLazy.tsx b/client/src/components/Map/glLazy.tsx
index 870095475..7a5fd4e56 100644
--- a/client/src/components/Map/glLazy.tsx
+++ b/client/src/components/Map/glLazy.tsx
@@ -1,4 +1,3 @@
-import { forwardRef } from 'react'
 import { lazyWithRetry } from '../../utils/lazyWithRetry'
 
 /**
@@ -39,15 +38,11 @@ export const JourneyMapGLMapbox = lazyWithRetry(async () => {
     import('./engines/mapbox'),
   ])
   const JourneyMapGL = component.default
-  return {
-    // forwardRef because the journey map exposes an imperative handle
-    // (highlightMarker / focusMarker / invalidateSize) that has to survive the wrapper.
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    default: forwardRef(function JourneyMapGLMapboxBinding(props: any, ref: any) {
-      return <JourneyMapGL ref={ref} {...props} gl={engine.default} />
-    }),
-    /* eslint-enable @typescript-eslint/no-explicit-any */
-  }
+  // The journey map exposes an imperative handle (highlightMarker / focusMarker /
+  // invalidateSize). Since React 19 its ref is an ordinary prop, so it rides
+  // through the spread and the binding needs no forwardRef wrapper.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return { default: (props: any) => <JourneyMapGL {...props} gl={engine.default} /> }
 })
 
 export const JourneyMapGLMaplibre = lazyWithRetry(async () => {
@@ -56,13 +51,8 @@ export const JourneyMapGLMaplibre = lazyWithRetry(async () => {
     import('./engines/maplibre'),
   ])
   const JourneyMapGL = component.default
-  return {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    default: forwardRef(function JourneyMapGLMaplibreBinding(props: any, ref: any) {
-      return <JourneyMapGL ref={ref} {...props} gl={engine.default} />
-    }),
-    /* eslint-enable @typescript-eslint/no-explicit-any */
-  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return { default: (props: any) => <JourneyMapGL {...props} gl={engine.default} /> }
 })
 
 export const GlMapPreviewMapbox = lazyWithRetry(async () => {
diff --git a/client/src/components/Packing/PackingListPanelImportModal.tsx b/client/src/components/Packing/PackingListPanelImportModal.tsx
index a7293a922..3b70871d3 100644
--- a/client/src/components/Packing/PackingListPanelImportModal.tsx
+++ b/client/src/components/Packing/PackingListPanelImportModal.tsx
@@ -1,10 +1,10 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Upload } from 'lucide-react'
 import type { PackingState } from './usePackingListPanel'
 
 export function BulkImportModal(S: PackingState) {
   const { setShowImportModal, t, importText, setImportText, csvInputRef, handleCsvFile, handleBulkImport, parseImportLines } = S
-  return ReactDOM.createPortal(
+  return createPortal(
     <div style={{
       position: 'fixed', inset: 0, zIndex: 1000,
       display: 'flex', alignItems: 'center', justifyContent: 'center',
diff --git a/client/src/components/Packing/PackingShareControl.tsx b/client/src/components/Packing/PackingShareControl.tsx
index 8389e4ff1..ae65262ec 100644
--- a/client/src/components/Packing/PackingShareControl.tsx
+++ b/client/src/components/Packing/PackingShareControl.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Users, UserRound, Share2, Check, Copy, HandHelping } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { PackingItem } from '../../types'
@@ -78,7 +78,7 @@ export default function PackingShareControl({ item, tripMembers, currentUserId,
         onMouseLeave={e => { if (visibility === 'common') e.currentTarget.style.color = 'var(--text-faint)' }}>
         <Share2 size={14} />
       </button>
-      {open && pos && ReactDOM.createPortal(
+      {open && pos && createPortal(
         <>
           <div style={{ position: 'fixed', inset: 0, zIndex: 1099 }} onClick={() => setOpen(false)} />
           <div style={{
diff --git a/client/src/components/Planner/AirTrailImportModal.tsx b/client/src/components/Planner/AirTrailImportModal.tsx
index c77d48044..8de9f228b 100644
--- a/client/src/components/Planner/AirTrailImportModal.tsx
+++ b/client/src/components/Planner/AirTrailImportModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useRef, useEffect, useMemo } from 'react'
 import { Plane, X, Check } from 'lucide-react'
 import type { AirtrailFlight, AirtrailImportResult } from '@trek/shared'
@@ -307,7 +307,7 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
   const renderItem = (item: { chain?: AirtrailFlight[]; flight?: AirtrailFlight }) =>
     item.chain ? renderChain(item.chain) : renderFlight(item.flight!)
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="bg-[rgba(0,0,0,0.4)]"
       style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
diff --git a/client/src/components/Planner/BookingImportModal.tsx b/client/src/components/Planner/BookingImportModal.tsx
index b3e567b5d..1def5b3ae 100644
--- a/client/src/components/Planner/BookingImportModal.tsx
+++ b/client/src/components/Planner/BookingImportModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useRef, useEffect } from 'react'
 import { Upload, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
@@ -110,7 +110,7 @@ export default function BookingImportModal({ isOpen, onClose, tripId }: BookingI
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="bg-[rgba(0,0,0,0.4)]"
       style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
diff --git a/client/src/components/Planner/DayDetailPanel.tsx b/client/src/components/Planner/DayDetailPanel.tsx
index 4b24f3820..1d2ade4d7 100644
--- a/client/src/components/Planner/DayDetailPanel.tsx
+++ b/client/src/components/Planner/DayDetailPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } 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, ChevronsDown, ChevronsUp, TramFront, ParkingSquare } from 'lucide-react'
 
 const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, transit: TramFront, event: Ticket, tour: Users, parking: ParkingSquare, other: FileText }
@@ -495,7 +495,7 @@ function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelD
   return (
     <>
             {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
-            {showHotelPicker && ReactDOM.createPortal(
+            {showHotelPicker && 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={{
diff --git a/client/src/components/Planner/DayPlanSidebarNoteModal.tsx b/client/src/components/Planner/DayPlanSidebarNoteModal.tsx
index 3e57b546a..d244ae8b1 100644
--- a/client/src/components/Planner/DayPlanSidebarNoteModal.tsx
+++ b/client/src/components/Planner/DayPlanSidebarNoteModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { NOTE_ICONS } from './DayPlanSidebar.constants'
 
 interface NoteModalUi {
@@ -20,7 +20,7 @@ interface DayPlanSidebarNoteModalProps {
 export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cancelNote, saveNote, t }: DayPlanSidebarNoteModalProps) {
   return (
     <>
-      {Object.entries(noteUi).map(([dayId, ui]) => ui && ReactDOM.createPortal(
+      {Object.entries(noteUi).map(([dayId, ui]) => ui && createPortal(
         <div key={dayId} className="bg-[rgba(0,0,0,0.3)]" style={{
           position: 'fixed', inset: 0, zIndex: 10000,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
diff --git a/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx b/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx
index bf212ace6..3c1bdf67c 100644
--- a/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx
+++ b/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Clock } from 'lucide-react'
 
 interface TimeConfirmState {
@@ -21,7 +21,7 @@ interface DayPlanSidebarTimeConfirmModalProps {
 
 export function DayPlanSidebarTimeConfirmModal({ timeConfirm, setTimeConfirm, confirmTimeRemoval, t }: DayPlanSidebarTimeConfirmModalProps) {
   if (!timeConfirm) return null
-  return ReactDOM.createPortal(
+  return createPortal(
     <div className="bg-[rgba(0,0,0,0.3)]" style={{
       position: 'fixed', inset: 0, zIndex: 1000,
       display: 'flex', alignItems: 'center', justifyContent: 'center',
diff --git a/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx b/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx
index ff53b936b..9bd1b2471 100644
--- a/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx
+++ b/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Ticket, FileText, ExternalLink, Footprints, ArrowRight, Pencil } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -24,7 +24,7 @@ export function DayPlanSidebarTransportDetailModal({
   transportDetail, setTransportDetail, onNavigateToFiles, onEdit, t, locale, timeFormat,
 }: DayPlanSidebarTransportDetailModalProps) {
   if (!transportDetail) return null
-  return ReactDOM.createPortal(
+  return createPortal(
     <div className="bg-[rgba(0,0,0,0.3)]" style={{
       position: 'fixed', inset: 0, zIndex: 1000,
       display: 'flex', alignItems: 'center', justifyContent: 'center',
diff --git a/client/src/components/Planner/FileImportModal.tsx b/client/src/components/Planner/FileImportModal.tsx
index a206bef9f..a823468af 100644
--- a/client/src/components/Planner/FileImportModal.tsx
+++ b/client/src/components/Planner/FileImportModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useRef, useEffect } from 'react'
 import { Upload } from 'lucide-react'
 import { useTranslation } from '../../i18n'
@@ -215,7 +215,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       onClick={handleClose}
       className="bg-[rgba(0,0,0,0.4)]"
diff --git a/client/src/components/Planner/PlacesSidebarListImportModal.tsx b/client/src/components/Planner/PlacesSidebarListImportModal.tsx
index bed21ee3b..dc0c613dd 100644
--- a/client/src/components/Planner/PlacesSidebarListImportModal.tsx
+++ b/client/src/components/Planner/PlacesSidebarListImportModal.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import ToggleSwitch from '../Settings/ToggleSwitch'
 import type { SidebarState } from './usePlacesSidebar'
 
@@ -8,7 +8,7 @@ export function ListImportModal(S: SidebarState) {
     listImportProvider, setListImportProvider, listImportUrl, listImportLoading, handleListImport,
     listImportEnrich, setListImportEnrich, canEnrichImport,
   } = S
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       onClick={() => { setListImportOpen(false); setListImportUrl('') }}
       className="bg-[rgba(0,0,0,0.4)]"
diff --git a/client/src/components/Planner/PlacesSidebarMobileDayPicker.tsx b/client/src/components/Planner/PlacesSidebarMobileDayPicker.tsx
index 1f43fec11..d26d478b2 100644
--- a/client/src/components/Planner/PlacesSidebarMobileDayPicker.tsx
+++ b/client/src/components/Planner/PlacesSidebarMobileDayPicker.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { CalendarDays, Pencil, Trash2, ChevronDown, Check, Eye } from 'lucide-react'
 import type { SidebarState } from './usePlacesSidebar'
 
@@ -7,7 +7,7 @@ export function MobileDayPickerSheet(S: SidebarState) {
     dayPickerPlace, setDayPickerPlace, setMobileShowDays, onPlaceClick, canEditPlaces, onEditPlace,
     t, days, mobileShowDays, onAssignToDay, assignments, onDeletePlace,
   } = S
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       onClick={() => { setDayPickerPlace(null); setMobileShowDays(false) }}
       style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}
diff --git a/client/src/components/Planner/ReservationsPanel.tsx b/client/src/components/Planner/ReservationsPanel.tsx
index 1ce7e4f01..ca204f824 100644
--- a/client/src/components/Planner/ReservationsPanel.tsx
+++ b/client/src/components/Planner/ReservationsPanel.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -450,7 +450,7 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
       )}
 
       {/* Delete confirmation */}
-      {showDeleteConfirm && ReactDOM.createPortal(
+      {showDeleteConfirm && createPortal(
         <div className="bg-[rgba(0,0,0,0.3)]" style={{
           position: 'fixed', inset: 0, zIndex: 1000,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -628,7 +628,7 @@ function TransitJourneyCard({ r, days, onOpen, onDelete, canEdit, tripId, contri
           ))}
         </div>
       )}
-      {confirmOpen && ReactDOM.createPortal(
+      {confirmOpen && createPortal(
         <div className="bg-[rgba(0,0,0,0.35)]" style={{ position: 'fixed', inset: 0, zIndex: 3000, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={e => { e.stopPropagation(); setConfirmOpen(false) }}>
           <div className="bg-surface-card" style={{ borderRadius: 14, padding: 20, width: 340, boxShadow: '0 16px 48px rgba(0,0,0,0.22)' }} onClick={e => e.stopPropagation()}>
             <div className="text-content" style={{ fontWeight: 600, fontSize: 'calc(14px * var(--fs-scale-body, 1))', marginBottom: 6 }}>{t('reservations.confirm.deleteTitle')}</div>
diff --git a/client/src/components/Todo/TodoListPanel.tsx b/client/src/components/Todo/TodoListPanel.tsx
index 146526e77..4c8254210 100644
--- a/client/src/components/Todo/TodoListPanel.tsx
+++ b/client/src/components/Todo/TodoListPanel.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useState, useMemo, useEffect, useRef } from 'react'
 import { avatarSrc } from '../../utils/avatarSrc'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
@@ -281,7 +281,7 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
           </div>
         </div>
       )}
-      {isAddingNew && !selectedItem && !isMobile && ReactDOM.createPortal(
+      {isAddingNew && !selectedItem && !isMobile && createPortal(
         <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
           className="trek-modal-backdrop"
           style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15,23,42,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: 'calc(var(--nav-h) + 60px)', paddingBottom: 40 }}>
@@ -299,7 +299,7 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
         </div>,
         document.body
       )}
-      {isAddingNew && !selectedItem && isMobile && ReactDOM.createPortal(
+      {isAddingNew && !selectedItem && isMobile && createPortal(
         <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
           className="trek-modal-backdrop"
           style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end', paddingBottom: 'var(--bottom-nav-h)' }}>
diff --git a/client/src/components/Vacay/VacayPersons.tsx b/client/src/components/Vacay/VacayPersons.tsx
index 5e511741a..43bb30e48 100644
--- a/client/src/components/Vacay/VacayPersons.tsx
+++ b/client/src/components/Vacay/VacayPersons.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState, useEffect } from 'react'
 import { UserPlus, Check, Loader2, Clock, X } from 'lucide-react'
 import { useVacayStore } from '../../store/vacayStore'
@@ -124,7 +124,7 @@ export default function VacayPersons() {
       </div>
 
       {/* Invite Modal — Portal to body to avoid z-index issues */}
-      {showInvite && ReactDOM.createPortal(
+      {showInvite && createPortal(
         <div className="fixed inset-0 flex items-center justify-center px-4 trek-backdrop-enter bg-[rgba(15,23,42,0.5)]" style={{ zIndex: 99990, paddingTop: 70 }}
           onClick={() => setShowInvite(false)}>
           <div className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-sm bg-surface-card"
@@ -165,7 +165,7 @@ export default function VacayPersons() {
       )}
 
       {/* Color Picker Modal — Portal to body */}
-      {showColorPicker && ReactDOM.createPortal(
+      {showColorPicker && createPortal(
         <div className="fixed inset-0 flex items-center justify-center px-4 trek-backdrop-enter bg-[rgba(15,23,42,0.5)]" style={{ zIndex: 99990, paddingTop: 70 }}
           onClick={() => { setShowColorPicker(false); setColorEditUserId(null) }}>
           <div className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-xs bg-surface-card"
diff --git a/client/src/components/Vacay/VacaySharedCalendars.tsx b/client/src/components/Vacay/VacaySharedCalendars.tsx
index 4254fefa1..060c7e3e8 100644
--- a/client/src/components/Vacay/VacaySharedCalendars.tsx
+++ b/client/src/components/Vacay/VacaySharedCalendars.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useState } from 'react'
 import { Share2, Eye, EyeOff, Loader2, X } from 'lucide-react'
 import { useVacayStore } from '../../store/vacayStore'
@@ -126,7 +126,7 @@ export default function VacaySharedCalendars() {
       )}
 
       {/* Share Modal — Portal to body to avoid z-index issues */}
-      {showShare && ReactDOM.createPortal(
+      {showShare && createPortal(
         <div className="fixed inset-0 flex items-center justify-center px-4 trek-backdrop-enter bg-[rgba(15,23,42,0.5)]" style={{ zIndex: 99990, paddingTop: 70 }}
           onClick={() => setShowShare(false)}>
           <div className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-sm bg-surface-card"
diff --git a/client/src/components/shared/ConfirmDialog.tsx b/client/src/components/shared/ConfirmDialog.tsx
index fbc3ba975..d0feab2ba 100644
--- a/client/src/components/shared/ConfirmDialog.tsx
+++ b/client/src/components/shared/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { AlertTriangle } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
@@ -49,7 +49,7 @@ export default function ConfirmDialog({
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter bg-[rgba(15,23,42,0.5)]"
       style={{ paddingBottom: 'var(--bottom-nav-h)' }}
diff --git a/client/src/components/shared/ContextMenu.tsx b/client/src/components/shared/ContextMenu.tsx
index b05b09137..f98965c16 100644
--- a/client/src/components/shared/ContextMenu.tsx
+++ b/client/src/components/shared/ContextMenu.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { LucideIcon } from 'lucide-react'
 
 interface MenuItem {
@@ -64,7 +64,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
 
   if (!menu) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div ref={ref} className="trek-popover-enter" style={{
       position: 'fixed', left: menu.x, top: menu.y, zIndex: 999999,
       background: 'var(--bg-card)', borderRadius: 10, padding: '4px',
diff --git a/client/src/components/shared/CopyTripDialog.tsx b/client/src/components/shared/CopyTripDialog.tsx
index 9fabd75cd..5c79324f5 100644
--- a/client/src/components/shared/CopyTripDialog.tsx
+++ b/client/src/components/shared/CopyTripDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Check, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
@@ -40,7 +40,7 @@ export default function CopyTripDialog({ isOpen, tripTitle, onClose, onConfirm }
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter bg-[rgba(15,23,42,0.5)]"
       style={{ paddingBottom: 'var(--bottom-nav-h)' }}
diff --git a/client/src/components/shared/CustomDateTimePicker.tsx b/client/src/components/shared/CustomDateTimePicker.tsx
index 4635d1371..14d0ad3df 100644
--- a/client/src/components/shared/CustomDateTimePicker.tsx
+++ b/client/src/components/shared/CustomDateTimePicker.tsx
@@ -1,6 +1,6 @@
 import { Calendar, ChevronLeft, ChevronRight, Keyboard } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { useTranslation } from '../../i18n';
 
 function daysInMonth(year: number, month: number): number {
@@ -356,7 +356,7 @@ export function CustomDatePicker({
       )}
 
       {open &&
-        ReactDOM.createPortal(
+        createPortal(
           <div
             ref={dropRef}
             role="dialog"
diff --git a/client/src/components/shared/CustomSelect.tsx b/client/src/components/shared/CustomSelect.tsx
index 1b4e5e21b..5d80d07df 100644
--- a/client/src/components/shared/CustomSelect.tsx
+++ b/client/src/components/shared/CustomSelect.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { ChevronDown, Check } from 'lucide-react'
 
 interface SelectOption {
@@ -118,7 +118,7 @@ export default function CustomSelect({
       </button>
 
       {/* Dropdown */}
-      {open && ReactDOM.createPortal(
+      {open && createPortal(
         <div ref={dropRef} style={{
           position: 'fixed',
           ...(() => {
diff --git a/client/src/components/shared/CustomTimePicker.tsx b/client/src/components/shared/CustomTimePicker.tsx
index 4b1aa08c5..f0c6841a0 100644
--- a/client/src/components/shared/CustomTimePicker.tsx
+++ b/client/src/components/shared/CustomTimePicker.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Clock, ChevronUp, ChevronDown } from 'lucide-react'
 import { useSettingsStore } from '../../store/settingsStore'
 import { formatClockTime, parseMeridiemTime } from '../../utils/formatters'
@@ -148,7 +148,7 @@ export default function CustomTimePicker({ value, onChange, placeholder = '00:00
         </button>
       </div>
 
-      {open && ReactDOM.createPortal(
+      {open && createPortal(
         <div ref={dropRef} style={{
           position: 'fixed',
           top: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.bottom + 4 : 0 })(),
diff --git a/client/src/components/shared/Modal.tsx b/client/src/components/shared/Modal.tsx
index f167a277a..86f26f108 100644
--- a/client/src/components/shared/Modal.tsx
+++ b/client/src/components/shared/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
 
 const sizeClasses: Record<string, string> = {
@@ -49,7 +49,7 @@ export default function Modal({
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="fixed inset-0 z-[10000] flex items-start sm:items-center justify-center px-4 trek-modal-backdrop trek-backdrop-enter bg-[rgba(15,23,42,0.5)]"
       style={{ paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
diff --git a/client/src/components/shared/NumericInput.tsx b/client/src/components/shared/NumericInput.tsx
index a381d5865..0866d48e4 100644
--- a/client/src/components/shared/NumericInput.tsx
+++ b/client/src/components/shared/NumericInput.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useRef, type InputHTMLAttributes } from 'react'
+import { useRef, type InputHTMLAttributes, type Ref } from 'react'
 
 export type NumericMode = 'integer' | 'decimal' | 'signed'
 
@@ -23,6 +23,7 @@ type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | '
   mode?: NumericMode
   /** Escape hatch for a field that must not steal the caret (none today). */
   selectOnFocus?: boolean
+  ref?: Ref<HTMLInputElement>
 }
 
 /**
@@ -52,10 +53,9 @@ type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | '
  * Styling and commit semantics stay with the caller: some fields save on every keystroke,
  * others on blur. This owns only the part that was uniformly broken.
  */
-export const NumericInput = forwardRef<HTMLInputElement, Props>(function NumericInput(
-  { value, onValueChange, mode = 'integer', selectOnFocus = true, onFocus, inputMode, ...rest },
-  ref,
-) {
+export function NumericInput({
+  value, onValueChange, mode = 'integer', selectOnFocus = true, onFocus, inputMode, ref, ...rest
+}: Props) {
   // Set while a deferred select() is queued; any input in that window cancels it.
   const selectPending = useRef(false)
 
@@ -84,4 +84,4 @@ export const NumericInput = forwardRef<HTMLInputElement, Props>(function Numeric
       }}
     />
   )
-})
+}
diff --git a/client/src/components/shared/StarRating.tsx b/client/src/components/shared/StarRating.tsx
index 760a81562..d66e9b56b 100644
--- a/client/src/components/shared/StarRating.tsx
+++ b/client/src/components/shared/StarRating.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { Star } from 'lucide-react'
 import { avatarSrc } from '../../utils/avatarSrc'
 import { useAuthStore } from '../../store/authStore'
@@ -126,7 +126,7 @@ export default function PlaceRating({ ratings, ratingAvg, onRate, size = 16, com
       )}
 
       {/* Custom voter tooltip — fixed at the root so nothing clips it. */}
-      {tip && ratings.length > 0 && ReactDOM.createPortal(
+      {tip && ratings.length > 0 && createPortal(
         <div
           role="tooltip"
           className="bg-surface-card text-content border border-edge-faint"
diff --git a/client/src/components/shared/Tooltip.tsx b/client/src/components/shared/Tooltip.tsx
index 14add08dc..6bc6a86d6 100644
--- a/client/src/components/shared/Tooltip.tsx
+++ b/client/src/components/shared/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 
 type Placement = 'top' | 'bottom' | 'left' | 'right'
 
@@ -74,7 +74,7 @@ export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, ch
   return (
     <>
       {trigger}
-      {open && ReactDOM.createPortal(
+      {open && createPortal(
         <div
           ref={tooltipRef}
           role="tooltip"
diff --git a/client/src/i18n/TranslationContext.tsx b/client/src/i18n/TranslationContext.tsx
index fb72b15c1..d320f3e1d 100644
--- a/client/src/i18n/TranslationContext.tsx
+++ b/client/src/i18n/TranslationContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
+import { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
 import en from '@trek/shared/i18n/en'
 import type { SupportedLanguageCode } from '@trek/shared'
@@ -157,7 +157,7 @@ export function TranslationProvider({ children }: TranslationProviderProps) {
     return { t, tHtml, language, locale: getLocaleForLanguage(language) }
   }, [strings, language])
 
-  return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>
+  return <TranslationContext value={value}>{children}</TranslationContext>
 }
 
 export function useTranslation(): TranslationContextValue {
diff --git a/client/src/mobile/components/MSheet.tsx b/client/src/mobile/components/MSheet.tsx
index 0fc4a6b7f..5a39d2bd1 100644
--- a/client/src/mobile/components/MSheet.tsx
+++ b/client/src/mobile/components/MSheet.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 
 export type MSheetVariant = 'card' | 'bottom' | 'drawer'
 export type MSheetMaterial = 'glass' | 'bar-glass' | 'opaque'
@@ -190,7 +190,7 @@ export default function MSheet({
       ? { transform: `translateY(${dragY}px)`, transition: 'none' }
       : { transition: 'transform 280ms var(--ease-drawer)' }
 
-  return ReactDOM.createPortal(
+  return createPortal(
     // m-root on the overlay so the --m-* tokens resolve even when the portal
     // has to fall back to document.body (sheet mounted in the same commit as
     // the shell).
diff --git a/client/src/mobile/screens/admin/MAdminAddonManager.tsx b/client/src/mobile/screens/admin/MAdminAddonManager.tsx
index 62b889a0a..9aac2ab9a 100644
--- a/client/src/mobile/screens/admin/MAdminAddonManager.tsx
+++ b/client/src/mobile/screens/admin/MAdminAddonManager.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type ComponentType } from 'react'
 import { adminApi } from '../../../api/client'
 import { useTranslation } from '../../../i18n'
 import { useSettingsStore } from '../../../store/settingsStore'
@@ -31,7 +31,7 @@ function SynologyIcon({ size = 14 }: { size?: number }) {
   )
 }
 
-const PROVIDER_ICONS: Record<string, React.FC<{ size?: number }>> = {
+const PROVIDER_ICONS: Record<string, ComponentType<{ size?: number }>> = {
   immich: ImmichIcon,
   synologyphotos: SynologyIcon,
 }
@@ -320,7 +320,7 @@ function MAddonRow({ addon, onToggle, t, first }: MAddonRowProps) {
 
 interface MSubRowProps {
   icon?: typeof Luggage
-  providerIcon?: React.FC<{ size?: number }>
+  providerIcon?: ComponentType<{ size?: number }>
   title: string
   subtitle: string
   enabled: boolean
diff --git a/client/src/mobile/screens/trip/tabs/MCollabChat.tsx b/client/src/mobile/screens/trip/tabs/MCollabChat.tsx
index 467218341..5841fdf74 100644
--- a/client/src/mobile/screens/trip/tabs/MCollabChat.tsx
+++ b/client/src/mobile/screens/trip/tabs/MCollabChat.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { ArrowUp, ChevronUp, Loader2, Reply, Trash2 } from 'lucide-react'
 import MDancingTrek from '../../../components/MDancingTrek'
 import { collabApi } from '../../../../api/client'
@@ -498,7 +498,7 @@ function MessageActionsPopover({ x, y, canDeleteOwn, t, onReact, onReply, onDele
   const height = POPOVER_HEIGHT + (canDeleteOwn ? POPOVER_DELETE_ROW : 0)
   const top = Math.max(64, Math.min(y - 96, window.innerHeight - height - POPOVER_MARGIN))
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div className="m-root fixed inset-0 z-[55]">
       <div
         ref={ref}
diff --git a/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx b/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx
index 9b3c6829f..8cde139fa 100644
--- a/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { ChevronLeft, ChevronRight, Download, ExternalLink, X } from 'lucide-react'
 import { getAuthUrl } from '../../../../api/authUrl'
 import { downloadFile, openFile } from '../../../../utils/fileDownload'
@@ -64,7 +64,7 @@ export default function MFileLightbox({ files, index, onIndexChange, onClose, t
 
   if (!file) return null
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="m-root fixed inset-0 z-[65] flex flex-col bg-black/[.92]"
       onClick={onClose}
diff --git a/client/src/pages/ForgotPasswordPage.tsx b/client/src/pages/ForgotPasswordPage.tsx
index d2d651e07..474f301d8 100644
--- a/client/src/pages/ForgotPasswordPage.tsx
+++ b/client/src/pages/ForgotPasswordPage.tsx
@@ -10,7 +10,7 @@ const inputBase: React.CSSProperties = {
   background: 'white', color: '#111827',
 }
 
-const ForgotPasswordPage: React.FC = () => {
+function ForgotPasswordPage() {
   const { t } = useTranslation()
   // Page = wiring container: form state, the SMTP probe and submit live in the hook.
   const { navigate, email, setEmail, submitted, isLoading, smtpConfigured, handleSubmit } = useForgotPassword()
diff --git a/client/src/pages/JourneyPublicPage.test.tsx b/client/src/pages/JourneyPublicPage.test.tsx
index 3c869f69f..62f3373c8 100644
--- a/client/src/pages/JourneyPublicPage.test.tsx
+++ b/client/src/pages/JourneyPublicPage.test.tsx
@@ -34,10 +34,6 @@ vi.mock('leaflet', () => {
   return { default: L, ...L };
 });
 
-vi.mock('react-dom/server', () => ({
-  renderToStaticMarkup: vi.fn(() => '<svg></svg>'),
-}));
-
 // Mock JourneyMap since it uses vanilla Leaflet (L.map) which requires a real DOM
 vi.mock('../components/Journey/JourneyMap', () => ({
   default: ({ entries }: any) => <div data-testid="journey-map">Map with {entries?.length || 0} entries</div>,
diff --git a/client/src/pages/ResetPasswordPage.tsx b/client/src/pages/ResetPasswordPage.tsx
index 81dbc3007..ddea33718 100644
--- a/client/src/pages/ResetPasswordPage.tsx
+++ b/client/src/pages/ResetPasswordPage.tsx
@@ -10,7 +10,7 @@ const inputBase: React.CSSProperties = {
   background: 'white', color: '#111827',
 }
 
-const ResetPasswordPage: React.FC = () => {
+function ResetPasswordPage() {
   const { t } = useTranslation()
   // Page = wiring container: token, form state, validation + submit live in the hook.
   const {
diff --git a/client/src/pages/SharedTripPage.test.tsx b/client/src/pages/SharedTripPage.test.tsx
index 5de871b4b..10099aaa0 100644
--- a/client/src/pages/SharedTripPage.test.tsx
+++ b/client/src/pages/SharedTripPage.test.tsx
@@ -34,11 +34,6 @@ vi.mock('leaflet', () => {
   return { default: L, ...L };
 });
 
-// Mock react-dom/server (used in createMarkerIcon)
-vi.mock('react-dom/server', () => ({
-  renderToStaticMarkup: vi.fn(() => '<svg></svg>'),
-}));
-
 // Helper: render SharedTripPage under the correct route so useParams works
 function renderSharedTrip(token: string) {
   return render(
diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx
index 1fe164468..463b8005d 100644
--- a/client/src/pages/TripPlannerPage.tsx
+++ b/client/src/pages/TripPlannerPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, Suspense } from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useParams, useNavigate, useSearchParams } from 'react-router'
 import { useTripStore } from '../store/tripStore'
 import { useCanDo } from '../store/permissionsStore'
@@ -396,7 +396,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
 
             {/* Mobile POI search controls live in a portal like the Plan/Places
                 buttons so map touch handlers cannot swallow the tap targets. */}
-            {poiPillEnabled && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && ReactDOM.createPortal(
+            {poiPillEnabled && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && createPortal(
               <div data-testid="mobile-poi-category-pill" className="flex md:hidden" style={{ position: 'fixed', left: 12, right: 12, bottom: 'calc(var(--bottom-nav-h, 0px) + 12px)', justifyContent: 'center', zIndex: 100, pointerEvents: 'none' }}>
                 <PoiCategoryPill active={poi.active} onToggle={poi.toggle} loadingKeys={poi.loadingKeys} errorKeys={poi.errorKeys} moved={poi.moved} onSearchArea={poi.searchArea} />
               </div>,
@@ -548,7 +548,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
             </div>
 
             {/* Mobile sidebar buttons — portal to body to escape Leaflet touch handling */}
-            {activeTab === 'plan' && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && ReactDOM.createPortal(
+            {activeTab === 'plan' && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && 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')}
                   className="bg-surface-card text-content border border-edge"
@@ -629,7 +629,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
               />
             )}
 
-            {selectedPlace && isMobile && ReactDOM.createPortal(
+            {selectedPlace && isMobile && createPortal(
               <div className="bg-[rgba(0,0,0,0.3)]" style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 'var(--bottom-nav-h)' }} onClick={() => setSelectedPlaceId(null)}>
                 <div style={{ width: '100%', maxHeight: '85vh' }} onClick={e => e.stopPropagation()}>
                   <PlaceInspector
@@ -672,7 +672,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
               document.body
             )}
 
-            {mobileSidebarOpen && ReactDOM.createPortal(
+            {mobileSidebarOpen && createPortal(
               <div className="bg-[rgba(0,0,0,0.3)]" style={{ position: 'fixed', inset: 0, zIndex: 9999 }} onClick={() => setMobileSidebarOpen(null)}>
                 <div className="bg-surface-card" style={{ position: 'absolute', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
                   <div className="border-b border-edge-secondary" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px' }}>
diff --git a/client/src/pages/VacayPage.tsx b/client/src/pages/VacayPage.tsx
index 7401d8a68..420d266ed 100644
--- a/client/src/pages/VacayPage.tsx
+++ b/client/src/pages/VacayPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 import { useTranslation } from '../i18n'
 import PageShell from '../components/Layout/PageShell'
 import VacayCalendar from '../components/Vacay/VacayCalendar'
@@ -166,7 +166,7 @@ function VacayPageDesktop(): React.ReactElement {
         </div>
 
       {/* Mobile Sidebar Drawer */}
-      {showMobileSidebar && ReactDOM.createPortal(
+      {showMobileSidebar && createPortal(
         <div className="fixed inset-0 lg:hidden" style={{ zIndex: 99980 }}>
           <div className="absolute inset-0 bg-[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 bg-surface"
@@ -208,7 +208,7 @@ function VacayPageDesktop(): React.ReactElement {
       </Modal>
 
       {/* Incoming invite — forced fullscreen modal */}
-      {incomingInvites.length > 0 && ReactDOM.createPortal(
+      {incomingInvites.length > 0 && createPortal(
         <div className="fixed inset-0 flex items-center justify-center px-4 bg-[rgba(0,0,0,0.7)]"
           style={{ zIndex: 99995, backdropFilter: 'blur(8px)' }}>
           {incomingInvites.map(inv => (