chore: release v0.1.0.67

fix(pwa): Pending-Refresh bei Suppression nicht sofort verwerfen
Suppression wird vor dem Flush geprüft, damit gepufferte needRefresh-Werte erhalten bleiben, bis die Unterdrückung endet. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 14:46:45 +02:00 · 2026-05-31 14:46:02 +02:00 · 2026-05-31 14:44:12 +02:00 · 2026-05-31 14:43:25 +02:00 · 2026-05-31 14:41:46 +02:00 · 2026-05-31 14:40:03 +02:00
56 changed files with 3063 additions and 362 deletions
@@ -1 +1 @@
-0.1.0.54
+0.1.0.68
@@ -17,7 +17,8 @@
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Daagbok" />
-    <meta name="theme-color" content="#1e293b" />
+    <meta name="theme-color" content="#0b0c10" />
+    <script src="/appearance-bootstrap.js"></script>
    <link rel="apple-touch-icon" href="/logo.png" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Kapteins Daagbok" />
@@ -36,7 +37,7 @@
    <script defer data-domain="kapteins-daagbok.eu" src="https://plausible.elpatron.me/js/script.tagged-events.js"></script>
    <title>Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch (werbefrei)</title>
  </head>
-  <body style="margin:0;background:#0b0c10;color:#e2e8f0">
+  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
@@ -4,7 +4,7 @@ server {
    client_max_body_size 50M;

    # Service worker and app shell must revalidate so PWA updates are detected
-    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest)$ {
+    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest|version\.json)$ {
        root /usr/share/nginx/html;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
@@ -0,0 +1,44 @@
+/**
+ * Applies saved appearance classes before CSS/JS bundle loads (prevents wrong flash on PWA).
+ * Logic mirrors client/src/services/appearance.ts + userPreferences.ts.
+ */
+(function () {
+  try {
+    var uid = localStorage.getItem('active_userid')
+    var theme = 'auto'
+    var scheme = 'auto'
+
+    if (uid) {
+      theme =
+        localStorage.getItem('user_pref_theme_' + uid) ||
+        localStorage.getItem('active_theme') ||
+        'auto'
+      scheme =
+        localStorage.getItem('user_pref_color_scheme_' + uid) ||
+        localStorage.getItem('active_color_scheme') ||
+        'auto'
+    } else {
+      theme = localStorage.getItem('active_theme') || 'auto'
+      scheme = localStorage.getItem('active_color_scheme') || 'auto'
+    }
+
+    var resolvedTheme = theme
+    if (resolvedTheme !== 'ocean' && resolvedTheme !== 'material' && resolvedTheme !== 'cupertino') {
+      var ua = navigator.userAgent || navigator.vendor || ''
+      if (/iPad|iPhone|iPod|Macintosh/.test(ua)) resolvedTheme = 'cupertino'
+      else if (/Android|Linux/.test(ua)) resolvedTheme = 'material'
+      else resolvedTheme = 'ocean'
+    }
+
+    var resolvedScheme = scheme
+    if (resolvedScheme !== 'light' && resolvedScheme !== 'dark') {
+      resolvedScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    var root = document.documentElement
+    root.classList.add('theme-' + resolvedTheme, 'scheme-' + resolvedScheme)
+    root.style.colorScheme = resolvedScheme
+  } catch (_) {
+    /* ignore storage / matchMedia errors */
+  }
+})()
@@ -8,6 +8,18 @@ body {
  color: var(--app-text);
 }

+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  color: var(--app-input-text);
+  background: var(--app-icon-btn-bg);
+  border: 1px solid var(--app-icon-btn-border);
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-flex;
+}
+
 #root:has(.auth-screen) {
  width: 100%;
  max-width: none;
@@ -1046,6 +1058,7 @@ html.scheme-dark .themed-select-option.is-selected {
 .profile-dl-row dd {
  margin: 0;
  font-size: 14px;
+  color: var(--app-text);
  word-break: break-word;
  text-align: left;
  justify-self: start;
@@ -1059,8 +1072,6 @@ html.scheme-dark .themed-select-option.is-selected {

 .profile-user-id code {
  font-size: 12px;
-  background: rgba(148, 163, 184, 0.08);
-  padding: 4px 8px;
  border-radius: 6px;
  word-break: break-all;
 }
@@ -1127,8 +1138,8 @@ html.scheme-dark .themed-select-option.is-selected {
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
-  background: rgba(148, 163, 184, 0.06);
-  border: 1px solid rgba(148, 163, 184, 0.12);
+  background: var(--app-icon-btn-bg);
+  border: 1px solid var(--app-icon-btn-border);
 }

 .profile-passkey-main {
@@ -1241,6 +1252,7 @@ html.scheme-dark .themed-select-option.is-selected {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 13px;
+  color: var(--app-input-text);
 }

 .profile-passkey-transports {
@@ -1359,6 +1371,140 @@ html.scheme-dark .themed-select-option.is-selected {
  gap: 20px;
 }

+.dashboard-list-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dashboard-filter-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dashboard-sort-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dashboard-sort-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--app-text-muted);
+}
+
+.dashboard-sort-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: stretch;
+}
+
+.dashboard-sort-group {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 6px;
+}
+
+.dashboard-sort-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid var(--app-border-subtle);
+  background: var(--app-surface-alt);
+  color: var(--app-text-muted);
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
+}
+
+.dashboard-sort-btn:hover {
+  border-color: var(--app-border);
+  color: var(--app-text-heading);
+}
+
+.dashboard-sort-btn.is-active {
+  border-color: var(--app-accent-border);
+  background: var(--app-accent-bg);
+  color: var(--app-accent-light);
+}
+
+.dashboard-sort-btn:focus-visible {
+  outline: 2px solid var(--app-accent-focus-ring);
+  outline-offset: 2px;
+}
+
+.dashboard-filter-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--app-text-muted);
+  margin: 0;
+}
+
+.dashboard-filter-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dashboard-filter-icon {
+  position: absolute;
+  left: 14px;
+  color: var(--app-text-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.dashboard-filter-input {
+  width: 100%;
+  padding-left: 42px;
+  padding-right: 42px;
+  min-height: 44px;
+}
+
+.dashboard-filter-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.dashboard-filter-clear {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--app-text-muted);
+  cursor: pointer;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.dashboard-filter-clear:hover {
+  color: var(--app-text-heading);
+  background: var(--app-accent-bg);
+}
+
+.dashboard-filter-clear:focus-visible {
+  outline: 2px solid var(--app-accent-focus-ring);
+  outline-offset: 2px;
+}
+
+.dashboard-filter-meta {
+  margin: 0;
+  font-size: 13px;
+  color: var(--app-text-muted);
+}
+
 .section-title-bar {
  display: flex;
  justify-content: space-between;
@@ -2172,6 +2318,12 @@ html.scheme-dark .themed-select-option.is-selected {
  100% { background-position: 0 0; }
 }

+.conn-status.syncing {
+  background: rgba(59, 130, 246, 0.1);
+  color: #60a5fa;
+  border: 1px solid rgba(59, 130, 246, 0.25);
+}
+
 .conn-status.warning {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
@@ -2304,6 +2456,14 @@ html.scheme-dark .themed-select-option.is-selected {
    word-break: break-word;
  }

+  .dashboard-sort-row {
+    flex-direction: column;
+  }
+
+  .dashboard-sort-group {
+    flex: 1 1 100%;
+  }
+
  .logbooks-grid {
    grid-template-columns: 1fr;
    gap: 16px;
@@ -3050,6 +3210,98 @@ html.theme-cupertino .events-scroll-container {
  }
 }

+.tank-liter-input .tank-liter-slider {
+  --tank-slider-track-h: 10px;
+  --tank-slider-thumb: 26px;
+  width: 100%;
+  height: var(--tank-slider-thumb);
+  margin: 10px 0 6px;
+  padding: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  accent-color: #4ade80;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.tank-liter-input .tank-liter-slider::-webkit-slider-runnable-track {
+  height: var(--tank-slider-track-h);
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: var(--tank-slider-thumb);
+  height: var(--tank-slider-thumb);
+  margin-top: calc((var(--tank-slider-track-h) - var(--tank-slider-thumb)) / 2);
+  border-radius: 50%;
+  background: #4ade80;
+  border: 2px solid rgba(15, 23, 42, 0.85);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider::-moz-range-track {
+  height: var(--tank-slider-track-h);
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider::-moz-range-thumb {
+  width: var(--tank-slider-thumb);
+  height: var(--tank-slider-thumb);
+  border-radius: 50%;
+  background: #4ade80;
+  border: 2px solid rgba(15, 23, 42, 0.85);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tank-liter-input .tank-liter-slider-hint {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-bottom: 6px;
+  text-align: center;
+}
+
+@media (max-width: 480px) {
+  .tank-liter-input .tank-liter-slider {
+    --tank-slider-track-h: 12px;
+    --tank-slider-thumb: 32px;
+    margin: 12px 0 8px;
+  }
+}
+
+.vessel-tanks-section {
+  grid-column: 1 / -1;
+  margin-top: 8px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.vessel-tanks-section h3 {
+  font-size: 1rem;
+  margin: 0 0 4px;
+  color: #e2e8f0;
+}
+
+.vessel-tanks-help {
+  font-size: 0.85rem;
+  color: #94a3b8;
+  margin: 0 0 12px;
+}
+
+.vessel-tanks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
 /* GPS Track Upload & Map Styling */
 .track-upload-zone {
  display: flex;
@@ -3522,6 +3774,59 @@ html.theme-cupertino .events-scroll-container {
  .stats-kpi-value {
    font-size: 20px;
  }
+
+  .profile-stats-section.form-card {
+    padding: 20px 16px;
+  }
+
+  .profile-stats-section .form-header {
+    margin-bottom: 12px;
+    gap: 10px;
+  }
+
+  .profile-stats-section .form-header h2 {
+    font-size: 18px;
+  }
+
+  .profile-stats-section .stats-subtitle {
+    font-size: 12px;
+    line-height: 1.35;
+  }
+
+  .profile-stats-kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin-top: 0;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-card {
+    padding: 10px;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-icon {
+    margin-top: 0;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-label {
+    font-size: 11px;
+    margin-bottom: 2px;
+    line-height: 1.25;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-value {
+    font-size: 16px;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-unit {
+    font-size: 11px;
+  }
 }

 .signature-grid {
@@ -4258,10 +4563,12 @@ body.app-tour-active .app-tour-target-active {
 }

 .app-tour-tooltip:not(.centered) {
-  left: max(16px, env(safe-area-inset-left, 0px));
-  right: max(16px, env(safe-area-inset-right, 0px));
-  width: auto;
-  max-width: none;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.app-tour-tooltip:not(.centered).app-tour-tooltip--anchored {
+  transform: none;
 }

 .app-tour-tooltip.centered {
@@ -1,5 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
-import './App.css'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { DialogProvider } from './components/ModalDialog.tsx'
 import AuthOnboarding from './components/AuthOnboarding.tsx'
 import UserProfilePage from './components/UserProfilePage.tsx'
@@ -29,6 +28,7 @@ import {
  resolveColorScheme,
  subscribeToSystemColorScheme
 } from './services/appearance.js'
+import { syncAppearancePrefs } from './services/appearancePrefs.js'
 import { startBackgroundSync, stopBackgroundSync, syncAllLogbooks, subscribeToSyncState } from './services/sync.js'
 import ReadOnlyViewer from './components/ReadOnlyViewer.tsx'
 import DemoViewer from './components/DemoViewer.tsx'
@@ -46,7 +46,7 @@ import DisclaimerHeaderButton from './components/DisclaimerHeaderButton.tsx'
 import FeedbackHeaderButton from './components/FeedbackHeaderButton.tsx'
 import { useTranslation } from 'react-i18next'
 import {
-  getStoredDemoFirstEntryId,
+  resolveTourLogbookContext,
  seedDemoLogbookIfNeeded
 } from './services/demoLogbook.js'
 import { fetchLogbooks, parseCollaborationRole } from './services/logbook.js'
@@ -57,7 +57,7 @@ const PENDING_PUSH_LOGBOOK_KEY = 'pending_push_logbook_id'
 function App() {
  const { t, i18n } = useTranslation()
  const { confirmLeave } = useUnsavedChangesContext()
-  const { registerNavigation, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
+  const { registerNavigation, registerDemoTourContext, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
  const [activeLogbookTitle, setActiveLogbookTitle] = useState<string | null>(null)
@@ -69,6 +69,12 @@ function App() {
  const [isSyncing, setIsSyncing] = useState(false)
  const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
  const [showUserProfile, setShowUserProfile] = useState(false)
+  const tourLogbookRef = useRef<{ id: string; title: string } | null>(null)
+  const activeLogbookRef = useRef<{ id: string | null; title: string | null }>({
+    id: activeLogbookId,
+    title: activeLogbookTitle
+  })
+  activeLogbookRef.current = { id: activeLogbookId, title: activeLogbookTitle }

  // Viewer mode for read-only shared links
  const [isViewerMode, setIsViewerMode] = useState(false)
@@ -145,6 +151,13 @@ function App() {
    })
  }, [])

+  useEffect(() => {
+    if (!isAuthenticated) return
+    const userId = localStorage.getItem('active_userid')
+    if (!userId) return
+    void syncAppearancePrefs(userId)
+  }, [isAuthenticated])
+
  useEffect(() => {
    const handleOnline = () => {
      setOnline(true)
@@ -309,28 +322,66 @@ function App() {
    setIsAcceptingInvite(false)
  }, [])

-  useEffect(() => {
-    registerNavigation({
-      setActiveTab,
-      setSelectedEntryId: setTourSelectedEntryId,
-      setFeedbackOpen: setTourFeedbackOpen
-    })
-  }, [registerNavigation])
-
-  useEffect(() => {
-    if (isAuthenticated && activeLogbookId) {
-      setDemoHighlightEntryId(getStoredDemoFirstEntryId())
-    }
-  }, [isAuthenticated, activeLogbookId])
-
-  const selectLogbook = (id: string, title: string) => {
+  const selectLogbook = useCallback((id: string, title: string) => {
    setActiveLogbookId(id)
    setActiveLogbookTitle(title)
    setActiveTab('logs')
    setTourSelectedEntryId(null)
    localStorage.setItem('active_logbook_id', id)
    localStorage.setItem('active_logbook_title', title)
-  }
+  }, [])
+
+  const ensureTourLogbookOpen = useCallback(async () => {
+    const ctx = await resolveTourLogbookContext(tourLogbookRef.current?.id)
+    if (!ctx) return
+
+    if (activeLogbookRef.current.id !== ctx.logbookId) {
+      selectLogbook(ctx.logbookId, ctx.title)
+    }
+
+    if (ctx.firstEntryId) {
+      setDemoHighlightEntryId(ctx.firstEntryId)
+      registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+    }
+  }, [registerDemoTourContext, selectLogbook])
+
+  useEffect(() => {
+    registerNavigation({
+      setActiveTab,
+      setSelectedEntryId: setTourSelectedEntryId,
+      setFeedbackOpen: setTourFeedbackOpen,
+      setProfileOpen: setShowUserProfile,
+      ensureLogbookForTour: ensureTourLogbookOpen,
+      setLogbookActive: (active) => {
+        if (active) {
+          void ensureTourLogbookOpen()
+          return
+        }
+
+        const { id, title } = activeLogbookRef.current
+        if (id && title) {
+          tourLogbookRef.current = { id, title }
+        }
+        setActiveLogbookId(null)
+        setActiveLogbookTitle(null)
+        setTourSelectedEntryId(null)
+        localStorage.removeItem('active_logbook_id')
+        localStorage.removeItem('active_logbook_title')
+      }
+    })
+  }, [ensureTourLogbookOpen, registerNavigation])
+
+  useEffect(() => {
+    if (!isAuthenticated || !activeLogbookId) return
+    void (async () => {
+      const ctx = await resolveTourLogbookContext()
+      if (!ctx || ctx.logbookId !== activeLogbookId) return
+      if (ctx.firstEntryId) {
+        setDemoHighlightEntryId(ctx.firstEntryId)
+        registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+      }
+    })()
+  }, [isAuthenticated, activeLogbookId, registerDemoTourContext])

  const openLogbookById = useCallback(
    async (logbookId: string) => {
@@ -346,7 +397,7 @@ function App() {
      }
      selectLogbook(logbookId, `${logbookId.slice(0, 8)}…`)
    },
-    []
+    [selectLogbook]
  )

  const consumePendingPushLogbook = useCallback(() => {
@@ -398,8 +449,20 @@ function App() {
    const savedLogbookId = localStorage.getItem('active_logbook_id')
    const savedLogbookTitle = localStorage.getItem('active_logbook_title')
    if (savedLogbookId && savedLogbookTitle) {
-      setActiveLogbookId(savedLogbookId)
-      setActiveLogbookTitle(savedLogbookTitle)
+      try {
+        const books = await fetchLogbooks()
+        const match = books.find((b) => b.id === savedLogbookId)
+        if (match) {
+          setActiveLogbookId(match.id)
+          setActiveLogbookTitle(match.title)
+        } else {
+          localStorage.removeItem('active_logbook_id')
+          localStorage.removeItem('active_logbook_title')
+        }
+      } catch {
+        setActiveLogbookId(savedLogbookId)
+        setActiveLogbookTitle(savedLogbookTitle)
+      }
    }
    consumePendingPushLogbook()
  }
@@ -4,6 +4,7 @@ import { X, ChevronLeft, ChevronRight } from 'lucide-react'
 import {
  getTourStepCopy,
  getTourTargetSelector,
+  getTourTargetRetryDelay,
  isCenteredTourStep,
  useAppTour
 } from '../context/AppTourContext.tsx'
@@ -17,6 +18,20 @@ interface SpotlightRect {

 const TOOLTIP_EDGE_MARGIN = 16
 const TOOLTIP_ESTIMATED_HEIGHT = 240
+const TOOLTIP_WIDTH = 420
+const TARGET_VIEWPORT_MARGIN = 24
+
+function clampTooltipTop(preferred: number): number {
+  const maxTop = window.innerHeight - TOOLTIP_EDGE_MARGIN - TOOLTIP_ESTIMATED_HEIGHT
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(preferred, maxTop))
+}
+
+function computeTooltipLeft(spotlight: SpotlightRect): number {
+  const tooltipWidth = Math.min(TOOLTIP_WIDTH, window.innerWidth - TOOLTIP_EDGE_MARGIN * 2)
+  const ideal = spotlight.left + spotlight.width / 2 - tooltipWidth / 2
+  const maxLeft = window.innerWidth - TOOLTIP_EDGE_MARGIN - tooltipWidth
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(ideal, maxLeft))
+}

 function buildCutoutClipPath(rect: SpotlightRect): string {
  const right = rect.left + rect.width
@@ -28,20 +43,36 @@ function computeTooltipTop(spotlight: SpotlightRect): number {
  const viewportBottom = window.innerHeight - TOOLTIP_EDGE_MARGIN
  const below = spotlight.top + spotlight.height + 12
  if (below + TOOLTIP_ESTIMATED_HEIGHT <= viewportBottom) {
-    return below
+    return clampTooltipTop(below)
  }

  const above = spotlight.top - 12 - TOOLTIP_ESTIMATED_HEIGHT
  if (above >= TOOLTIP_EDGE_MARGIN) {
-    return above
+    return clampTooltipTop(above)
  }

-  return Math.max(
-    TOOLTIP_EDGE_MARGIN,
-    Math.min(below, viewportBottom - TOOLTIP_ESTIMATED_HEIGHT)
+  return clampTooltipTop(below)
+}
+
+function isTargetVisibleInViewport(rect: DOMRect): boolean {
+  return (
+    rect.top >= TARGET_VIEWPORT_MARGIN &&
+    rect.bottom <= window.innerHeight - TARGET_VIEWPORT_MARGIN
  )
 }

+function measureSpotlight(el: Element): SpotlightRect | null {
+  const rect = el.getBoundingClientRect()
+  if (rect.width <= 0 || rect.height <= 0) return null
+  const padding = 8
+  return {
+    top: Math.max(8, rect.top - padding),
+    left: Math.max(8, rect.left - padding),
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2
+  }
+}
+
 export default function AppTourOverlay() {
  const { t } = useTranslation()
  const {
@@ -50,6 +81,7 @@ export default function AppTourOverlay() {
    currentStepId,
    currentStepIndex,
    totalSteps,
+    layoutTick,
    nextStep,
    prevStep,
    skipTour
@@ -65,7 +97,10 @@ export default function AppTourOverlay() {
      return
    }

+    let cancelled = false
+
    const updateSpotlight = () => {
+      if (cancelled) return
      const selector = getTourTargetSelector(currentStepId)
      if (!selector) {
        setSpotlight(null)
@@ -76,27 +111,38 @@ export default function AppTourOverlay() {
        setSpotlight(null)
        return
      }
+
      const rect = el.getBoundingClientRect()
-      const padding = 8
-      setSpotlight({
-        top: Math.max(8, rect.top - padding),
-        left: Math.max(8, rect.left - padding),
-        width: rect.width + padding * 2,
-        height: rect.height + padding * 2
-      })
+      if (!isTargetVisibleInViewport(rect)) {
+        el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
+        window.requestAnimationFrame(() => {
+          if (cancelled) return
+          const next = measureSpotlight(el)
+          setSpotlight(next)
+        })
+        return
+      }
+
+      setSpotlight(measureSpotlight(el))
    }

    updateSpotlight()
    window.addEventListener('resize', updateSpotlight)
    window.addEventListener('scroll', updateSpotlight, true)
-    const timer = window.setTimeout(updateSpotlight, 120)
+
+    const retryDelays =
+      currentStepId === 'entry_track'
+        ? [400, 700, 1100, 1600]
+        : [getTourTargetRetryDelay(currentStepId), 120, 280, 480]
+    const timers = retryDelays.map((delay) => window.setTimeout(updateSpotlight, delay))

    return () => {
-      window.clearTimeout(timer)
+      cancelled = true
+      for (const timer of timers) window.clearTimeout(timer)
      window.removeEventListener('resize', updateSpotlight)
      window.removeEventListener('scroll', updateSpotlight, true)
    }
-  }, [currentStepId, isActive])
+  }, [currentStepId, isActive, layoutTick])

  useEffect(() => {
    if (!isActive) return
@@ -132,9 +178,17 @@ export default function AppTourOverlay() {
  const tooltipStyle = centered
    ? undefined
    : spotlight
-      ? { top: computeTooltipTop(spotlight) }
+      ? { top: computeTooltipTop(spotlight), left: computeTooltipLeft(spotlight) }
      : { top: '20%' }

+  const tooltipClassName = [
+    'app-tour-tooltip',
+    centered ? 'centered' : '',
+    !centered && spotlight ? 'app-tour-tooltip--anchored' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
+
  const backdropStyle = spotlight && !centered
    ? { clipPath: buildCutoutClipPath(spotlight) }
    : undefined
@@ -159,7 +213,7 @@ export default function AppTourOverlay() {
        />
      )}

-      <div className={`app-tour-tooltip${centered ? ' centered' : ''}`} style={tooltipStyle}>
+      <div className={tooltipClassName} style={tooltipStyle}>
        <button type="button" className="app-tour-close" onClick={skipTour} aria-label={t('tour.skip')}>
          <X size={18} />
        </button>
@@ -379,16 +379,37 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
          {t('auth.recovery_fallback_warning')}
        </p>

-        <form onSubmit={handleRecoverySubmit} className="auth-form">
-          <textarea
-            className="input-textarea"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            disabled={loading}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} className="auth-form" autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              disabled={loading}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>

          {error && <div className="auth-error">{error}</div>}

@@ -31,7 +31,9 @@ export default function DemoViewer({ onExit }: DemoViewerProps) {
    registerNavigation({
      setActiveTab,
      setSelectedEntryId: setTourSelectedEntryId,
-      setFeedbackOpen: () => {}
+      setFeedbackOpen: () => {},
+      setLogbookActive: () => {},
+      setProfileOpen: () => {}
    })
    registerDemoTourContext({ firstEntryId: fixture.firstEntryId })

@@ -344,15 +344,36 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
          <h2>{t('auth.enter_recovery')}</h2>
        </div>
        <p className="recovery-warning">{t('auth.recovery_fallback_warning')}</p>
-        <form onSubmit={handleRecoverySubmit}>
-          <textarea
-            className="input-text"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="invitation-recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="invitation-recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>
          <div className="auth-actions mt-4">
            <button type="button" className="btn secondary" onClick={() => setShowRecoveryFallback(false)}>
              {t('auth.back')}
@@ -241,14 +241,15 @@ export default function LogEntriesList({

      decryptedEntries.sort(compareTravelDaysChronological)
      const previousEntry = decryptedEntries.at(-1) ?? null
-      let { freshwater, fuel, departure } = carryOverFromPreviousDay(previousEntry)
+      let { freshwater, fuel, greywaterLevel, departure } = carryOverFromPreviousDay(previousEntry)

-      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, departure })) {
+      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, greywaterLevel, departure })) {
        const confirmed = await showConfirm(
          t('logs.carry_over_tanks_confirm', {
            departure: departure || '—',
            fw: formatTankLiters(freshwater.morning),
-            fuel: formatTankLiters(fuel.morning)
+            fuel: formatTankLiters(fuel.morning),
+            greywater: formatTankLiters(greywaterLevel)
          }),
          t('logs.carry_over_tanks_title'),
          t('logs.carry_over_tanks_yes'),
@@ -257,6 +258,7 @@ export default function LogEntriesList({
        if (!confirmed) {
          freshwater = emptyTankLevels()
          fuel = emptyTankLevels()
+          greywaterLevel = 0
          departure = ''
        }
      }
@@ -274,6 +276,7 @@ export default function LogEntriesList({
        destination: '',
        freshwater,
        fuel,
+        ...(greywaterLevel > 0 ? { greywater: { level: greywaterLevel } } : {}),
        signSkipper: '',
        signCrew: '',
        events: []
@@ -365,6 +368,11 @@ export default function LogEntriesList({
    )
  }

+  const tourFirstEntryId =
+    highlightEntryId && entries.some((e) => e.id === highlightEntryId)
+      ? highlightEntryId
+      : entries[0]?.id ?? null
+
  return (
    <div className="form-card">
      <div className="section-title-bar mb-6">
@@ -402,7 +410,7 @@ export default function LogEntriesList({
            <div
              key={item.id}
              className="logbook-card glass"
-              data-tour={highlightEntryId === item.id ? 'entry-first' : undefined}
+              data-tour={tourFirstEntryId === item.id ? 'entry-first' : undefined}
              onClick={() => setSelectedEntryId(item.id)}
            >
              <div className="card-icon">
@@ -22,7 +22,7 @@ import {
  hasAnySignature
 } from '../utils/signatures.js'
 import type { SignatureValue } from '../types/signatures.js'
-import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
+import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, hasUnsavedEventDraft, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
 import EventTimeInput24h from './EventTimeInput24h.tsx'
 import CourseDialInput from './CourseDialInput.tsx'
 import { degreesToCardinal } from '../utils/courseAngle.js'
@@ -42,6 +42,14 @@ import {
 import { computeTrackStats, formatTrackStats } from '../utils/trackStats.js'
 import { computeFuelPerMotorHour, formatFuelPerMotorHour } from '../utils/fuelStats.js'
 import { useRegisterUnsavedChanges } from '../context/UnsavedChangesContext.tsx'
+import TankLiterInput from './TankLiterInput.tsx'
+import {
+  computeEveningTankMaxLiters,
+  computeRefilledTankMaxLiters,
+  extractTankCapacitiesFromYacht,
+  formatTankLitersForInput,
+  type VesselTankCapacities
+} from '../utils/tankCapacity.js'

 function emptyTankLevels() {
  return { morning: 0, refilled: 0, evening: 0, consumption: 0 }
@@ -50,6 +58,7 @@ function emptyTankLevels() {
 function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string {
  const fw = (decrypted.freshwater as Record<string, number> | undefined) ?? emptyTankLevels()
  const fuel = (decrypted.fuel as Record<string, number> | undefined) ?? emptyTankLevels()
+  const gw = decrypted.greywater as { level?: number } | undefined
  const trackDistance = decrypted.trackDistanceNm
  const trackSpeedMax = decrypted.trackSpeedMaxKn
  const trackSpeedAvg = decrypted.trackSpeedAvgKn
@@ -72,6 +81,7 @@ function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string
      evening: fuel.evening || 0,
      consumption: fuel.consumption ?? 0
    },
+    greywater: gw ? { level: gw.level || 0 } : undefined,
    trackDistanceNm:
      trackDistance != null && trackDistance !== ''
        ? parseFloat(String(trackDistance))
@@ -145,6 +155,9 @@ export default function LogEntryEditor({
  const [fuelEvening, setFuelEvening] = useState('0')
  const [fuelConsumption, setFuelConsumption] = useState('0')

+  const [greywaterLevel, setGreywaterLevel] = useState('0')
+  const [tankCapacities, setTankCapacities] = useState<VesselTankCapacities>({})
+
  // Signatures
  const [signSkipper, setSignSkipper] = useState<SignatureValue | ''>('')
  const [signCrew, setSignCrew] = useState<SignatureValue | ''>('')
@@ -202,6 +215,7 @@ export default function LogEntryEditor({
  const contentReadyRef = useRef(false)
  const lastSignatureAlertHashRef = useRef<string | null>(null)
  const skipCrewSignClearRef = useRef(false)
+  const entryHashSeqRef = useRef(0)
  const [editingEventIndex, setEditingEventIndex] = useState<number | null>(null)

  const applyTrackStats = (waypoints: SavedTrack['waypoints']) => {
@@ -248,6 +262,7 @@ export default function LogEntryEditor({
        evening: parseFloat(fuelEvening) || 0,
        consumption: parseFloat(fuelConsumption) || 0
      },
+      greywater: { level: parseFloat(greywaterLevel) || 0 },
      trackDistanceNm: trackDistanceNm.trim() ? parseFloat(trackDistanceNm) : undefined,
      trackSpeedMaxKn: trackSpeedMaxKn.trim() ? parseFloat(trackSpeedMaxKn) : undefined,
      trackSpeedAvgKn: trackSpeedAvgKn.trim() ? parseFloat(trackSpeedAvgKn) : undefined,
@@ -258,6 +273,7 @@ export default function LogEntryEditor({
    date, dayOfTravel, departure, destination,
    fwMorning, fwRefilled, fwEvening, fwConsumption,
    fuelMorning, fuelRefilled, fuelEvening, fuelConsumption,
+    greywaterLevel,
    trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn, motorHours,
    events
  ])
@@ -267,6 +283,38 @@ export default function LogEntryEditor({
    [fuelConsumption, motorHours]
  )

+  const tankCapacityTooltip = t('logs.tank_capacity_tooltip')
+
+  const fwRefilledMax = useMemo(
+    () => computeRefilledTankMaxLiters(fwMorning, tankCapacities.freshwaterCapacityL),
+    [fwMorning, tankCapacities.freshwaterCapacityL]
+  )
+
+  const fwEveningMax = useMemo(
+    () =>
+      computeEveningTankMaxLiters(
+        fwMorning,
+        fwRefilled,
+        tankCapacities.freshwaterCapacityL
+      ),
+    [fwMorning, fwRefilled, tankCapacities.freshwaterCapacityL]
+  )
+
+  const fuelRefilledMax = useMemo(
+    () => computeRefilledTankMaxLiters(fuelMorning, tankCapacities.fuelCapacityL),
+    [fuelMorning, tankCapacities.fuelCapacityL]
+  )
+
+  const fuelEveningMax = useMemo(
+    () =>
+      computeEveningTankMaxLiters(
+        fuelMorning,
+        fuelRefilled,
+        tankCapacities.fuelCapacityL
+      ),
+    [fuelMorning, fuelRefilled, tankCapacities.fuelCapacityL]
+  )
+
  const currentFingerprint = useMemo(() => {
    const payload = buildPayloadForSigning()
    return JSON.stringify({
@@ -304,13 +352,7 @@ export default function LogEntryEditor({
  }

  const hasPendingEventForm = useMemo(() => {
-    if (!evTime.trim()) return false
-    const draft = buildEventFromForm()
-    if (editingEventIndex !== null) {
-      const original = events[editingEventIndex]
-      return original ? !logEventsEqual(draft, original) : false
-    }
-    return true
+    return hasUnsavedEventDraft(buildEventFromForm(), editingEventIndex, events)
  }, [
    evTime, evMgk, evRwk, evWindPressure, evWindDirection, evWindStrength, evSeaState,
    evWeatherIcon, evCurrent, evHeel, evSailsOrMotor, evLogReading, evDistance,
@@ -331,16 +373,27 @@ export default function LogEntryEditor({
    onBack()
  }

-  const persistEntryToDb = useCallback(async (eventsOverride?: LogEvent[]) => {
+  const persistEntryToDb = useCallback(async (
+    options?: LogEvent[] | {
+      eventsOverride?: LogEvent[]
+      signSkipper?: SignatureValue | ''
+      signCrew?: SignatureValue | ''
+    }
+  ) => {
    if (readOnly) return

+    const normalized = Array.isArray(options) ? { eventsOverride: options } : (options ?? {})
+    const eventsOverride = normalized.eventsOverride
+    const skipperToSave = normalized.signSkipper !== undefined ? normalized.signSkipper : signSkipper
+    const crewToSave = normalized.signCrew !== undefined ? normalized.signCrew : signCrew
+
    const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
    if (!masterKey) throw new Error('Encryption key not found. Please log in.')

    const entryData = {
      ...buildPayloadForSigning(eventsOverride),
-      signSkipper: normalizedSerializedSignature(signSkipper),
-      signCrew: normalizedSerializedSignature(signCrew)
+      signSkipper: normalizedSerializedSignature(skipperToSave),
+      signCrew: normalizedSerializedSignature(crewToSave)
    }

    const encrypted = await encryptJson(entryData, masterKey)
@@ -368,9 +421,14 @@ export default function LogEntryEditor({

    setSavedFingerprint(JSON.stringify({
      ...buildPayloadForSigning(eventsOverride),
-      signSkipper: fingerprintSignature(signSkipper),
-      signCrew: fingerprintSignature(signCrew)
+      signSkipper: fingerprintSignature(skipperToSave),
+      signCrew: fingerprintSignature(crewToSave)
    }))
+
+    const hash = await hashEntryForSigning(buildPayloadForSigning(eventsOverride))
+    entryHashSeqRef.current += 1
+    setEntryHash(hash)
+    lockedContentHashRef.current = hasAnySignature(skipperToSave, crewToSave) ? hash : null
  }, [
    readOnly, logbookId, entryId, events, buildPayloadForSigning, signSkipper, signCrew
  ])
@@ -398,9 +456,11 @@ export default function LogEntryEditor({
  }, [logbookId])

  useEffect(() => {
+    const seq = ++entryHashSeqRef.current
    let cancelled = false
    hashEntryForSigning(buildPayloadForSigning()).then((hash) => {
-      if (!cancelled) setEntryHash(hash)
+      if (cancelled || seq !== entryHashSeqRef.current) return
+      setEntryHash(hash)
    })
    return () => { cancelled = true }
  }, [buildPayloadForSigning])
@@ -471,6 +531,7 @@ export default function LogEntryEditor({
      role: 'skipper'
    })
    setSignSkipper(signature)
+    entryHashSeqRef.current += 1
    setEntryHash(hash)
    lockedContentHashRef.current = hash
    trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'skipper' })
@@ -489,6 +550,7 @@ export default function LogEntryEditor({
      role: 'crew'
    })
    setSignCrew(signature)
+    entryHashSeqRef.current += 1
    setEntryHash(hash)
    lockedContentHashRef.current = hash
    trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'crew' })
@@ -512,11 +574,59 @@ export default function LogEntryEditor({
    setFuelConsumption(cons >= 0 ? String(cons) : '0')
  }, [fuelMorning, fuelRefilled, fuelEvening])

-  // Load Yacht Sails
+  const fwRefilledNoCapacity =
+    (tankCapacities.freshwaterCapacityL ?? 0) > 0 && fwRefilledMax == null
+  const fuelRefilledNoCapacity =
+    (tankCapacities.fuelCapacityL ?? 0) > 0 && fuelRefilledMax == null
+
  useEffect(() => {
-    async function loadYachtSails() {
-      if (readOnly && preloadedYacht?.sails) {
-        setYachtSails(preloadedYacht.sails)
+    const refilled = parseFloat(fwRefilled) || 0
+    if (fwRefilledMax == null) {
+      if (fwRefilledNoCapacity && refilled > 0) {
+        setFwRefilled(formatTankLitersForInput(0))
+      }
+      return
+    }
+    if (refilled > fwRefilledMax) {
+      setFwRefilled(formatTankLitersForInput(fwRefilledMax))
+    }
+  }, [fwRefilledMax, fwRefilled, fwRefilledNoCapacity])
+
+  useEffect(() => {
+    if (fwEveningMax == null) return
+    const evening = parseFloat(fwEvening) || 0
+    if (evening > fwEveningMax) {
+      setFwEvening(formatTankLitersForInput(fwEveningMax))
+    }
+  }, [fwEveningMax, fwEvening])
+
+  useEffect(() => {
+    const refilled = parseFloat(fuelRefilled) || 0
+    if (fuelRefilledMax == null) {
+      if (fuelRefilledNoCapacity && refilled > 0) {
+        setFuelRefilled(formatTankLitersForInput(0))
+      }
+      return
+    }
+    if (refilled > fuelRefilledMax) {
+      setFuelRefilled(formatTankLitersForInput(fuelRefilledMax))
+    }
+  }, [fuelRefilledMax, fuelRefilled, fuelRefilledNoCapacity])
+
+  useEffect(() => {
+    if (fuelEveningMax == null) return
+    const evening = parseFloat(fuelEvening) || 0
+    if (evening > fuelEveningMax) {
+      setFuelEvening(formatTankLitersForInput(fuelEveningMax))
+    }
+  }, [fuelEveningMax, fuelEvening])
+
+  // Load yacht sails and tank capacities
+  useEffect(() => {
+    async function loadYachtMeta() {
+      if (readOnly && preloadedYacht) {
+        if (preloadedYacht.sails) setYachtSails(preloadedYacht.sails)
+        setTankCapacities(extractTankCapacitiesFromYacht(preloadedYacht))
        return
      }
      try {
@@ -526,16 +636,19 @@ export default function LogEntryEditor({
        const yacht = await db.yachts.get(logbookId)
        if (yacht) {
          const decrypted = await decryptJson(yacht.encryptedData, yacht.iv, yacht.tag, masterKey)
-          if (decrypted && decrypted.sails && Array.isArray(decrypted.sails)) {
-            setYachtSails(decrypted.sails)
+          if (decrypted) {
+            if (decrypted.sails && Array.isArray(decrypted.sails)) {
+              setYachtSails(decrypted.sails)
+            }
+            setTankCapacities(extractTankCapacitiesFromYacht(decrypted))
          }
        }
      } catch (err) {
-        console.error('Failed to load yacht sails in editor:', err)
+        console.error('Failed to load yacht meta in editor:', err)
      }
    }
-    loadYachtSails()
-  }, [logbookId, preloadedYacht])
+    loadYachtMeta()
+  }, [logbookId, preloadedYacht, readOnly])

  // Load entry details
  useEffect(() => {
@@ -565,6 +678,11 @@ export default function LogEntryEditor({
            setFuelEvening(String(preloadedEntry.fuel.evening || 0))
            setFuelConsumption(String(preloadedEntry.fuel.consumption ?? 0))
          }
+          if (preloadedEntry.greywater) {
+            setGreywaterLevel(String(preloadedEntry.greywater.level || 0))
+          } else {
+            setGreywaterLevel('0')
+          }

          setSignSkipper(normalizeSignature(preloadedEntry.signSkipper) || '')
          setSignCrew(normalizeSignature(preloadedEntry.signCrew) || '')
@@ -598,6 +716,11 @@ export default function LogEntryEditor({
              setFuelEvening(String(decrypted.fuel.evening || 0))
              setFuelConsumption(String(decrypted.fuel.consumption ?? 0))
            }
+            if (decrypted.greywater) {
+              setGreywaterLevel(String(decrypted.greywater.level || 0))
+            } else {
+              setGreywaterLevel('0')
+            }

            setSignSkipper(normalizeSignature(decrypted.signSkipper) || '')
            setSignCrew(normalizeSignature(decrypted.signCrew) || '')
@@ -921,10 +1044,23 @@ export default function LogEntryEditor({
    setEvLocationName('')
  }

+  const resolveSignaturesAfterContentChange = (skipperOnly = false) => {
+    const hadSkipper = !!signSkipper
+    const hadCrew = !!signCrew
+    const cleared = hadSkipper || (hadCrew && !skipperOnly)
+    skipCrewSignClearRef.current = skipperOnly
+    const nextSkipper: SignatureValue | '' = hadSkipper ? '' : signSkipper
+    const nextCrew: SignatureValue | '' = hadCrew && !skipperOnly ? '' : signCrew
+    if (cleared) {
+      if (hadSkipper) setSignSkipper('')
+      if (hadCrew && !skipperOnly) setSignCrew('')
+      lockedContentHashRef.current = null
+    }
+    return { signSkipper: nextSkipper, signCrew: nextCrew, cleared }
+  }
+
  const markSkipperSignatureClearedForEventChange = () => {
-    if (!signSkipper) return
-    skipCrewSignClearRef.current = true
-    setSignSkipper('')
+    resolveSignaturesAfterContentChange(true)
  }

  const handleEditEvent = (index: number) => {
@@ -1014,11 +1150,20 @@ export default function LogEntryEditor({
    if (readOnly) return

    let eventsToSave = events
+    let signaturesForSave: { signSkipper: SignatureValue | ''; signCrew: SignatureValue | '' } | undefined

    if (hasPendingEventForm) {
      const isEdit = editingEventIndex !== null
-      if (isEdit && signSkipper) {
-        markSkipperSignatureClearedForEventChange()
+      const resolved = resolveSignaturesAfterContentChange(isEdit)
+      signaturesForSave = {
+        signSkipper: resolved.signSkipper,
+        signCrew: resolved.signCrew
+      }
+      if (resolved.cleared) {
+        void showAlertRef.current(
+          isEdit ? t('logs.sign_cleared_skipper_re_sign') : t('logs.sign_cleared_re_sign'),
+          isEdit ? t('logs.sign_cleared_skipper_re_sign_title') : t('logs.sign_cleared_re_sign_title')
+        )
      }
      eventsToSave = applyEventFormToEvents(buildEventFromForm())
      setEvents(eventsToSave)
@@ -1032,7 +1177,10 @@ export default function LogEntryEditor({
    setSuccess(false)

    try {
-      await persistEntryToDb(eventsToSave)
+      await persistEntryToDb({
+        eventsOverride: eventsToSave,
+        ...signaturesForSave
+      })

      setSuccess(true)
      trackPlausibleEvent(PlausibleEvents.TRAVEL_DAY_SAVED)
@@ -1170,41 +1318,35 @@ export default function LogEntryEditor({
              <h3>{t('logs.freshwater')}</h3>
            </div>
            <div className="consumption-grid">
+              <TankLiterInput
+                id="fw-morning"
+                label={t('logs.morning')}
+                value={fwMorning}
+                onChange={setFwMorning}
+                maxLiters={tankCapacities.freshwaterCapacityL}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fw-refilled"
+                label={t('logs.refilled')}
+                value={fwRefilled}
+                onChange={setFwRefilled}
+                maxLiters={fwRefilledMax}
+                disabled={saving || readOnly || fwRefilledNoCapacity}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fw-evening"
+                label={t('logs.evening')}
+                value={fwEvening}
+                onChange={setFwEvening}
+                maxLiters={fwEveningMax}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
              <div className="input-group">
-                <label>{t('logs.morning')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fwMorning}
-                  onChange={(e) => setFwMorning(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.refilled')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fwRefilled}
-                  onChange={(e) => setFwRefilled(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.evening')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fwEvening}
-                  onChange={(e) => setFwEvening(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.consumption')} (L)</label>
+                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
                <input
                  type="number"
                  className="input-text consumption-value"
@@ -1212,6 +1354,7 @@ export default function LogEntryEditor({
                  readOnly
                  tabIndex={-1}
                  aria-readonly="true"
+                  title={tankCapacityTooltip}
                />
              </div>
            </div>
@@ -1224,41 +1367,35 @@ export default function LogEntryEditor({
              <h3>{t('logs.fuel')}</h3>
            </div>
            <div className="consumption-grid">
+              <TankLiterInput
+                id="fuel-morning"
+                label={t('logs.morning')}
+                value={fuelMorning}
+                onChange={setFuelMorning}
+                maxLiters={tankCapacities.fuelCapacityL}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fuel-refilled"
+                label={t('logs.refilled')}
+                value={fuelRefilled}
+                onChange={setFuelRefilled}
+                maxLiters={fuelRefilledMax}
+                disabled={saving || readOnly || fuelRefilledNoCapacity}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fuel-evening"
+                label={t('logs.evening')}
+                value={fuelEvening}
+                onChange={setFuelEvening}
+                maxLiters={fuelEveningMax}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
              <div className="input-group">
-                <label>{t('logs.morning')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fuelMorning}
-                  onChange={(e) => setFuelMorning(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.refilled')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fuelRefilled}
-                  onChange={(e) => setFuelRefilled(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.evening')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fuelEvening}
-                  onChange={(e) => setFuelEvening(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.consumption')} (L)</label>
+                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
                <input
                  type="number"
                  className="input-text consumption-value"
@@ -1266,11 +1403,12 @@ export default function LogEntryEditor({
                  readOnly
                  tabIndex={-1}
                  aria-readonly="true"
+                  title={tankCapacityTooltip}
                />
              </div>

              <div className="input-group">
-                <label>{t('logs.fuel_per_motor_hour')}</label>
+                <label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label>
                <input
                  type="text"
                  className="input-text consumption-value"
@@ -1282,10 +1420,30 @@ export default function LogEntryEditor({
                  readOnly
                  tabIndex={-1}
                  aria-readonly="true"
+                  title={tankCapacityTooltip}
                />
              </div>
            </div>
          </div>
+
+          {/* Greywater card */}
+          <div className="form-card">
+            <div className="form-header">
+              <Compass size={20} className="form-icon" />
+              <h3>{t('logs.greywater')}</h3>
+            </div>
+            <div className="consumption-grid">
+              <TankLiterInput
+                id="greywater-level"
+                label={t('logs.greywater_level')}
+                value={greywaterLevel}
+                onChange={setGreywaterLevel}
+                maxLiters={tankCapacities.greywaterCapacityL}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
+            </div>
+          </div>
        </div>

        {/* Section 3: Event Journal Entries */}
@@ -1,14 +1,13 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLiveQuery } from 'dexie-react-hooks'
-import { db } from '../services/db.js'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
 import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
 import LogbookRoleBadge from './LogbookRoleBadge.tsx'
 import BetaBadge from './BetaBadge.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { logoutUser } from '../services/auth.js'
 import { useDialog } from './ModalDialog.tsx'
-import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
+import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff, Search, X, CalendarDays, CaseSensitive, ArrowUp, ArrowDown } from 'lucide-react'
 import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
 import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'

@@ -18,6 +17,46 @@ interface LogbookDashboardProps {
  onOpenProfile: () => void
 }

+function logbookMatchesFilter(lb: DecryptedLogbook, query: string, locale: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+
+  if (lb.title.toLowerCase().includes(q)) return true
+
+  const updated = new Date(lb.updatedAt)
+  const year = updated.getFullYear().toString()
+  if (year.includes(q)) return true
+
+  const dateLabel = updated.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  }).toLowerCase()
+  if (dateLabel.includes(q)) return true
+
+  return false
+}
+
+type LogbookSortKey = 'name' | 'date'
+type LogbookSortDirection = 'asc' | 'desc'
+
+function sortLogbooks(
+  items: DecryptedLogbook[],
+  sortBy: LogbookSortKey,
+  direction: LogbookSortDirection,
+  locale: string
+): DecryptedLogbook[] {
+  const sorted = [...items]
+  sorted.sort((a, b) => {
+    const cmp =
+      sortBy === 'name'
+        ? a.title.localeCompare(b.title, locale, { sensitivity: 'base' })
+        : new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+    return direction === 'asc' ? cmp : -cmp
+  })
+  return sorted
+}
+
 export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProfile }: LogbookDashboardProps) {
  const { t, i18n } = useTranslation()
  const { showConfirm } = useDialog()
@@ -29,11 +68,14 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
  const [loading, setLoading] = useState(false)
  const [refreshing, setRefreshing] = useState(false)
  const [error, setError] = useState<string | null>(null)
+  const [filterQuery, setFilterQuery] = useState('')
+  const [sortBy, setSortBy] = useState<LogbookSortKey>('date')
+  const [sortDirection, setSortDirection] = useState<LogbookSortDirection>('desc')
+  const filterInputRef = useRef<HTMLInputElement>(null)
  const [online, setOnline] = useState(navigator.onLine)
  const [username] = useState(localStorage.getItem('active_username') || 'Skipper')

-  // Reactive sync queue count
-  const pendingCount = useLiveQuery(() => db.syncQueue.count()) || 0
+  const { pendingCount, showSpinner, showPendingWarning, connStatusClassName } = useSyncIndicator()

  // Listen to connectivity changes
  useEffect(() => {
@@ -158,6 +200,25 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
  const ownedLogbooks = logbooks.filter((lb) => !lb.isShared)
  const sharedLogbooks = logbooks.filter((lb) => lb.isShared)

+  const filterActive = filterQuery.trim().length > 0
+  const filteredOwnedLogbooks = useMemo(
+    () => ownedLogbooks.filter((lb) => logbookMatchesFilter(lb, filterQuery, i18n.language)),
+    [ownedLogbooks, filterQuery, i18n.language]
+  )
+  const filteredSharedLogbooks = useMemo(
+    () => sharedLogbooks.filter((lb) => logbookMatchesFilter(lb, filterQuery, i18n.language)),
+    [sharedLogbooks, filterQuery, i18n.language]
+  )
+  const sortedOwnedLogbooks = useMemo(
+    () => sortLogbooks(filteredOwnedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredOwnedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const sortedSharedLogbooks = useMemo(
+    () => sortLogbooks(filteredSharedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredSharedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const filteredLogbookCount = sortedOwnedLogbooks.length + sortedSharedLogbooks.length
+
  const renderLogbookCard = (lb: DecryptedLogbook) => {
    const isEditingTitle = editingLogbookId === lb.id

@@ -272,11 +333,27 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf

        <div className="header-actions">
          {/* Connection Indicator */}
-          <div className={`conn-status ${online ? (pendingCount > 0 ? 'unsynced' : 'online') : 'offline'}`} title={online ? (pendingCount > 0 ? 'Pending Sync' : 'Synced') : 'Offline'}>
+          <div
+            className={connStatusClassName(online)}
+            title={
+              online
+                ? showSpinner
+                  ? 'Syncing'
+                  : pendingCount > 0
+                    ? 'Pending Sync'
+                    : 'Synced'
+                : 'Offline'
+            }
+          >
            {online ? (
-              pendingCount > 0 ? (
+              showSpinner ? (
                <>
                  <RefreshCw size={18} className="spin" />
+                  <span>{t('sync.status_syncing')}</span>
+                </>
+              ) : showPendingWarning ? (
+                <>
+                  <RefreshCw size={18} />
                  <span>{t('sync.status_unsynced')} ({pendingCount})</span>
                </>
              ) : (
@@ -300,6 +377,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
            onClick={onOpenProfile}
            title={t('dashboard.open_profile', { name: username })}
            aria-label={t('dashboard.open_profile', { name: username })}
+            data-tour="nav-profile"
          >
            <User size={18} aria-hidden="true" />
            <span className="skipper-badge__name">{username}</span>
@@ -361,17 +439,115 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
          ) : logbooks.length === 0 ? (
            <div className="dashboard-status-msg glass">{t('dashboard.no_logbooks')}</div>
          ) : (
-            <div className="logbook-sections">
-              {ownedLogbooks.length > 0 && renderLogbookSection(
-                sharedLogbooks.length > 0 ? t('dashboard.section_owned') : t('dashboard.title'),
-                ownedLogbooks
+            <>
+              <div className="dashboard-list-controls">
+                <div className="dashboard-filter-bar">
+                  <label className="dashboard-filter-label" htmlFor="logbook-list-filter">
+                    {t('dashboard.filter_label')}
+                  </label>
+                  <div className="dashboard-filter-input-wrap">
+                    <Search size={18} className="dashboard-filter-icon" aria-hidden="true" />
+                    <input
+                      ref={filterInputRef}
+                      id="logbook-list-filter"
+                      type="search"
+                      className="input-text dashboard-filter-input"
+                      placeholder={t('dashboard.filter_placeholder')}
+                      value={filterQuery}
+                      onChange={(e) => setFilterQuery(e.target.value)}
+                      autoComplete="off"
+                      spellCheck={false}
+                      aria-describedby={filterActive ? 'logbook-filter-status' : undefined}
+                    />
+                    {filterActive && (
+                      <button
+                        type="button"
+                        className="dashboard-filter-clear"
+                        onClick={() => {
+                          setFilterQuery('')
+                          filterInputRef.current?.focus()
+                        }}
+                        title={t('dashboard.filter_clear')}
+                        aria-label={t('dashboard.filter_clear')}
+                      >
+                        <X size={16} aria-hidden="true" />
+                      </button>
+                    )}
+                  </div>
+                  {filterActive && (
+                    <p id="logbook-filter-status" className="dashboard-filter-meta" role="status">
+                      {t('dashboard.filter_results', { count: filteredLogbookCount })}
+                    </p>
+                  )}
+                </div>
+
+                <div className="dashboard-sort-bar">
+                  <span className="dashboard-sort-label">{t('dashboard.sort_label')}</span>
+                  <div className="dashboard-sort-row">
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_by_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'name' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('name')}
+                        aria-pressed={sortBy === 'name'}
+                        aria-label={t('dashboard.sort_by_name')}
+                        title={t('dashboard.sort_by_name')}
+                      >
+                        <CaseSensitive size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('date')}
+                        aria-pressed={sortBy === 'date'}
+                        aria-label={t('dashboard.sort_by_date')}
+                        title={t('dashboard.sort_by_date')}
+                      >
+                        <CalendarDays size={16} aria-hidden="true" />
+                      </button>
+                    </div>
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_dir_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'asc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('asc')}
+                        aria-pressed={sortDirection === 'asc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                      >
+                        <ArrowUp size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('desc')}
+                        aria-pressed={sortDirection === 'desc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                      >
+                        <ArrowDown size={16} aria-hidden="true" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {filterActive && filteredLogbookCount === 0 ? (
+                <div className="dashboard-status-msg glass">{t('dashboard.filter_no_results')}</div>
+              ) : (
+                <div className="logbook-sections">
+                  {sortedOwnedLogbooks.length > 0 && renderLogbookSection(
+                    sortedSharedLogbooks.length > 0 ? t('dashboard.section_owned') : t('dashboard.title'),
+                    sortedOwnedLogbooks
+                  )}
+                  {sortedSharedLogbooks.length > 0 && renderLogbookSection(
+                    t('dashboard.section_shared'),
+                    sortedSharedLogbooks,
+                    t('dashboard.section_shared_hint')
+                  )}
+                </div>
              )}
-              {sharedLogbooks.length > 0 && renderLogbookSection(
-                t('dashboard.section_shared'),
-                sharedLogbooks,
-                t('dashboard.section_shared_hint')
-              )}
-            </div>
+            </>
          )}
        </section>
      </main>
@@ -6,6 +6,12 @@ import LogbookBackupPanel from './LogbookBackupPanel.tsx'
 import { useDialog } from './ModalDialog.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { apiFetch } from '../services/api.js'
+import {
+  enableCollaboratorChangePush,
+  isCollaboratorPushActive,
+  isPushSupported
+} from '../services/pushNotifications.js'
+import { isIosDevice, isRunningStandalone } from '../hooks/usePwaInstall.js'

 interface SettingsFormProps {
  logbookId?: string | null
@@ -151,6 +157,43 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
    }
  }

+  const promptPushAfterInviteCreated = async () => {
+    if (!isPushSupported()) return
+    if (await isCollaboratorPushActive()) return
+
+    const iosNeedsInstall = isIosDevice() && !isRunningStandalone()
+
+    if (iosNeedsInstall) {
+      await showAlert(
+        t('settings.invite_push_prompt_ios_message'),
+        t('settings.invite_push_prompt_title'),
+        t('settings.invite_push_prompt_later')
+      )
+      return
+    }
+
+    const enable = await showConfirm(
+      t('settings.invite_push_prompt_message'),
+      t('settings.invite_push_prompt_title'),
+      t('settings.invite_push_prompt_enable'),
+      t('settings.invite_push_prompt_later')
+    )
+
+    if (!enable) return
+
+    try {
+      await enableCollaboratorChangePush()
+      await showAlert(
+        t('settings.invite_push_prompt_success'),
+        t('settings.invite_push_prompt_title')
+      )
+      trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
+    } catch (err: unknown) {
+      console.error('Failed to enable push after invite:', err)
+      await showAlert(err instanceof Error ? err.message : t('profile.push_error'))
+    }
+  }
+
  const handleGenerateInvite = async () => {
    if (!logbookId) return
    setGeneratingInvite(true)
@@ -175,6 +218,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF

      setInviteLink(link)
      trackPlausibleEvent(PlausibleEvents.INVITE_GENERATED)
+      await promptPushAfterInviteCreated()
    } catch (err: unknown) {
      console.error('Failed to generate invite:', err)
      showAlert(err instanceof Error ? err.message : 'Failed to generate invite link.')
@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clampTankLiters } from '../utils/tankCapacity.js'
+
+interface TankLiterInputProps {
+  id?: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  maxLiters?: number
+  disabled?: boolean
+  titleTooltip?: string
+}
+
+function parseInputLiters(value: string): number {
+  const trimmed = value.trim().replace(',', '.')
+  if (!trimmed) return 0
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+export default function TankLiterInput({
+  id,
+  label,
+  value,
+  onChange,
+  maxLiters,
+  disabled = false,
+  titleTooltip
+}: TankLiterInputProps) {
+  const { t } = useTranslation()
+  const useSlider = maxLiters != null && maxLiters > 0
+
+  const emitValue = useCallback(
+    (liters: number) => {
+      const clamped = clampTankLiters(liters, useSlider ? maxLiters : undefined)
+      const str =
+        Number.isInteger(clamped) ? String(clamped) : String(Number(clamped.toFixed(1)))
+      onChange(str)
+    },
+    [onChange, maxLiters, useSlider]
+  )
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  const handleNumberBlur = () => {
+    if (!useSlider) return
+    emitValue(parseInputLiters(value))
+  }
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    emitValue(Number(e.target.value))
+  }
+
+  const numericValue = parseInputLiters(value)
+  const sliderValue = useSlider ? clampTankLiters(numericValue, maxLiters) : 0
+
+  return (
+    <div className="input-group tank-liter-input">
+      <label htmlFor={id} title={titleTooltip}>{label}</label>
+      {useSlider && (
+        <>
+          <input
+            type="range"
+            className="tank-liter-slider"
+            min={0}
+            max={maxLiters}
+            step={1}
+            value={sliderValue}
+            onChange={handleSliderChange}
+            disabled={disabled}
+            title={titleTooltip}
+            aria-valuemin={0}
+            aria-valuemax={maxLiters}
+            aria-valuenow={sliderValue}
+            aria-label={label}
+          />
+          <div className="tank-liter-slider-hint" aria-hidden="true">
+            {t('logs.tank_slider_of_max', {
+              current: sliderValue,
+              max: maxLiters
+            })}
+          </div>
+        </>
+      )}
+      <input
+        id={id}
+        type="number"
+        className="input-text"
+        value={value}
+        onChange={handleNumberChange}
+        onBlur={handleNumberBlur}
+        disabled={disabled}
+        min={0}
+        max={useSlider ? maxLiters : undefined}
+        step="any"
+        title={titleTooltip}
+      />
+    </div>
+  )
+}
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLiveQuery } from 'dexie-react-hooks'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
 import {
  User,
  ChevronLeft,
@@ -128,7 +129,12 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
  const [pendingRecoveryPhrase, setPendingRecoveryPhrase] = useState<string | null>(null)
  const [recoveryCopied, setRecoveryCopied] = useState(false)

-  const pendingSyncCount = useLiveQuery(() => db.syncQueue.count()) ?? 0
+  const {
+    pendingCount: pendingSyncCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName
+  } = useSyncIndicator()

  const sharedLogbookCount = useLiveQuery(
    () => db.logbooks.filter((lb) => lb.isShared === 1).count(),
@@ -437,6 +443,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
          </section>
        ) : profile ? (
          <>
+            <div data-tour="profile-preferences">
            <section className="form-card">
              <div className="form-header">
                <User size={24} className="form-icon" />
@@ -478,6 +485,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
            </section>

            <UserProfilePreferences userId={profile.userId} />
+            </div>

            <section className="member-editor-card glass">
              <div className="profile-section-header">
@@ -527,11 +535,16 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
                <h3>{t('profile.device_title')}</h3>
              </div>
              <p className="profile-section-desc">{t('profile.device_desc')}</p>
-              <div className={`profile-device-status conn-status ${online ? (pendingSyncCount > 0 ? 'warning' : 'online') : 'offline'}`}>
+              <div className={`profile-device-status ${connStatusClassName(online)}`}>
                {online ? (
-                  pendingSyncCount > 0 ? (
+                  showSpinner ? (
                    <>
                      <RefreshCw size={16} className="spin" aria-hidden="true" />
+                      <span>{t('sync.status_syncing')}</span>
+                    </>
+                  ) : showPendingWarning ? (
+                    <>
+                      <RefreshCw size={16} aria-hidden="true" />
                      <span>{t('profile.device_sync_pending', { count: pendingSyncCount })}</span>
                    </>
                  ) : (
@@ -713,7 +726,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
              </div>
            </section>

-            <section className="form-card">
+            <section className="form-card profile-stats-section">
              <div className="form-header">
                <BarChart2 size={24} className="form-icon" />
                <div>
@@ -723,7 +736,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
              </div>

              {(statsTotals || profile) && (
-                <div className="stats-kpi-grid">
+                <div className="stats-kpi-grid profile-stats-kpi-grid">
                  <KpiCard
                    icon={<BookOpen size={20} />}
                    label={t('profile.stats_logbooks')}
@@ -5,6 +5,7 @@ import ThemedSelect from './ThemedSelect.tsx'
 import PushNotificationSettings from './PushNotificationSettings.tsx'
 import PwaInstallPrompt from './PwaInstallPrompt.tsx'
 import { notifyAppearanceChanged } from '../services/appearance.js'
+import { saveAppearancePrefsToServer } from '../services/appearancePrefs.js'
 import { useAppTour } from '../context/AppTourContext.tsx'
 import {
  getColorSchemePreference,
@@ -32,6 +33,9 @@ export default function UserProfilePreferences({ userId }: UserProfilePreference
    setThemePreference(userId, nextTheme)
    setColorSchemePreference(userId, nextColorScheme)
    notifyAppearanceChanged()
+    void saveAppearancePrefsToServer(nextTheme, nextColorScheme).catch((err) => {
+      console.warn('Failed to save appearance prefs to server:', err)
+    })
  }

  const handleThemeChange = (nextTheme: string) => {
@@ -7,6 +7,7 @@ import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { Ship, Save, Check, Plus, X, Camera, Trash2 } from 'lucide-react'
+import { parseOptionalTankLiters, tankCapacityInputFromStored } from '../utils/tankCapacity.js'

 interface VesselFormProps {
  logbookId: string
@@ -47,6 +48,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
  const [mmsi, setMmsi] = useState('')
  const [sails, setSails] = useState<string[]>([])
  const [newSailName, setNewSailName] = useState('')
+  const [freshwaterCapacityL, setFreshwaterCapacityL] = useState('')
+  const [fuelCapacityL, setFuelCapacityL] = useState('')
+  const [greywaterCapacityL, setGreywaterCapacityL] = useState('')

  const fileInputRef = React.useRef<HTMLInputElement>(null)
  const [photo, setPhoto] = useState<string | null>(null)
@@ -78,6 +82,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
          setMmsi(preloadedData.mmsi || '')
          setSails(preloadedData.sails || [])
          setPhoto(preloadedData.photo || null)
+          setFreshwaterCapacityL(tankCapacityInputFromStored(preloadedData.freshwaterCapacityL))
+          setFuelCapacityL(tankCapacityInputFromStored(preloadedData.fuelCapacityL))
+          setGreywaterCapacityL(tankCapacityInputFromStored(preloadedData.greywaterCapacityL))
          return
        }

@@ -103,6 +110,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
            setMmsi(decrypted.mmsi || '')
            setSails(decrypted.sails || [])
            setPhoto(decrypted.photo || null)
+            setFreshwaterCapacityL(tankCapacityInputFromStored(decrypted.freshwaterCapacityL))
+            setFuelCapacityL(tankCapacityInputFromStored(decrypted.fuelCapacityL))
+            setGreywaterCapacityL(tankCapacityInputFromStored(decrypted.greywaterCapacityL))
          }
        }
      } catch (err: any) {
@@ -201,12 +211,19 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
      let parsedLengthM: number | undefined
      let parsedDraftM: number | undefined
      let parsedAirDraftM: number | undefined
+      let parsedFreshwaterCapacityL: number | undefined
+      let parsedFuelCapacityL: number | undefined
+      let parsedGreywaterCapacityL: number | undefined
      try {
        parsedLengthM = parseOptionalMetricMeters(lengthM)
        parsedDraftM = parseOptionalMetricMeters(draftM)
        parsedAirDraftM = parseOptionalMetricMeters(airDraftM)
-      } catch {
-        setError(t('vessel.invalid_metric'))
+        parsedFreshwaterCapacityL = parseOptionalTankLiters(freshwaterCapacityL)
+        parsedFuelCapacityL = parseOptionalTankLiters(fuelCapacityL)
+        parsedGreywaterCapacityL = parseOptionalTankLiters(greywaterCapacityL)
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : ''
+        setError(msg === 'invalid_tank_liters' ? t('vessel.invalid_tank_liters') : t('vessel.invalid_metric'))
        setSaving(false)
        return
      }
@@ -217,6 +234,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
        lengthM: parsedLengthM,
        draftM: parsedDraftM,
        airDraftM: parsedAirDraftM,
+        freshwaterCapacityL: parsedFreshwaterCapacityL,
+        fuelCapacityL: parsedFuelCapacityL,
+        greywaterCapacityL: parsedGreywaterCapacityL,
        homePort: homePort.trim(),
        charterCompany: charterCompany.trim(),
        owner: owner.trim(),
@@ -480,6 +500,49 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
            />
          </div>

+          <div className="vessel-tanks-section">
+            <h3>{t('vessel.tanks_section')}</h3>
+            <p className="vessel-tanks-help">{t('vessel.tanks_help')}</p>
+            <div className="vessel-tanks-grid">
+              <div className="input-group">
+                <label>{t('vessel.freshwater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={freshwaterCapacityL}
+                  onChange={(e) => setFreshwaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.fuel_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={fuelCapacityL}
+                  onChange={(e) => setFuelCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.greywater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={greywaterCapacityL}
+                  onChange={(e) => setGreywaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+            </div>
+          </div>
+
          <div className="sails-section">
            <h3>{t('vessel.sails_list')}</h3>
            <p className="help-text">{t('vessel.sails_help')}</p>
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DEMO_EXCLUDED_STEPS,
+  DEMO_STEP_ORDER,
+  FULL_STEP_ORDER,
+  getTourScrollRetryDelays,
+  getTourTargetRetryDelay,
+  tourStepOpensEntry
+} from './AppTourContext.tsx'
+
+describe('AppTourContext step order', () => {
+  it('includes profile steps before finish in full tour', () => {
+    const profileIndex = FULL_STEP_ORDER.indexOf('nav_profile')
+    const prefsIndex = FULL_STEP_ORDER.indexOf('profile_preferences')
+    const finishIndex = FULL_STEP_ORDER.indexOf('finish')
+
+    expect(profileIndex).toBeGreaterThan(FULL_STEP_ORDER.indexOf('nav_feedback'))
+    expect(prefsIndex).toBe(profileIndex + 1)
+    expect(finishIndex).toBe(prefsIndex + 1)
+    expect(FULL_STEP_ORDER).toHaveLength(12)
+  })
+
+  it('excludes profile, stats and feedback from demo tour', () => {
+    for (const step of DEMO_EXCLUDED_STEPS) {
+      expect(DEMO_STEP_ORDER).not.toContain(step)
+    }
+    expect(DEMO_STEP_ORDER).toContain('finish')
+    expect(DEMO_STEP_ORDER).toHaveLength(FULL_STEP_ORDER.length - DEMO_EXCLUDED_STEPS.length)
+  })
+
+  it('only opens entry editor on entry_track step', () => {
+    expect(tourStepOpensEntry('entry_open')).toBe(false)
+    expect(tourStepOpensEntry('entry_list')).toBe(false)
+    expect(tourStepOpensEntry('entry_track')).toBe(true)
+  })
+
+  it('retries scroll for entry_track while editor mounts', () => {
+    expect(getTourTargetRetryDelay('entry_track')).toBeGreaterThanOrEqual(400)
+    expect(getTourScrollRetryDelays('entry_track').length).toBeGreaterThan(1)
+  })
+})
@@ -29,12 +29,17 @@ export type TourStepId =
  | 'nav_crew'
  | 'nav_stats'
  | 'nav_feedback'
+  | 'nav_profile'
+  | 'profile_preferences'
  | 'finish'

 interface TourNavigation {
  setActiveTab: (tab: AppTab) => void
  setSelectedEntryId: (entryId: string | null) => void
  setFeedbackOpen: (open: boolean) => void
+  setLogbookActive: (active: boolean) => void
+  setProfileOpen: (open: boolean) => void
+  ensureLogbookForTour?: () => Promise<void>
 }

 interface DemoTourContext {
@@ -47,6 +52,7 @@ interface AppTourContextValue {
  currentStepId: TourStepId | null
  currentStepIndex: number
  totalSteps: number
+  layoutTick: number
  startTour: (options?: { force?: boolean; demoMode?: boolean }) => void
  stopTour: () => void
  restartTour: () => void
@@ -58,7 +64,7 @@ interface AppTourContextValue {
  requestStartAfterLogin: () => void
 }

-const FULL_STEP_ORDER: TourStepId[] = [
+export const FULL_STEP_ORDER: TourStepId[] = [
  'welcome',
  'nav_logs',
  'entry_list',
@@ -68,12 +74,33 @@ const FULL_STEP_ORDER: TourStepId[] = [
  'nav_crew',
  'nav_stats',
  'nav_feedback',
+  'nav_profile',
+  'profile_preferences',
  'finish'
 ]

-/** Public demo has no stats/feedback UI — skip those steps. */
-const DEMO_EXCLUDED_STEPS: TourStepId[] = ['nav_stats', 'nav_feedback']
-const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter((id) => !DEMO_EXCLUDED_STEPS.includes(id))
+/** Public demo has no stats/feedback/profile UI — skip those steps. */
+export const DEMO_EXCLUDED_STEPS: TourStepId[] = [
+  'nav_stats',
+  'nav_feedback',
+  'nav_profile',
+  'profile_preferences'
+]
+
+export const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter(
+  (id) => !DEMO_EXCLUDED_STEPS.includes(id)
+)
+
+const LOGBOOK_TOUR_STEPS = new Set<TourStepId>([
+  'nav_logs',
+  'entry_list',
+  'entry_open',
+  'entry_track',
+  'nav_vessel',
+  'nav_crew',
+  'nav_stats',
+  'nav_feedback'
+])

 function getStepOrder(demoMode: boolean): TourStepId[] {
  return demoMode ? DEMO_STEP_ORDER : FULL_STEP_ORDER
@@ -87,7 +114,28 @@ const TARGET_BY_STEP: Partial<Record<TourStepId, string>> = {
  nav_vessel: '[data-tour="nav-vessel"]',
  nav_crew: '[data-tour="nav-crew"]',
  nav_stats: '[data-tour="stats-dashboard"]',
-  nav_feedback: '[data-tour="feedback-form"]'
+  nav_feedback: '[data-tour="feedback-form"]',
+  nav_profile: '[data-tour="nav-profile"]',
+  profile_preferences: '[data-tour="profile-preferences"]'
+}
+
+/** Whether a tour step opens the first log entry editor (not the list card). */
+export function tourStepOpensEntry(stepId: TourStepId): boolean {
+  return stepId === 'entry_track'
+}
+
+export function getTourTargetDelay(stepId: TourStepId): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'nav_feedback') return 180
+  if (stepId === 'nav_profile' || stepId === 'profile_preferences') return 250
+  return 0
+}
+
+/** Extra scroll attempts while async UI (e.g. entry editor) mounts. */
+export function getTourScrollRetryDelays(stepId: TourStepId): number[] {
+  if (stepId === 'entry_track') return [400, 700, 1100, 1600]
+  const initial = getTourTargetDelay(stepId)
+  return initial > 0 ? [initial] : [0]
 }

 const AppTourContext = createContext<AppTourContextValue | null>(null)
@@ -97,6 +145,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
  const [stepIndex, setStepIndex] = useState(0)
  const [pendingAfterLogin, setPendingAfterLogin] = useState(false)
  const [isDemoTour, setIsDemoTour] = useState(false)
+  const [layoutTick, setLayoutTick] = useState(0)
  const navigationRef = useRef<TourNavigation | null>(null)
  const demoContextRef = useRef<DemoTourContext | null>(null)
  const tourModeRef = useRef<{ demoMode: boolean }>({ demoMode: false })
@@ -112,13 +161,24 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
    const nav = navigationRef.current
    if (!nav) return

+    if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(true)
+    }
+
    if (stepId === 'nav_logs' || stepId === 'entry_list' || stepId === 'entry_open' || stepId === 'entry_track') {
      nav.setActiveTab('logs')
    }
-    if (stepId === 'entry_open' || stepId === 'entry_track') {
+
+    if (stepId === 'entry_list' || stepId === 'entry_open') {
+      nav.setSelectedEntryId(null)
+    } else if (tourStepOpensEntry(stepId)) {
      const firstEntryId = resolveFirstEntryId()
      if (firstEntryId) nav.setSelectedEntryId(firstEntryId)
+    } else if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setSelectedEntryId(null)
    }
+
    if (stepId === 'nav_vessel') {
      nav.setSelectedEntryId(null)
      nav.setActiveTab('vessel')
@@ -137,19 +197,34 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
    } else {
      nav.setFeedbackOpen(false)
    }
+
+    if (stepId === 'nav_profile') {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(false)
+    }
+    if (stepId === 'profile_preferences') {
+      nav.setLogbookActive(false)
+      nav.setProfileOpen(true)
+    }
  }, [resolveFirstEntryId])

  const scrollToCurrentTarget = useCallback((stepId: TourStepId | null) => {
    if (!stepId) return
    const selector = TARGET_BY_STEP[stepId]
    if (!selector) return
-    const delayMs = stepId === 'nav_feedback' ? 180 : 0
-    window.setTimeout(() => {
-      window.requestAnimationFrame(() => {
-        const el = document.querySelector(selector)
-        el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
-      })
-    }, delayMs)
+
+    for (const delayMs of getTourScrollRetryDelays(stepId)) {
+      window.setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          const el = document.querySelector(selector)
+          el?.scrollIntoView({
+            behavior: stepId === 'entry_track' ? 'instant' : 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          })
+        })
+      }, delayMs)
+    }
  }, [])

  const startTour = useCallback((options?: { force?: boolean; demoMode?: boolean }) => {
@@ -173,6 +248,8 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_COMPLETED, tourProps)
      const nav = navigationRef.current
      if (nav && !tourModeRef.current.demoMode) {
+        nav.setProfileOpen(false)
+        nav.setLogbookActive(true)
        nav.setSelectedEntryId(null)
        nav.setActiveTab('stats')
      }
@@ -183,6 +260,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {

    tourModeRef.current = { demoMode: false }
    navigationRef.current?.setFeedbackOpen(false)
+    navigationRef.current?.setProfileOpen(false)
    setIsDemoTour(false)
    setIsActive(false)
    setStepIndex(0)
@@ -213,8 +291,25 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
    if (!isActive) return
    const stepId = getStepOrder(isDemoTour)[stepIndex]
    if (!stepId) return
-    applyStepSideEffects(stepId)
-    scrollToCurrentTarget(stepId)
+
+    let cancelled = false
+    const run = async () => {
+      if (LOGBOOK_TOUR_STEPS.has(stepId) && !isDemoTour) {
+        await navigationRef.current?.ensureLogbookForTour?.()
+      }
+      if (cancelled) return
+      applyStepSideEffects(stepId)
+      scrollToCurrentTarget(stepId)
+      setLayoutTick((tick) => tick + 1)
+      window.setTimeout(() => {
+        if (!cancelled) setLayoutTick((tick) => tick + 1)
+      }, 150)
+    }
+    void run()
+
+    return () => {
+      cancelled = true
+    }
  }, [isActive, isDemoTour, stepIndex, applyStepSideEffects, scrollToCurrentTarget])

  const restartTour = useCallback(() => {
@@ -257,6 +352,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
      currentStepId,
      currentStepIndex: stepIndex,
      totalSteps: stepOrder.length,
+      layoutTick,
      startTour,
      stopTour,
      restartTour,
@@ -281,6 +377,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
      startTour,
      stepIndex,
      stepOrder.length,
+      layoutTick,
      stopTour
    ]
  )
@@ -321,3 +418,10 @@ export function getTourTargetSelector(stepId: TourStepId | null): string | null
 export function isCenteredTourStep(stepId: TourStepId | null): boolean {
  return stepId === 'welcome' || stepId === 'finish'
 }
+
+export function getTourTargetRetryDelay(stepId: TourStepId | null): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'profile_preferences') return 300
+  if (stepId === 'nav_profile') return 200
+  return 120
+}
@@ -1,13 +1,19 @@
 import { useEffect, useRef } from 'react'
 import { useRegisterSW } from 'virtual:pwa-register/react'
+import {
+  forcePwaRecovery,
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  triggerServiceWorkerUpdate
+} from '../services/pwaStartup.js'
+import { isDeployedVersionNewer } from '../services/pwaVersion.js'

-const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+const UPDATE_CHECK_INTERVAL_MS = 15 * 60 * 1000
 const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
 const UPDATE_SUPPRESS_MS = 30_000
-const UPDATE_DISMISS_SUPPRESS_MS = 60 * 60 * 1000
-const UPDATE_RELOAD_FALLBACK_MS = 2000
-/** Prevent Android PWA cold-start reload loops from onNeedReload. */
-const PWA_INITIAL_RELOAD_KEY = 'pwa_sw_initial_reload_done'
+const UPDATE_DISMISS_SUPPRESS_MS = 15 * 60 * 1000
+const UPDATE_RELOAD_FALLBACK_MS = 2_000
+const UPDATE_HARD_RECOVERY_MS = 5_000

 function isUpdateSuppressed(): boolean {
  const suppressUntil = Number(sessionStorage.getItem(UPDATE_SUPPRESS_KEY) || '0')
@@ -22,10 +28,16 @@ function clearUpdateSuppression(): void {
  sessionStorage.removeItem(UPDATE_SUPPRESS_KEY)
 }

-function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => void {
+function scheduleUpdateChecks(
+  registration: ServiceWorkerRegistration,
+  onOutdated: () => void
+): () => void {
  const checkForUpdate = () => {
    if (isUpdateSuppressed()) return
    registration.update().catch(() => {})
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) onOutdated()
+    })
  }

  const onVisibilityChange = () => {
@@ -34,17 +46,44 @@ function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => vo
    }
  }

+  const onOnline = () => {
+    checkForUpdate()
+  }
+
  document.addEventListener('visibilitychange', onVisibilityChange)
-  const intervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+  window.addEventListener('online', onOnline)
+  const updateIntervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+
+  checkForUpdate()

  return () => {
    document.removeEventListener('visibilitychange', onVisibilityChange)
-    window.clearInterval(intervalId)
+    window.removeEventListener('online', onOnline)
+    window.clearInterval(updateIntervalId)
  }
 }

+function reloadForServiceWorkerTakeover(): void {
+  if (recentlyAttemptedReload()) return
+  markReloadAttempt()
+  clearUpdateSuppression()
+  window.location.reload()
+}
+
 export function usePwaUpdate() {
  const cleanupRef = useRef<(() => void) | null>(null)
+  const reloadFallbackTimerRef = useRef<number | null>(null)
+  const forceRecoveryTimerRef = useRef<number | null>(null)
+  const setNeedRefreshRef = useRef<((value: boolean) => void) | null>(null)
+  const pendingNeedRefreshRef = useRef<boolean | null>(null)
+
+  const applyNeedRefresh = (value: boolean) => {
+    if (setNeedRefreshRef.current) {
+      setNeedRefreshRef.current(value)
+      return
+    }
+    pendingNeedRefreshRef.current = value
+  }

  const {
    needRefresh: [needRefresh, setNeedRefresh],
@@ -52,39 +91,55 @@ export function usePwaUpdate() {
  } = useRegisterSW({
    immediate: !import.meta.env.DEV,
    onNeedReload() {
-      // First SW takeover requires one reload; guard against repeated reloads on Android PWA resume.
-      if (sessionStorage.getItem(PWA_INITIAL_RELOAD_KEY)) {
-        return
-      }
-      sessionStorage.setItem(PWA_INITIAL_RELOAD_KEY, '1')
-      clearUpdateSuppression()
-      setNeedRefresh(false)
-      window.location.reload()
+      reloadForServiceWorkerTakeover()
    },
    onNeedRefresh() {
      if (isUpdateSuppressed()) return
-      setNeedRefresh(true)
+      applyNeedRefresh(true)
    },
    onRegisteredSW(_swUrl: string, registration: ServiceWorkerRegistration | undefined) {
      if (!registration) return

      if (isUpdateSuppressed() || !registration.waiting) {
-        setNeedRefresh(false)
+        applyNeedRefresh(false)
      }

      cleanupRef.current?.()
-      cleanupRef.current = scheduleUpdateChecks(registration)
+      cleanupRef.current = scheduleUpdateChecks(registration, () => {
+        if (isUpdateSuppressed()) return
+        applyNeedRefresh(true)
+      })
    }
  })

+  setNeedRefreshRef.current = setNeedRefresh
+
  useEffect(() => {
    if (isUpdateSuppressed()) {
      setNeedRefresh(false)
+    } else if (pendingNeedRefreshRef.current !== null) {
+      const pending = pendingNeedRefreshRef.current
+      pendingNeedRefreshRef.current = null
+      setNeedRefresh(pending)
    }

+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) {
+        setNeedRefresh(true)
+      }
+    })
+
    return () => {
      cleanupRef.current?.()
      cleanupRef.current = null
+      if (reloadFallbackTimerRef.current !== null) {
+        window.clearTimeout(reloadFallbackTimerRef.current)
+        reloadFallbackTimerRef.current = null
+      }
+      if (forceRecoveryTimerRef.current !== null) {
+        window.clearTimeout(forceRecoveryTimerRef.current)
+        forceRecoveryTimerRef.current = null
+      }
    }
  }, [setNeedRefresh])

@@ -93,11 +148,24 @@ export function usePwaUpdate() {
    suppressUpdatePrompt()

    await updateServiceWorker(true)
+    await triggerServiceWorkerUpdate()

-    // vite-plugin-pwa reloads via the "controlling" event; fallback if that does not fire.
-    window.setTimeout(() => {
-      window.location.reload()
+    if (reloadFallbackTimerRef.current !== null) {
+      window.clearTimeout(reloadFallbackTimerRef.current)
+    }
+    if (forceRecoveryTimerRef.current !== null) {
+      window.clearTimeout(forceRecoveryTimerRef.current)
+    }
+
+    reloadFallbackTimerRef.current = window.setTimeout(() => {
+      reloadFallbackTimerRef.current = null
+      reloadForServiceWorkerTakeover()
    }, UPDATE_RELOAD_FALLBACK_MS)
+
+    forceRecoveryTimerRef.current = window.setTimeout(() => {
+      forceRecoveryTimerRef.current = null
+      void forcePwaRecovery()
+    }, UPDATE_HARD_RECOVERY_MS)
  }

  const dismissUpdate = () => {
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { db } from '../services/db.js'
+import { subscribeToSyncState } from '../services/sync.js'
+
+export type SyncConnStatusVariant = 'offline' | 'syncing' | 'pending' | 'online'
+
+/** Maps sync/online state to conn-status CSS modifier classes. */
+export function syncConnStatusClassName(
+  online: boolean,
+  showSpinner: boolean,
+  pendingCount: number
+): string {
+  if (!online) return 'conn-status offline'
+  if (showSpinner) return 'conn-status syncing'
+  if (pendingCount > 0) return 'conn-status warning'
+  return 'conn-status online'
+}
+
+/** Sync queue depth and whether a sync pass is running (for header indicators). */
+export function useSyncIndicator(logbookId?: string | null) {
+  const [isSyncing, setIsSyncing] = useState(false)
+
+  const pendingCount =
+    useLiveQuery(
+      () =>
+        logbookId
+          ? db.syncQueue.where({ logbookId }).count()
+          : db.syncQueue.count(),
+      [logbookId]
+    ) ?? 0
+
+  useEffect(() => {
+    return subscribeToSyncState(setIsSyncing)
+  }, [])
+
+  const showSpinner = isSyncing
+  const showPendingWarning = pendingCount > 0 && !isSyncing
+
+  return {
+    isSyncing,
+    pendingCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName: (online: boolean) =>
+      syncConnStatusClassName(online, showSpinner, pendingCount)
+  }
+}
@@ -84,6 +84,7 @@
    },
    "sync": {
      "status_synced": "Synchronisiert",
+      "status_syncing": "Synchronisiere…",
      "status_offline": "Offline-Cache",
      "status_unsynced": "Unsynchronisierte Änderungen"
    },
@@ -116,7 +117,13 @@
      "no_sails": "Keine Segel hinterlegt.",
      "photo_add": "Foto hinzufügen",
      "photo_change": "Foto ändern",
-      "photo_delete": "Foto löschen"
+      "photo_delete": "Foto löschen",
+      "tanks_section": "Tanks (Fassungsvermögen)",
+      "tanks_help": "Optional in Liter — ermöglicht Slider im Journal bei bekannten Tankgrößen.",
+      "freshwater_capacity_l": "Trinkwasser (Liter)",
+      "fuel_capacity_l": "Treibstoff (Liter)",
+      "greywater_capacity_l": "Grauwasser (Liter)",
+      "invalid_tank_liters": "Ungültiger Zahlenwert — bitte Liter als Zahl eingeben (z. B. 200)."
    },
    "logs": {
      "title": "Logbuch-Journal",
@@ -137,6 +144,10 @@
      "route": "Reise von/nach",
      "freshwater": "Frischwasser (Liter)",
      "fuel": "Treibstoff / Fuel (Liter)",
+      "greywater": "Grauwasser (Liter)",
+      "greywater_level": "Füllstand",
+      "tank_slider_of_max": "{{current}} / {{max}} L",
+      "tank_capacity_tooltip": "Wenn in den Schiffsdaten die Tank-Fassungsvermögen (Liter) hinterlegt sind, kannst du Füllstände hier per Slider eingeben.",
      "morning": "Stand morgens",
      "refilled": "Nachgefüllt",
      "evening": "Stand abends",
@@ -182,7 +193,7 @@
      "delete_entry": "Tag löschen",
      "delete_confirm": "Bist du sicher, dass du diesen Reisetag unwiderruflich löschen möchtest?",
      "carry_over_tanks_title": "Daten vom Vortag übernehmen?",
-      "carry_over_tanks_confirm": "Start-Hafen, Frischwasser- und Kraftstoff-Morgenstände vom letzten Reisetag übernehmen?\n\nStart-Hafen: {{departure}}\nFrischwasser: {{fw}} L\nKraftstoff: {{fuel}} L",
+      "carry_over_tanks_confirm": "Start-Hafen, Frischwasser-, Kraftstoff- und Grauwasser-Startstände vom letzten Reisetag übernehmen?\n\nStart-Hafen: {{departure}}\nFrischwasser: {{fw}} L\nKraftstoff: {{fuel}} L\nGrauwasser: {{greywater}} L",
      "carry_over_tanks_yes": "Übernehmen",
      "carry_over_tanks_no": "Mit 0 starten",
      "event_title": "Chronologisches Ereignisprotokoll",
@@ -293,7 +304,23 @@
      "edit_title": "Logbuch umbenennen",
      "edit_placeholder": "Neuer Name des Logbuchs",
      "edit_success": "Logbuch erfolgreich umbenannt",
-      "edit_btn": "Umbenennen"
+      "edit_btn": "Umbenennen",
+      "filter_label": "Logbücher filtern",
+      "filter_placeholder": "Name, Jahr oder Datum …",
+      "filter_clear": "Filter zurücksetzen",
+      "filter_results": "{{count}} Treffer",
+      "filter_no_results": "Keine Logbücher passen zu deiner Suche. Probiere einen anderen Namen oder ein anderes Jahr.",
+      "sort_label": "Sortieren",
+      "sort_by_label": "Sortieren nach",
+      "sort_by_name": "Name",
+      "sort_by_date": "Datum",
+      "sort_dir_label": "Reihenfolge",
+      "sort_asc": "Aufsteigend",
+      "sort_desc": "Absteigend",
+      "sort_name_asc": "Name A bis Z",
+      "sort_name_desc": "Name Z bis A",
+      "sort_date_asc": "Älteste zuerst",
+      "sort_date_desc": "Neueste zuerst"
    },
    "profile": {
      "title": "Benutzerprofil",
@@ -471,6 +498,12 @@
      "delete_account_failed": "Konto konnte nicht gelöscht werden. Bitte versuche es erneut.",
      "delete_backup_hint": "Tipp: Erstelle vor dem Löschen Backups deiner Logbücher (.daagbok.json) in den Einstellungen jedes Logbuchs.",
      "deleting_account": "Konto wird gelöscht…",
+      "invite_push_prompt_title": "Push-Benachrichtigungen aktivieren?",
+      "invite_push_prompt_message": "Sobald eingeladene Crewmitglieder Änderungen synchronisieren, kannst du per Push informiert werden. Es werden keine Logbuch-Inhalte im Klartext gesendet.",
+      "invite_push_prompt_ios_message": "Sobald Crewmitglieder Änderungen synchronisieren, kannst du per Push informiert werden. Auf dem iPhone/iPad: App zum Home-Bildschirm hinzufügen (iOS 16.4+), dann Push im Benutzerprofil aktivieren.",
+      "invite_push_prompt_enable": "Jetzt aktivieren",
+      "invite_push_prompt_later": "Später",
+      "invite_push_prompt_success": "Push-Benachrichtigungen sind auf diesem Gerät aktiv.",
      "backup_title": "Backup & Wiederherstellung",
      "backup_desc": "Vollständiges verschlüsseltes Backup dieses Logbuchs (Einträge, Fotos, GPS-Tracks, Crew, Schiff). Mit Backup-Passphrase geschützt — für Restore auf diesem oder einem neuen Account.",
      "backup_export_title": "Backup erstellen",
@@ -671,9 +704,17 @@
          "title": "Feedback senden",
          "body": "Über dieses Formular kannst du Fehler, Ideen oder allgemeines Feedback direkt an das Projektteam schicken – auch nach der Tour jederzeit über das Symbol oben rechts."
        },
+        "nav_profile": {
+          "title": "Dein Benutzerprofil",
+          "body": "Über den Skipper-Button oben erreichst du dein persönliches Profil – unabhängig vom aktuellen Logbuch."
+        },
+        "profile_preferences": {
+          "title": "Konto & Darstellung",
+          "body": "Hier verwaltest du deine Konto-Identität, Theme und Hell/Dunkel-Modus. Die App-Tour kannst du jederzeit erneut starten. Passkeys und Sicherheitseinstellungen findest du weiter unten im Profil."
+        },
        "finish": {
          "title": "Alles klar!",
-          "body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit unter Einstellungen erneut starten. Gute Fahrt!"
+          "body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit im Benutzerprofil erneut starten. Gute Fahrt!"
        }
      }
    },
@@ -84,6 +84,7 @@
    },
    "sync": {
      "status_synced": "Synced",
+      "status_syncing": "Syncing…",
      "status_offline": "Offline Cache",
      "status_unsynced": "Unsynced changes"
    },
@@ -116,7 +117,13 @@
      "no_sails": "No sails defined.",
      "photo_add": "Add Photo",
      "photo_change": "Change Photo",
-      "photo_delete": "Delete Photo"
+      "photo_delete": "Delete Photo",
+      "tanks_section": "Tanks (capacity)",
+      "tanks_help": "Optional, in liters — enables sliders in the journal when tank sizes are known.",
+      "freshwater_capacity_l": "Freshwater (liters)",
+      "fuel_capacity_l": "Fuel (liters)",
+      "greywater_capacity_l": "Greywater (liters)",
+      "invalid_tank_liters": "Invalid number — please enter capacity in liters (e.g. 200)."
    },
    "logs": {
      "title": "Logbook Journal",
@@ -137,6 +144,10 @@
      "route": "Route / Journey",
      "freshwater": "Freshwater (Liters)",
      "fuel": "Fuel (Liters)",
+      "greywater": "Greywater (Liters)",
+      "greywater_level": "Fill level",
+      "tank_slider_of_max": "{{current}} / {{max}} L",
+      "tank_capacity_tooltip": "If tank capacities (liters) are set in vessel master data, you can enter fill levels here using sliders.",
      "morning": "Morning Level",
      "refilled": "Refilled",
      "evening": "Evening Level",
@@ -182,7 +193,7 @@
      "delete_entry": "Delete Day",
      "delete_confirm": "Are you sure you want to permanently delete this travel day?",
      "carry_over_tanks_title": "Carry over from previous day?",
-      "carry_over_tanks_confirm": "Use the previous travel day's destination as departure port and closing tank levels as morning levels?\n\nDeparture port: {{departure}}\nFreshwater: {{fw}} L\nFuel: {{fuel}} L",
+      "carry_over_tanks_confirm": "Use the previous travel day's destination as departure port and closing tank levels as morning levels?\n\nDeparture port: {{departure}}\nFreshwater: {{fw}} L\nFuel: {{fuel}} L\nGreywater: {{greywater}} L",
      "carry_over_tanks_yes": "Carry over",
      "carry_over_tanks_no": "Start at 0",
      "event_title": "Chronological Event Logbook",
@@ -293,7 +304,23 @@
      "edit_title": "Rename Logbook",
      "edit_placeholder": "New name of the logbook",
      "edit_success": "Logbook renamed successfully",
-      "edit_btn": "Rename"
+      "edit_btn": "Rename",
+      "filter_label": "Filter logbooks",
+      "filter_placeholder": "Name, year or date …",
+      "filter_clear": "Clear filter",
+      "filter_results": "{{count}} matches",
+      "filter_no_results": "No logbooks match your search. Try a different name or year.",
+      "sort_label": "Sort",
+      "sort_by_label": "Sort by",
+      "sort_by_name": "Name",
+      "sort_by_date": "Date",
+      "sort_dir_label": "Order",
+      "sort_asc": "Ascending",
+      "sort_desc": "Descending",
+      "sort_name_asc": "Name A to Z",
+      "sort_name_desc": "Name Z to A",
+      "sort_date_asc": "Oldest first",
+      "sort_date_desc": "Newest first"
    },
    "profile": {
      "title": "User profile",
@@ -471,6 +498,12 @@
      "delete_account_failed": "Failed to delete account. Please try again.",
      "delete_backup_hint": "Tip: Before deleting, create backups of your logbooks (.daagbok.json) in each logbook's settings.",
      "deleting_account": "Deleting account…",
+      "invite_push_prompt_title": "Enable push notifications?",
+      "invite_push_prompt_message": "When invited crew members sync changes, you can be notified via push. No logbook content is sent in plain text.",
+      "invite_push_prompt_ios_message": "When crew members sync changes, you can get push notifications. On iPhone/iPad: add the app to your Home Screen (iOS 16.4+), then enable push in your user profile.",
+      "invite_push_prompt_enable": "Enable now",
+      "invite_push_prompt_later": "Later",
+      "invite_push_prompt_success": "Push notifications are active on this device.",
      "backup_title": "Backup & restore",
      "backup_desc": "Full encrypted backup of this logbook (entries, photos, GPS tracks, crew, vessel). Protected with a backup passphrase — restore on this or a new account.",
      "backup_export_title": "Create backup",
@@ -671,9 +704,17 @@
          "title": "Send feedback",
          "body": "Use this form to report bugs, ideas, or general feedback to the project team — you can also open it anytime later via the icon in the top right."
        },
+        "nav_profile": {
+          "title": "Your user profile",
+          "body": "Tap the skipper button at the top to open your personal profile — independent of the current logbook."
+        },
+        "profile_preferences": {
+          "title": "Account & appearance",
+          "body": "Manage your account identity, theme, and light/dark mode here. You can restart the app tour anytime. Passkeys and security settings are further down on the profile page."
+        },
        "finish": {
          "title": "You're all set!",
-          "body": "You'll land on the statistics dashboard next. You can restart the tour anytime in Settings. Fair winds!"
+          "body": "You'll land on the statistics dashboard next. You can restart the tour anytime from your user profile. Fair winds!"
        }
      }
    },
@@ -1,64 +1,8 @@
-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+/* Minimal app shell — component styles live in App.css / themes.css */

-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
+*,
+*::before,
+*::after {
  box-sizing: border-box;
 }

@@ -66,46 +10,11 @@ body {
  margin: 0;
 }

-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
+#root {
+  width: 100%;
+  max-width: 100%;
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
@@ -3,9 +3,15 @@ import { createRoot } from 'react-dom/client'
 import 'leaflet/dist/leaflet.css'
 import './themes.css'
 import './index.css'
+import './App.css'
 import './i18n'
 import App from './App.tsx'
 import { applyAppearanceToDocument } from './services/appearance.ts'
+import {
+  installStaleAssetRecovery,
+  markReloadAttempt,
+  reconcileVersionOnStartup
+} from './services/pwaStartup.ts'

 /** Stale PWA precache on localhost can shadow Vite dev modules. */
 async function clearDevServiceWorkerCaches(): Promise<void> {
@@ -35,8 +41,19 @@ function renderBootstrapError(message: string): void {

 async function bootstrap(): Promise<void> {
  applyAppearanceToDocument()
+  installStaleAssetRecovery()
  await clearDevServiceWorkerCaches()

+  const startupResult = await reconcileVersionOnStartup()
+  if (startupResult === 'reload') {
+    markReloadAttempt()
+    window.location.reload()
+    return
+  }
+  if (startupResult === 'recovered') {
+    return
+  }
+
  const rootEl = document.getElementById('root')
  if (!rootEl) {
    throw new Error('Missing #root element')
@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  applyAppearanceToDocument,
+  resolveAppTheme,
+  resolveColorScheme,
+  type AppTheme,
+  type ResolvedColorScheme
+} from './appearance.js'
+import { setColorSchemePreference } from './userPreferences.js'
+
+const USER_ID = 'appearance-test-user'
+
+const COMBOS: Array<{ theme: AppTheme; scheme: ResolvedColorScheme }> = [
+  { theme: 'ocean', scheme: 'dark' },
+  { theme: 'ocean', scheme: 'light' },
+  { theme: 'material', scheme: 'dark' },
+  { theme: 'material', scheme: 'light' },
+  { theme: 'cupertino', scheme: 'dark' },
+  { theme: 'cupertino', scheme: 'light' }
+]
+
+describe('appearance', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    document.documentElement.className = ''
+    document.documentElement.style.colorScheme = ''
+    document.head.querySelector('meta[name="theme-color"]')?.remove()
+  })
+
+  it.each(COMBOS)('applies $theme · $scheme classes to document', ({ theme, scheme }) => {
+    applyAppearanceToDocument(theme, scheme)
+
+    const root = document.documentElement
+    expect(root.classList.contains(`theme-${theme}`)).toBe(true)
+    expect(root.classList.contains(`scheme-${scheme}`)).toBe(true)
+    expect(root.style.colorScheme).toBe(scheme)
+  })
+
+  it('replaces previous theme classes when switching appearance', () => {
+    applyAppearanceToDocument('ocean', 'dark')
+    applyAppearanceToDocument('material', 'light')
+
+    const root = document.documentElement
+    expect(root.classList.contains('theme-material')).toBe(true)
+    expect(root.classList.contains('theme-ocean')).toBe(false)
+    expect(root.classList.contains('scheme-light')).toBe(true)
+    expect(root.classList.contains('scheme-dark')).toBe(false)
+  })
+
+  it('resolves stored light scheme even when system prefers dark', () => {
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+    )
+    localStorage.setItem('active_userid', USER_ID)
+    setColorSchemePreference(USER_ID, 'light')
+
+    expect(resolveColorScheme()).toBe('light')
+    applyAppearanceToDocument('material', resolveColorScheme())
+    expect(document.documentElement.classList.contains('scheme-light')).toBe(true)
+  })
+
+  it('auto theme picks material on Android user agent', () => {
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      userAgent: 'Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36'
+    })
+    expect(resolveAppTheme()).toBe('material')
+  })
+})
@@ -31,6 +31,18 @@ export function resolveAppTheme(): AppTheme {
  return 'ocean'
 }

+function updateThemeColorMeta(root: HTMLElement): void {
+  const color = getComputedStyle(root).getPropertyValue('--app-theme-color').trim()
+  if (!color) return
+  let meta = document.querySelector('meta[name="theme-color"]')
+  if (!meta) {
+    meta = document.createElement('meta')
+    meta.setAttribute('name', 'theme-color')
+    document.head.appendChild(meta)
+  }
+  meta.setAttribute('content', color)
+}
+
 export function applyAppearanceToDocument(
  theme: AppTheme = resolveAppTheme(),
  scheme: ResolvedColorScheme = resolveColorScheme()
@@ -39,6 +51,7 @@ export function applyAppearanceToDocument(
  root.classList.remove(...THEME_CLASSES, ...SCHEME_CLASSES)
  root.classList.add(`theme-${theme}`, `scheme-${scheme}`)
  root.style.colorScheme = scheme
+  updateThemeColorMeta(root)
 }

 export function subscribeToSystemColorScheme(onChange: () => void): () => void {
@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  fetchAppearancePrefs,
+  saveAppearancePrefsToServer,
+  syncAppearancePrefs
+} from './appearancePrefs.js'
+import { setThemePreference } from './userPreferences.js'
+
+const USER_ID = 'appearance-sync-user'
+
+vi.mock('./api.js', () => ({
+  apiJson: vi.fn()
+}))
+
+import { apiJson } from './api.js'
+
+const mockedApiJson = vi.mocked(apiJson)
+
+describe('appearancePrefs', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.clearAllMocks()
+  })
+
+  it('fetchAppearancePrefs returns defaults when not authenticated', async () => {
+    await expect(fetchAppearancePrefs()).resolves.toEqual({
+      theme: 'auto',
+      colorScheme: 'auto',
+      persisted: false
+    })
+    expect(mockedApiJson).not.toHaveBeenCalled()
+  })
+
+  it('syncAppearancePrefs applies server prefs after cache wipe', async () => {
+    localStorage.setItem('active_userid', USER_ID)
+    mockedApiJson.mockResolvedValueOnce({
+      theme: 'ocean',
+      colorScheme: 'dark',
+      persisted: true
+    })
+
+    const changed = vi.fn()
+    window.addEventListener('appearance-changed', changed)
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('ocean')
+    expect(localStorage.getItem(`user_pref_color_scheme_${USER_ID}`)).toBe('dark')
+    expect(changed).toHaveBeenCalledTimes(1)
+  })
+
+  it('syncAppearancePrefs uploads local prefs when server has none', async () => {
+    localStorage.setItem('active_userid', USER_ID)
+    setThemePreference(USER_ID, 'material')
+    mockedApiJson
+      .mockResolvedValueOnce({ theme: 'auto', colorScheme: 'auto', persisted: false })
+      .mockResolvedValueOnce({ theme: 'material', colorScheme: 'auto', persisted: true })
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(mockedApiJson).toHaveBeenCalledTimes(2)
+    expect(mockedApiJson).toHaveBeenLastCalledWith('/api/auth/appearance-prefs', {
+      method: 'PUT',
+      body: JSON.stringify({ theme: 'material', colorScheme: 'auto' })
+    })
+  })
+
+  it('saveAppearancePrefsToServer skips when not authenticated', async () => {
+    await saveAppearancePrefsToServer('ocean', 'light')
+    expect(mockedApiJson).not.toHaveBeenCalled()
+  })
+
+  it('syncAppearancePrefs skips server sync when userId does not match active session', async () => {
+    localStorage.setItem('active_userid', 'session-user')
+    setThemePreference('other-user', 'ocean')
+    mockedApiJson.mockResolvedValue({
+      theme: 'material',
+      colorScheme: 'dark',
+      persisted: true
+    })
+
+    await syncAppearancePrefs('other-user')
+
+    expect(mockedApiJson).not.toHaveBeenCalled()
+    expect(localStorage.getItem('user_pref_theme_other-user')).toBe('ocean')
+  })
+
+  it('syncAppearancePrefs skips server sync when active session is missing', async () => {
+    setThemePreference(USER_ID, 'ocean')
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(mockedApiJson).not.toHaveBeenCalled()
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('ocean')
+  })
+})
@@ -0,0 +1,76 @@
+import { apiJson } from './api.js'
+import { notifyAppearanceChanged } from './appearance.js'
+import {
+  getActiveUserId,
+  getColorSchemePreference,
+  getThemePreference,
+  setColorSchemePreference,
+  setThemePreference
+} from './userPreferences.js'
+
+const API_BASE = '/api/auth/appearance-prefs'
+
+export interface AppearancePrefs {
+  theme: string
+  colorScheme: string
+  persisted: boolean
+}
+
+function hasLocalAppearancePrefs(userId: string): boolean {
+  return (
+    localStorage.getItem(`user_pref_theme_${userId}`) != null ||
+    localStorage.getItem(`user_pref_color_scheme_${userId}`) != null
+  )
+}
+
+function resolveSyncedUserId(userId?: string | null): string | null {
+  const id = userId?.trim() || getActiveUserId()?.trim() || null
+  if (!id) return null
+
+  const activeId = getActiveUserId()?.trim() || null
+  if (!activeId || activeId !== id) return null
+
+  return id
+}
+
+export async function fetchAppearancePrefs(userId?: string | null): Promise<AppearancePrefs> {
+  if (!resolveSyncedUserId(userId)) {
+    return { theme: 'auto', colorScheme: 'auto', persisted: false }
+  }
+
+  return apiJson<AppearancePrefs>(API_BASE)
+}
+
+export async function saveAppearancePrefsToServer(
+  theme: string,
+  colorScheme: string,
+  userId?: string | null
+): Promise<void> {
+  if (!resolveSyncedUserId(userId)) return
+
+  await apiJson<AppearancePrefs>(API_BASE, {
+    method: 'PUT',
+    body: JSON.stringify({ theme, colorScheme })
+  })
+}
+
+/** Merge server-stored appearance with local cache (server wins after cache wipe). */
+export async function syncAppearancePrefs(userId?: string | null): Promise<void> {
+  const id = resolveSyncedUserId(userId)
+  if (!id) return
+
+  try {
+    const server = await fetchAppearancePrefs(id)
+
+    if (server.persisted) {
+      setThemePreference(id, server.theme)
+      setColorSchemePreference(id, server.colorScheme)
+    } else if (hasLocalAppearancePrefs(id)) {
+      await saveAppearancePrefsToServer(getThemePreference(id), getColorSchemePreference(id), id)
+    }
+  } catch (err) {
+    console.warn('Failed to sync appearance preferences:', err)
+  }
+
+  notifyAppearanceChanged()
+}
@@ -88,6 +88,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
    'Latitude', 'Longitude', 'Remarks',
    'Freshwater Morning (L)', 'Freshwater Refilled (L)', 'Freshwater Evening (L)', 'Freshwater Consumption (L)',
    'Fuel Morning (L)', 'Fuel Refilled (L)', 'Fuel Evening (L)', 'Fuel Consumption (L)',
+    'Greywater Level (L)',
    'Yacht Name', 'Home Port', 'Owner', 'Charter Company', 'Registration', 'Callsign', 'ATIS', 'MMSI'
  ];

@@ -123,6 +124,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
    const fuelR = entry.fuel?.refilled ?? '';
    const fuelE = entry.fuel?.evening ?? '';
    const fuelCons = entry.fuel?.consumption ?? '';
+    const greywaterLevel = entry.greywater?.level ?? '';

    const eventsList = entry.events || [];
    if (eventsList.length === 0) {
@@ -137,6 +139,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
        '', '', '',
        fwM, fwR, fwE, fwCons,
        fuelM, fuelR, fuelE, fuelCons,
+        greywaterLevel,
        yachtName, homePort, owner, charter, registration, callsign, atis, mmsi
      ].map(escapeCsvValue));
    } else {
@@ -153,6 +156,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
          ev.gpsLat || '', ev.gpsLng || '', ev.remarks || '',
          fwM, fwR, fwE, fwCons,
          fuelM, fuelR, fuelE, fuelCons,
+          greywaterLevel,
          yachtName, homePort, owner, charter, registration, callsign, atis, mmsi
        ].map(escapeCsvValue));
      }
@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  clearDemoLogbookRefs,
+  getDemoFirstEntryStorageKey,
+  getDemoLogbookStorageKey
+} from './demoLogbook.js'
+
+describe('clearDemoLogbookRefs', () => {
+  const userId = 'user-1'
+
+  beforeEach(() => {
+    localStorage.clear()
+    localStorage.setItem('active_userid', userId)
+  })
+
+  it('removes demo logbook and first-entry keys for the user', () => {
+    const logbookId = 'lb-demo'
+    localStorage.setItem(getDemoLogbookStorageKey(userId), logbookId)
+    localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
+
+    clearDemoLogbookRefs(userId, logbookId)
+
+    expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBeNull()
+    expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBeNull()
+  })
+
+  it('does not clear refs when logbookId does not match stored demo id', () => {
+    localStorage.setItem(getDemoLogbookStorageKey(userId), 'other-logbook')
+    localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
+
+    clearDemoLogbookRefs(userId, 'deleted-logbook')
+
+    expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBe('other-logbook')
+    expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBe('entry-1')
+  })
+})
@@ -108,6 +108,7 @@ export async function seedDemoLogbookIfNeeded(): Promise<DemoSeedResult | null>
      const title = i18n.t('demo.logbook_title')
      return { logbookId: existingId, title, firstEntryId }
    }
+    clearDemoLogbookRefs(userId, existingId)
  }

  if (!shouldSeed) return null
@@ -152,3 +153,66 @@ export function getStoredDemoFirstEntryId(): string | null {
  if (!userId) return null
  return localStorage.getItem(getDemoFirstEntryStorageKey(userId))
 }
+
+/** Remove persisted demo logbook pointers when the logbook no longer exists. */
+export function clearDemoLogbookRefs(userId: string, logbookId?: string): void {
+  const storedId = localStorage.getItem(getDemoLogbookStorageKey(userId))
+  if (logbookId && storedId && storedId !== logbookId) return
+  localStorage.removeItem(getDemoLogbookStorageKey(userId))
+  localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
+}
+
+export async function entryExistsInLogbook(logbookId: string, entryId: string): Promise<boolean> {
+  const entry = await db.entries.get(entryId)
+  return entry?.logbookId === logbookId
+}
+
+export interface TourLogbookContext {
+  logbookId: string
+  title: string
+  firstEntryId: string | null
+}
+
+/** Pick a logbook + first entry for the onboarding tour (handles deleted demo data). */
+export async function resolveTourLogbookContext(
+  preferLogbookId?: string | null
+): Promise<TourLogbookContext | null> {
+  const userId = localStorage.getItem('active_userid')
+  if (!userId || !getActiveMasterKey()) return null
+
+  const demoId = localStorage.getItem(getDemoLogbookStorageKey(userId))
+  if (demoId && !(await db.logbooks.get(demoId))) {
+    clearDemoLogbookRefs(userId, demoId)
+  }
+
+  const { fetchLogbooks } = await import('./logbook.js')
+  const books = await fetchLogbooks()
+  if (books.length === 0) return null
+
+  const activeId = localStorage.getItem('active_logbook_id')
+  const pick =
+    (preferLogbookId ? books.find((b) => b.id === preferLogbookId) : undefined) ??
+    (activeId ? books.find((b) => b.id === activeId) : undefined) ??
+    (demoId ? books.find((b) => b.id === demoId) : undefined) ??
+    books[0]
+
+  const firstEntryId = await resolveTourFirstEntryId(pick.id, userId)
+  return { logbookId: pick.id, title: pick.title, firstEntryId }
+}
+
+async function resolveTourFirstEntryId(logbookId: string, userId: string): Promise<string | null> {
+  const stored = localStorage.getItem(getDemoFirstEntryStorageKey(userId))
+  if (stored && (await entryExistsInLogbook(logbookId, stored))) {
+    return stored
+  }
+
+  if (stored) {
+    localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
+  }
+
+  const localEntries = await db.entries.where({ logbookId }).toArray()
+  if (localEntries.length === 0) return null
+
+  localEntries.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+  return localEntries[0]?.payloadId ?? null
+}
@@ -26,6 +26,7 @@ export interface DemoDaySpec {
  filename: string
  freshwater: { morning: number; refilled: number; evening: number; consumption: number }
  fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  greywaterLevel?: number
  motorHours?: number
  events: Array<Record<string, string>>
 }
@@ -69,6 +70,7 @@ export function buildDemoDays(): DemoDaySpec[] {
      filename: 'kiel-laboe.gpx',
      freshwater: { morning: 120, refilled: 0, evening: 105, consumption: 15 },
      fuel: { morning: 85, refilled: 0, evening: 78, consumption: 7 },
+      greywaterLevel: 25,
      events: [
        {
          time: '10:15',
@@ -101,6 +103,7 @@ export function buildDemoDays(): DemoDaySpec[] {
      filename: 'laboe-damp.gpx',
      freshwater: { morning: 105, refilled: 25, evening: 110, consumption: 20 },
      fuel: { morning: 78, refilled: 0, evening: 70, consumption: 8 },
+      greywaterLevel: 38,
      motorHours: 1.5,
      events: [
        {
@@ -134,6 +137,7 @@ export function buildDemoDays(): DemoDaySpec[] {
      filename: 'damp-schleimuende.gpx',
      freshwater: { morning: 110, refilled: 0, evening: 95, consumption: 15 },
      fuel: { morning: 70, refilled: 15, evening: 80, consumption: 5 },
+      greywaterLevel: 52,
      events: [
        {
          time: '08:30',
@@ -176,7 +180,10 @@ export function buildDemoYachtData(): Record<string, unknown> {
    atis: '',
    mmsi: '',
    sails: isDe ? ['Großsegel', 'Genua', 'Spinnaker'] : ['Mainsail', 'Genoa', 'Spinnaker'],
-    photo: null
+    photo: null,
+    freshwaterCapacityL: 200,
+    fuelCapacityL: 100,
+    greywaterCapacityL: 80
  }
 }

@@ -244,6 +251,10 @@ export function buildPublicDemoFixture(): PublicDemoFixture {
      events: day.events
    }

+    if (day.greywaterLevel != null && day.greywaterLevel > 0) {
+      entryPayload.greywater = { level: day.greywaterLevel }
+    }
+
    if (stats) {
      entryPayload.trackDistanceNm = stats.distanceNm
      entryPayload.trackSpeedMaxKn = stats.speedMaxKn
@@ -303,6 +314,10 @@ export function buildDemoEntryPayloads(): Array<{
      events: day.events
    }

+    if (day.greywaterLevel != null && day.greywaterLevel > 0) {
+      entryPayload.greywater = { level: day.greywaterLevel }
+    }
+
    if (stats) {
      entryPayload.trackDistanceNm = stats.distanceNm
      entryPayload.trackSpeedMaxKn = stats.speedMaxKn
@@ -4,6 +4,7 @@ import { encryptJson, decryptJson, encryptBuffer, decryptBuffer } from './crypto
 import { getLogbookKey, saveLogbookKey, generateLogbookKey } from './logbookKeys.js'
 import { PlausibleEvents, trackPlausibleEvent } from './analytics.js'
 import { apiFetch } from './api.js'
+import { clearDemoLogbookRefs, getDemoLogbookStorageKey } from './demoLogbook.js'

 const API_BASE = '/api/logbooks'

@@ -320,6 +321,9 @@ export async function deleteLogbook(id: string): Promise<void> {

  // Perform local cascading cleanup
  await deleteLocalLogbookCache(id)
+  if (userId && id === localStorage.getItem(getDemoLogbookStorageKey(userId))) {
+    clearDemoLogbookRefs(userId, id)
+  }
  trackPlausibleEvent(PlausibleEvents.LOGBOOK_DELETED)
 }

@@ -197,13 +197,15 @@ export async function generateLogbookPagePdf(logbookId: string, entryId: string,
  doc.text('VERBRAUCHSWERTE / CONSUMPTON STATS', 10, footerY + 3);

  let fwY = footerY + 5;
-  doc.rect(10, fwY, 110, rowHeight * 3, 'S');
+  const tankRows = 4;
+  doc.rect(10, fwY, 110, rowHeight * tankRows, 'S');
  doc.line(10, fwY + rowHeight, 120, fwY + rowHeight);
  doc.line(10, fwY + rowHeight * 2, 120, fwY + rowHeight * 2);
-  doc.line(40, fwY, 40, fwY + rowHeight * 3);
-  doc.line(60, fwY, 60, fwY + rowHeight * 3);
-  doc.line(80, fwY, 80, fwY + rowHeight * 3);
-  doc.line(100, fwY, 100, fwY + rowHeight * 3);
+  doc.line(10, fwY + rowHeight * 3, 120, fwY + rowHeight * 3);
+  doc.line(40, fwY, 40, fwY + rowHeight * tankRows);
+  doc.line(60, fwY, 60, fwY + rowHeight * tankRows);
+  doc.line(80, fwY, 80, fwY + rowHeight * tankRows);
+  doc.line(100, fwY, 100, fwY + rowHeight * tankRows);

  doc.setFont('Helvetica', 'bold');
  doc.setFontSize(7.5);
@@ -226,6 +228,12 @@ export async function generateLogbookPagePdf(logbookId: string, entryId: string,
  doc.text(String(entry.fuel?.evening ?? '0'), 81, fwY + rowHeight * 2 + 4.2);
  doc.text(String(entry.fuel?.consumption ?? '0'), 101, fwY + rowHeight * 2 + 4.2);

+  doc.text('Grauwasser', 11, fwY + rowHeight * 3 + 4.2);
+  doc.text('—', 41, fwY + rowHeight * 3 + 4.2);
+  doc.text('—', 61, fwY + rowHeight * 3 + 4.2);
+  doc.text(String(entry.greywater?.level ?? '0'), 81, fwY + rowHeight * 3 + 4.2);
+  doc.text('—', 101, fwY + rowHeight * 3 + 4.2);
+
  // Signatures Box
  let sigX = 130;
  let sigY = footerY + 5;
@@ -43,6 +43,18 @@ async function fetchVapidPublicKey(): Promise<string | null> {
  }
 }

+/** True when crew-change push is enabled and notification permission is granted. */
+export async function isCollaboratorPushActive(): Promise<boolean> {
+  if (!isPushSupported()) return false
+  if (getNotificationPermission() !== 'granted') return false
+  try {
+    const prefs = await fetchPushPrefs()
+    return prefs.collaboratorChangesEnabled
+  } catch {
+    return false
+  }
+}
+
 export async function fetchPushPrefs(): Promise<{ collaboratorChangesEnabled: boolean }> {
  if (!localStorage.getItem('active_userid')) {
    return { collaboratorChangesEnabled: false }
@@ -0,0 +1,112 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  forcePwaRecovery,
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  reconcileServiceWorkerOnStartup,
+  reconcileVersionOnStartup
+} from './pwaStartup.js'
+
+const STALE_RECOVERY_COUNT_KEY = 'pwa_stale_recovery_count'
+const STALE_RECOVERY_LAST_KEY = 'pwa_stale_recovery_last_ts'
+
+describe('pwaStartup reload guards', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
+  it('blocks repeated reload attempts within the debounce window', () => {
+    expect(recentlyAttemptedReload(10_000)).toBe(false)
+    markReloadAttempt(10_000)
+    expect(recentlyAttemptedReload(12_000)).toBe(true)
+    expect(recentlyAttemptedReload(15_000)).toBe(false)
+  })
+})
+
+describe('forcePwaRecovery stale counter reset', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.unstubAllEnvs()
+    vi.restoreAllMocks()
+  })
+
+  it('clears stale recovery counter before hard recovery reload', async () => {
+    vi.stubEnv('DEV', false)
+    sessionStorage.setItem(STALE_RECOVERY_COUNT_KEY, '2')
+    sessionStorage.setItem(STALE_RECOVERY_LAST_KEY, String(Date.now()))
+
+    const reload = vi.fn()
+    vi.stubGlobal('location', { reload })
+    vi.stubGlobal('caches', {
+      keys: vi.fn().mockResolvedValue([]),
+      delete: vi.fn()
+    })
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: {
+        getRegistrations: vi.fn().mockResolvedValue([])
+      }
+    })
+
+    await forcePwaRecovery()
+
+    expect(sessionStorage.getItem(STALE_RECOVERY_COUNT_KEY)).toBeNull()
+    expect(sessionStorage.getItem(STALE_RECOVERY_LAST_KEY)).toBeNull()
+    expect(reload).toHaveBeenCalledOnce()
+  })
+})
+
+describe('reconcileServiceWorkerOnStartup', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.unstubAllEnvs()
+  })
+
+  it('returns false in dev mode', async () => {
+    vi.stubEnv('DEV', true)
+    await expect(reconcileServiceWorkerOnStartup()).resolves.toBe(false)
+  })
+
+  it('returns false when no waiting worker exists', async () => {
+    vi.stubEnv('DEV', false)
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: {
+        controller: {},
+        getRegistration: vi.fn().mockResolvedValue({
+          waiting: null,
+          installing: null,
+          update: vi.fn().mockResolvedValue(undefined),
+          addEventListener: vi.fn()
+        }),
+        addEventListener: vi.fn()
+      }
+    })
+
+    await expect(reconcileServiceWorkerOnStartup()).resolves.toBe(false)
+  })
+})
+
+describe('reconcileVersionOnStartup', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.unstubAllEnvs()
+    vi.restoreAllMocks()
+  })
+
+  it('returns noop in dev mode', async () => {
+    vi.stubEnv('DEV', true)
+    await expect(reconcileVersionOnStartup()).resolves.toBe('noop')
+  })
+
+  it('returns noop when deployed version matches bundled version', async () => {
+    vi.stubEnv('DEV', false)
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ version: '0.1.0.57' })
+    }))
+    vi.stubGlobal('__APP_VERSION__', '0.1.0.57')
+
+    await expect(reconcileVersionOnStartup()).resolves.toBe('noop')
+  })
+})
@@ -0,0 +1,281 @@
+import { isNewerAppVersion, fetchDeployedVersion, getAppVersion } from './pwaVersion.js'
+
+const RELOAD_ATTEMPT_KEY = 'pwa_reload_attempt_ts'
+const COLD_START_UPDATE_KEY = 'pwa_coldstart_update_ts'
+const HARD_RECOVERY_KEY = 'pwa_hard_recovery_ts'
+const STALE_RECOVERY_COUNT_KEY = 'pwa_stale_recovery_count'
+const STALE_RECOVERY_LAST_KEY = 'pwa_stale_recovery_last_ts'
+const STALE_RECOVERY_WINDOW_MS = 60_000
+const RELOAD_DEBOUNCE_MS = 4_000
+const COLD_START_UPDATE_DEBOUNCE_MS = 15_000
+const HARD_RECOVERY_DEBOUNCE_MS = 30_000
+
+export function recentlyAttemptedReload(now = Date.now()): boolean {
+  const last = Number(sessionStorage.getItem(RELOAD_ATTEMPT_KEY) || '0')
+  return now - last < RELOAD_DEBOUNCE_MS
+}
+
+export function markReloadAttempt(now = Date.now()): void {
+  sessionStorage.setItem(RELOAD_ATTEMPT_KEY, String(now))
+}
+
+function recentlyAttemptedColdStartUpdate(now = Date.now()): boolean {
+  const last = Number(sessionStorage.getItem(COLD_START_UPDATE_KEY) || '0')
+  return now - last < COLD_START_UPDATE_DEBOUNCE_MS
+}
+
+function markColdStartUpdateAttempt(now = Date.now()): void {
+  sessionStorage.setItem(COLD_START_UPDATE_KEY, String(now))
+}
+
+function recentlyAttemptedHardRecovery(now = Date.now()): boolean {
+  const last = Number(sessionStorage.getItem(HARD_RECOVERY_KEY) || '0')
+  return now - last < HARD_RECOVERY_DEBOUNCE_MS
+}
+
+function markHardRecoveryAttempt(now = Date.now()): void {
+  sessionStorage.setItem(HARD_RECOVERY_KEY, String(now))
+}
+
+function resetStaleRecoveryCount(): void {
+  sessionStorage.removeItem(STALE_RECOVERY_COUNT_KEY)
+  sessionStorage.removeItem(STALE_RECOVERY_LAST_KEY)
+}
+
+function incrementStaleRecoveryCount(now = Date.now()): number {
+  const last = Number(sessionStorage.getItem(STALE_RECOVERY_LAST_KEY) || '0')
+  let current = Number(sessionStorage.getItem(STALE_RECOVERY_COUNT_KEY) || '0')
+
+  if (now - last > STALE_RECOVERY_WINDOW_MS) {
+    current = 0
+  }
+
+  const next = current + 1
+  sessionStorage.setItem(STALE_RECOVERY_COUNT_KEY, String(next))
+  sessionStorage.setItem(STALE_RECOVERY_LAST_KEY, String(now))
+  return next
+}
+
+function isStaleModuleLoadError(error: unknown): boolean {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === 'string'
+        ? error
+        : ''
+
+  return (
+    message.includes('Failed to fetch dynamically imported module') ||
+    message.includes('Importing a module script failed') ||
+    message.includes('error loading dynamically imported module') ||
+    message.includes('Loading chunk') ||
+    message.includes('ChunkLoadError') ||
+    message.includes('Unable to preload CSS')
+  )
+}
+
+export async function clearPwaCachesAndWorkers(): Promise<void> {
+  if ('serviceWorker' in navigator) {
+    const registrations = await navigator.serviceWorker.getRegistrations()
+    await Promise.all(registrations.map((registration) => registration.unregister()))
+  }
+
+  if ('caches' in window) {
+    const keys = await caches.keys()
+    await Promise.all(keys.map((key) => caches.delete(key)))
+  }
+}
+
+/**
+ * Last-resort recovery when soft reloads cannot escape a stale precache.
+ * Equivalent to manually clearing site data / reinstalling the PWA.
+ */
+export async function forcePwaRecovery(): Promise<void> {
+  if (recentlyAttemptedHardRecovery()) return
+
+  markHardRecoveryAttempt()
+  markReloadAttempt()
+  resetStaleRecoveryCount()
+  await clearPwaCachesAndWorkers()
+  window.location.reload()
+}
+
+async function waitForWaitingWorker(
+  registration: ServiceWorkerRegistration,
+  timeoutMs: number
+): Promise<ServiceWorker | null> {
+  if (registration.waiting) {
+    return registration.waiting
+  }
+
+  return new Promise((resolve) => {
+    const timeoutId = window.setTimeout(() => resolve(null), timeoutMs)
+
+    const inspectWorker = (worker: ServiceWorker | null) => {
+      if (!worker) return
+
+      if (worker.state === 'installed' && navigator.serviceWorker.controller) {
+        window.clearTimeout(timeoutId)
+        resolve(worker)
+        return
+      }
+
+      worker.addEventListener(
+        'statechange',
+        () => {
+          if (worker.state === 'installed' && navigator.serviceWorker.controller) {
+            window.clearTimeout(timeoutId)
+            resolve(worker)
+          }
+        },
+        { once: true }
+      )
+    }
+
+    inspectWorker(registration.installing)
+
+    registration.addEventListener(
+      'updatefound',
+      () => {
+        inspectWorker(registration.installing)
+      },
+      { once: true }
+    )
+  })
+}
+
+export async function triggerServiceWorkerUpdate(timeoutMs = 5_000): Promise<boolean> {
+  if (import.meta.env.DEV || !('serviceWorker' in navigator)) {
+    return false
+  }
+
+  const registration = await navigator.serviceWorker.getRegistration()
+  if (!registration) return false
+
+  try {
+    await registration.update()
+  } catch {
+    return false
+  }
+
+  const waiting = await waitForWaitingWorker(registration, timeoutMs)
+  return waiting !== null
+}
+
+async function activateWaitingWorker(waiting: ServiceWorker): Promise<boolean> {
+  waiting.postMessage({ type: 'SKIP_WAITING' })
+
+  await new Promise<void>((resolve) => {
+    const timeoutId = window.setTimeout(resolve, 4_000)
+    navigator.serviceWorker.addEventListener(
+      'controllerchange',
+      () => {
+        window.clearTimeout(timeoutId)
+        resolve()
+      },
+      { once: true }
+    )
+  })
+
+  return true
+}
+
+/**
+ * After missed deploys, a waiting SW may exist while the page still runs an old bundle.
+ * Apply the waiting worker once on cold start (one controlled reload) instead of hanging.
+ */
+export async function reconcileServiceWorkerOnStartup(): Promise<boolean> {
+  if (import.meta.env.DEV || !('serviceWorker' in navigator)) {
+    return false
+  }
+
+  if (recentlyAttemptedColdStartUpdate()) {
+    return false
+  }
+
+  const registration = await navigator.serviceWorker.getRegistration()
+  let waiting = registration?.waiting ?? null
+
+  if (!waiting && registration) {
+    await registration.update().catch(() => {})
+    waiting = await waitForWaitingWorker(registration, 4_000)
+  }
+
+  if (!waiting || !navigator.serviceWorker.controller) {
+    return false
+  }
+
+  markColdStartUpdateAttempt()
+  return activateWaitingWorker(waiting)
+}
+
+/**
+ * Compare deployed version.json with the bundled app version.
+ * When the server is ahead, try a soft SW takeover before hard recovery.
+ */
+export async function reconcileVersionOnStartup(): Promise<'reload' | 'recovered' | 'noop'> {
+  if (import.meta.env.DEV || !navigator.onLine) {
+    return 'noop'
+  }
+
+  const deployedVersion = await fetchDeployedVersion()
+  if (!deployedVersion || !isNewerAppVersion(deployedVersion, getAppVersion())) {
+    return 'noop'
+  }
+
+  const reconciled = await reconcileServiceWorkerOnStartup()
+  if (reconciled) {
+    return 'reload'
+  }
+
+  const updated = await triggerServiceWorkerUpdate()
+  if (updated) {
+    const registration = await navigator.serviceWorker.getRegistration()
+    const waiting = registration?.waiting
+    if (waiting) {
+      markColdStartUpdateAttempt()
+      await activateWaitingWorker(waiting)
+      return 'reload'
+    }
+  }
+
+  if (!recentlyAttemptedHardRecovery()) {
+    await forcePwaRecovery()
+    return 'recovered'
+  }
+
+  return 'noop'
+}
+
+export function installStaleAssetRecovery(): void {
+  if (import.meta.env.DEV) return
+
+  const recoverFromStaleAssets = () => {
+    if (recentlyAttemptedReload()) return
+
+    const attempts = incrementStaleRecoveryCount()
+    markReloadAttempt()
+
+    if (attempts >= 2) {
+      void forcePwaRecovery()
+      return
+    }
+
+    window.location.reload()
+  }
+
+  window.addEventListener('unhandledrejection', (event) => {
+    if (!isStaleModuleLoadError(event.reason)) return
+    event.preventDefault()
+    recoverFromStaleAssets()
+  })
+
+  window.addEventListener(
+    'error',
+    (event) => {
+      if (!isStaleModuleLoadError(event.message)) return
+      recoverFromStaleAssets()
+    },
+    true
+  )
+}
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import {
+  compareAppVersions,
+  isNewerAppVersion,
+  parseAppVersion
+} from './pwaVersion.js'
+
+describe('pwaVersion', () => {
+  it('parses semantic build versions', () => {
+    expect(parseAppVersion('v0.1.0.57')).toEqual([0, 1, 0, 57])
+  })
+
+  it('compares build numbers numerically', () => {
+    expect(compareAppVersions('0.1.0.65', '0.1.0.57')).toBeGreaterThan(0)
+    expect(compareAppVersions('0.1.0.57', '0.1.0.65')).toBeLessThan(0)
+    expect(compareAppVersions('0.1.0.57', '0.1.0.57')).toBe(0)
+  })
+
+  it('detects newer deployed versions', () => {
+    expect(isNewerAppVersion('0.1.0.66', '0.1.0.57')).toBe(true)
+    expect(isNewerAppVersion('0.1.0.57', '0.1.0.57')).toBe(false)
+  })
+})
@@ -0,0 +1,59 @@
+const APP_VERSION =
+  typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0.0-dev'
+
+export function getAppVersion(): string {
+  return APP_VERSION
+}
+
+export function parseAppVersion(version: string): number[] {
+  return version
+    .replace(/^v/i, '')
+    .split('.')
+    .map((part) => Number.parseInt(part, 10) || 0)
+}
+
+/** Positive when `a` is newer than `b`. */
+export function compareAppVersions(a: string, b: string): number {
+  const partsA = parseAppVersion(a)
+  const partsB = parseAppVersion(b)
+  const length = Math.max(partsA.length, partsB.length)
+
+  for (let index = 0; index < length; index += 1) {
+    const diff = (partsA[index] ?? 0) - (partsB[index] ?? 0)
+    if (diff !== 0) return diff
+  }
+
+  return 0
+}
+
+export function isNewerAppVersion(serverVersion: string, clientVersion: string): boolean {
+  return compareAppVersions(serverVersion, clientVersion) > 0
+}
+
+export async function fetchDeployedVersion(timeoutMs = 4_000): Promise<string | null> {
+  if (!navigator.onLine) return null
+
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), timeoutMs)
+
+  try {
+    const response = await fetch(`/version.json?_=${Date.now()}`, {
+      cache: 'no-store',
+      signal: controller.signal
+    })
+    if (!response.ok) return null
+
+    const payload = (await response.json()) as { version?: unknown }
+    return typeof payload.version === 'string' ? payload.version.trim() : null
+  } catch {
+    return null
+  } finally {
+    window.clearTimeout(timeoutId)
+  }
+}
+
+export async function isDeployedVersionNewer(): Promise<boolean> {
+  const deployedVersion = await fetchDeployedVersion()
+  if (!deployedVersion) return false
+  return isNewerAppVersion(deployedVersion, getAppVersion())
+}
@@ -6,6 +6,7 @@ import { getLogbookAccess } from './logbookAccess.js'
 const API_BASE = '/api/sync'
 const syncingLogbooks = new Set<string>()
 const pendingResync = new Set<string>()
+let syncAllInFlight = 0

 let isSyncing = false
 const listeners = new Set<(syncing: boolean) => void>()
@@ -18,7 +19,8 @@ export function subscribeToSyncState(listener: (syncing: boolean) => void) {
  }
 }

-function setSyncing(syncing: boolean) {
+function recomputeSyncingState() {
+  const syncing = syncingLogbooks.size > 0 || syncAllInFlight > 0
  if (isSyncing !== syncing) {
    isSyncing = syncing
    listeners.forEach((l) => l(isSyncing))
@@ -205,6 +207,54 @@ async function flushPushQueue(logbookId: string): Promise<boolean> {
  return ok
 }

+type PulledServerPayload = {
+  yacht?: { updatedAt: string } | null
+  deviation?: { updatedAt: string } | null
+  crews?: Array<{ payloadId: string; updatedAt: string }>
+  entries?: Array<{ payloadId: string; updatedAt: string }>
+  photos?: Array<{ payloadId: string; updatedAt: string }>
+  gpsTracks?: Array<{ entryId: string; updatedAt: string }>
+}
+
+/** Drop queue rows already reflected on the server (e.g. after direct API save). */
+async function pruneAcknowledgedQueueItems(
+  logbookId: string,
+  server: PulledServerPayload
+): Promise<void> {
+  const pending = await db.syncQueue.where({ logbookId }).toArray()
+  if (pending.length === 0) return
+
+  const serverTimes = new Map<string, string>()
+  if (server.yacht) serverTimes.set('yacht:' + logbookId, server.yacht.updatedAt)
+  if (server.deviation) serverTimes.set('deviation:' + logbookId, server.deviation.updatedAt)
+  for (const c of server.crews ?? []) serverTimes.set('crew:' + c.payloadId, c.updatedAt)
+  for (const e of server.entries ?? []) serverTimes.set('entry:' + e.payloadId, e.updatedAt)
+  for (const p of server.photos ?? []) serverTimes.set('photo:' + p.payloadId, p.updatedAt)
+  for (const gt of server.gpsTracks ?? []) serverTimes.set('gpsTrack:' + gt.entryId, gt.updatedAt)
+
+  const localLogbook = await db.logbooks.get(logbookId)
+  const staleIds: number[] = []
+
+  for (const item of pending) {
+    if (item.type === 'logbook') {
+      if (localLogbook?.isSynced === 1) {
+        if (item.id !== undefined) staleIds.push(item.id)
+      }
+      continue
+    }
+
+    const key = item.type === 'yacht' ? 'yacht:' + logbookId : `${item.type}:${item.payloadId}`
+    const serverUpdatedAt = serverTimes.get(key)
+    if (serverUpdatedAt && !isNewer(item.updatedAt, serverUpdatedAt)) {
+      if (item.id !== undefined) staleIds.push(item.id)
+    }
+  }
+
+  if (staleIds.length > 0) {
+    await db.syncQueue.bulkDelete(staleIds)
+  }
+}
+
 // Pull updates from the server and apply last-write-wins
 async function pullChanges(logbookId: string): Promise<boolean> {
  if (!localStorage.getItem('active_userid')) return false
@@ -220,6 +270,7 @@ async function pullChanges(logbookId: string): Promise<boolean> {
    }

    const { yacht, deviation, crews, entries, photos, gpsTracks } = await response.json()
+    const serverSnapshot: PulledServerPayload = { yacht, deviation, crews, entries, photos, gpsTracks }

    // 1. Sync Yacht Payload
    if (yacht) {
@@ -380,6 +431,7 @@ async function pullChanges(logbookId: string): Promise<boolean> {
      }
    }

+    await pruneAcknowledgedQueueItems(logbookId, serverSnapshot)
    return true
  } catch (error) {
    console.error('Error during sync pull:', error)
@@ -400,7 +452,7 @@ export async function syncLogbook(logbookId: string): Promise<boolean> {
  }

  syncingLogbooks.add(logbookId)
-  setSyncing(true)
+  recomputeSyncingState()

  try {
    const pushed = await flushPushQueue(logbookId)
@@ -410,7 +462,7 @@ export async function syncLogbook(logbookId: string): Promise<boolean> {
    return pushed && pulled && pushedAfterPull
  } finally {
    syncingLogbooks.delete(logbookId)
-    setSyncing(syncingLogbooks.size > 0)
+    recomputeSyncingState()
  }
 }

@@ -421,8 +473,9 @@ export async function syncAllLogbooks(): Promise<void> {
  const masterKey = getActiveMasterKey()
  if (!masterKey) return

+  syncAllInFlight++
+  recomputeSyncingState()
  try {
-    setSyncing(true)
    // 1. Fetch latest logbook lists first (synchronizes db.logbooks index)
    const logbooks = await db.logbooks.toArray()

@@ -446,7 +499,8 @@ export async function syncAllLogbooks(): Promise<void> {
  } catch (error) {
    console.error('Error synchronizing all logbooks:', error)
  } finally {
-    setSyncing(syncingLogbooks.size > 0)
+    syncAllInFlight = Math.max(0, syncAllInFlight - 1)
+    recomputeSyncingState()
  }
 }

@@ -1,10 +1,23 @@
 /// <reference lib="webworker" />
+import { clientsClaim } from 'workbox-core'
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
+import { registerRoute } from 'workbox-routing'
+import { NetworkOnly } from 'workbox-strategies'

 declare let self: ServiceWorkerGlobalScope

 precacheAndRoute(self.__WB_MANIFEST)
 cleanupOutdatedCaches()
+clientsClaim()
+
+// Always fetch the live deploy version, even under an older precache.
+registerRoute(({ url }) => url.pathname === '/version.json', new NetworkOnly())
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    void self.skipWaiting()
+  }
+})

 interface PushPayload {
  title?: string
@@ -6,6 +6,7 @@
 /* Fallback before JS hydrates (ocean · dark) */
 html {
  color-scheme: dark;
+  --app-theme-color: #0b0c10;
  --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
  --app-text: #f1f5f9;
  --app-text-heading: #f8fafc;
@@ -61,6 +62,7 @@ html {
 /* ===== OCEAN · DARK (default) ===== */
 html.scheme-dark.theme-ocean {
  color-scheme: dark;
+  --app-theme-color: #0b0c10;
  --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
  --app-text: #f1f5f9;
  --app-text-heading: #f8fafc;
@@ -116,6 +118,7 @@ html.scheme-dark.theme-ocean {
 /* ===== OCEAN · LIGHT ===== */
 html.scheme-light.theme-ocean {
  color-scheme: light;
+  --app-theme-color: #e2e8f0;
  --app-body-bg: linear-gradient(165deg, #dbeafe 0%, #f8fafc 42%, #e2e8f0 100%);
  --app-text: #1e293b;
  --app-text-heading: #0f172a;
@@ -171,6 +174,7 @@ html.scheme-light.theme-ocean {
 /* ===== MATERIAL · DARK ===== */
 html.scheme-dark.theme-material {
  color-scheme: dark;
+  --app-theme-color: #121212;
  --app-body-bg: #121212;
  --app-text: #f1f5f9;
  --app-text-heading: #f8fafc;
@@ -226,6 +230,7 @@ html.scheme-dark.theme-material {
 /* ===== MATERIAL · LIGHT ===== */
 html.scheme-light.theme-material {
  color-scheme: light;
+  --app-theme-color: #fafafa;
  --app-body-bg: #fafafa;
  --app-text: #212121;
  --app-text-heading: #111827;
@@ -281,6 +286,7 @@ html.scheme-light.theme-material {
 /* ===== CUPERTINO · DARK ===== */
 html.scheme-dark.theme-cupertino {
  color-scheme: dark;
+  --app-theme-color: #000000;
  --app-body-bg: #000000;
  --app-text: #ffffff;
  --app-text-heading: #ffffff;
@@ -336,6 +342,7 @@ html.scheme-dark.theme-cupertino {
 /* ===== CUPERTINO · LIGHT ===== */
 html.scheme-light.theme-cupertino {
  color-scheme: light;
+  --app-theme-color: #f2f2f7;
  --app-body-bg: #f2f2f7;
  --app-text: #1c1c1e;
  --app-text-heading: #000000;
@@ -396,3 +403,12 @@ html.scheme-light.theme-cupertino {
 html.scheme-light #root {
  border-inline-color: var(--app-border-subtle);
 }
+
+/* Bridge legacy index.css tokens to appearance (avoids system color-scheme drift) */
+html.scheme-light,
+html.scheme-dark {
+  --text: var(--app-text);
+  --text-h: var(--app-text-heading);
+  --code-bg: var(--app-icon-btn-bg);
+  --border: var(--app-border-subtle);
+}
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildLogEntryPayload,
+  hasUnsavedEventDraft,
+  isLogEventDraftEmpty,
+  normalizeLogEvent,
+  type LogEventPayload
+} from './logEntryPayload.js'
+
+const emptyDraft = (): LogEventPayload =>
+  normalizeLogEvent({ time: '12:34' })
+
+const filledDraft = (): LogEventPayload =>
+  normalizeLogEvent({ time: '12:34', remarks: 'Wind dreht' })
+
+describe('logEntryPayload event drafts', () => {
+  it('treats time-only draft as empty', () => {
+    expect(isLogEventDraftEmpty(emptyDraft())).toBe(true)
+  })
+
+  it('detects draft with content', () => {
+    expect(isLogEventDraftEmpty(filledDraft())).toBe(false)
+  })
+
+  it('does not flag empty open form as unsaved', () => {
+    expect(hasUnsavedEventDraft(emptyDraft(), null, [])).toBe(false)
+  })
+
+  it('flags new event draft with content as unsaved', () => {
+    expect(hasUnsavedEventDraft(filledDraft(), null, [])).toBe(true)
+  })
+
+  it('flags edited event when values differ', () => {
+    const events = [emptyDraft()]
+    const edited = filledDraft()
+    expect(hasUnsavedEventDraft(edited, 0, events)).toBe(true)
+  })
+
+  it('ignores edit mode when values match', () => {
+    const events = [filledDraft()]
+    expect(hasUnsavedEventDraft(filledDraft(), 0, events)).toBe(false)
+  })
+})
+
+describe('buildLogEntryPayload greywater', () => {
+  const base = {
+    date: '2026-05-31',
+    dayOfTravel: '1',
+    departure: 'Kiel',
+    destination: 'Laboe',
+    freshwater: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+    fuel: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+    events: [] as LogEventPayload[]
+  }
+
+  it('includes greywater when level > 0', () => {
+    const payload = buildLogEntryPayload({ ...base, greywater: { level: 45 } })
+    expect(payload.greywater).toEqual({ level: 45 })
+  })
+
+  it('omits greywater when level is 0', () => {
+    const payload = buildLogEntryPayload({ ...base, greywater: { level: 0 } })
+    expect(payload.greywater).toBeUndefined()
+  })
+})
@@ -111,6 +111,27 @@ export function logEventsEqual(a: LogEventPayload, b: LogEventPayload): boolean
  return LOG_EVENT_FIELDS.every((key) => a[key] === b[key])
 }

+const LOG_EVENT_CONTENT_FIELDS = LOG_EVENT_FIELDS.filter((key) => key !== 'time')
+
+/** Draft with only a time (or empty fields) — not an unsaved log entry change. */
+export function isLogEventDraftEmpty(event: LogEventPayload): boolean {
+  return LOG_EVENT_CONTENT_FIELDS.every((key) => !event[key]?.trim())
+}
+
+/** Whether the event form holds unsaved changes worth merging on page save. */
+export function hasUnsavedEventDraft(
+  draft: LogEventPayload,
+  editingEventIndex: number | null,
+  events: LogEventPayload[]
+): boolean {
+  if (!isValidTimeHHMM(draft.time)) return false
+  if (editingEventIndex !== null) {
+    const original = events[editingEventIndex]
+    return original ? !logEventsEqual(draft, original) : false
+  }
+  return !isLogEventDraftEmpty(draft)
+}
+
 /** Chronological order: earliest time first (HH:MM). */
 export function sortLogEventsByTime<T extends LogEventPayload>(events: T[]): T[] {
  return [...events].sort((a, b) => (a.time || '').localeCompare(b.time || ''))
@@ -123,6 +144,7 @@ export interface LogEntryPayloadInput {
  destination: string
  freshwater: { morning: number; refilled: number; evening: number; consumption: number }
  fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  greywater?: { level: number }
  trackDistanceNm?: number
  trackSpeedMaxKn?: number
  trackSpeedAvgKn?: number
@@ -148,5 +170,12 @@ export function buildLogEntryPayload(input: LogEntryPayloadInput): Record<string
    payload.motorHours = Number(input.motorHours.toFixed(2))
  }

+  if (input.greywater !== undefined) {
+    const level = Number(input.greywater.level) || 0
+    if (level > 0) {
+      payload.greywater = { level: Number(level.toFixed(1)) }
+    }
+  }
+
  return payload
 }
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import {
+  carryOverFromPreviousDay,
+  getClosingGreywaterLevel,
+  hasCarryOverFromPreviousDay
+} from './logEntryTankLevels.js'
+
+describe('logEntryTankLevels greywater carry-over', () => {
+  it('returns previous greywater level as starting value', () => {
+    const carryOver = carryOverFromPreviousDay({
+      destination: 'Oslo',
+      freshwater: { morning: 100, refilled: 0, evening: 80, consumption: 20 },
+      fuel: { morning: 200, refilled: 0, evening: 150, consumption: 50 },
+      greywater: { level: 42 }
+    })
+
+    expect(carryOver.greywaterLevel).toBe(42)
+    expect(carryOver.freshwater.morning).toBe(80)
+    expect(carryOver.fuel.morning).toBe(150)
+    expect(carryOver.departure).toBe('Oslo')
+  })
+
+  it('defaults greywater to 0 when previous day has none', () => {
+    expect(carryOverFromPreviousDay(null).greywaterLevel).toBe(0)
+    expect(getClosingGreywaterLevel(undefined)).toBe(0)
+  })
+
+  it('treats greywater level as carry-over candidate', () => {
+    expect(
+      hasCarryOverFromPreviousDay({
+        freshwater: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+        fuel: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+        greywaterLevel: 15,
+        departure: ''
+      })
+    ).toBe(true)
+  })
+})
@@ -41,12 +41,14 @@ export function getClosingTankLevel(tank?: Partial<TankLevels> | null): number {
 export interface LogEntryTankSource {
  freshwater?: Partial<TankLevels>
  fuel?: Partial<TankLevels>
+  greywater?: { level?: number }
  destination?: string
 }

 export interface CarryOverFromPreviousDay {
  freshwater: TankLevels
  fuel: TankLevels
+  greywaterLevel: number
  departure: string
 }

@@ -59,6 +61,10 @@ export function formatTankLiters(liters: number): string {
  return Number.isInteger(liters) ? String(liters) : liters.toFixed(1)
 }

+export function getClosingGreywaterLevel(greywater?: { level?: number } | null): number {
+  return Number(greywater?.level) || 0
+}
+
 export function carryOverTankLevelsFromPreviousDay(previousEntry?: LogEntryTankSource | null): { freshwater: TankLevels; fuel: TankLevels } {
  if (!previousEntry) {
    return { freshwater: emptyTankLevels(), fuel: emptyTankLevels() }
@@ -73,10 +79,16 @@ export function carryOverTankLevelsFromPreviousDay(previousEntry?: LogEntryTankS
 export function carryOverFromPreviousDay(previousEntry?: LogEntryTankSource | null): CarryOverFromPreviousDay {
  const { freshwater, fuel } = carryOverTankLevelsFromPreviousDay(previousEntry)
  const departure = previousEntry?.destination?.trim() || ''
+  const greywaterLevel = getClosingGreywaterLevel(previousEntry?.greywater)

-  return { freshwater, fuel, departure }
+  return { freshwater, fuel, greywaterLevel, departure }
 }

 export function hasCarryOverFromPreviousDay(carryOver: CarryOverFromPreviousDay): boolean {
-  return carryOver.freshwater.morning > 0 || carryOver.fuel.morning > 0 || carryOver.departure.length > 0
+  return (
+    carryOver.freshwater.morning > 0 ||
+    carryOver.fuel.morning > 0 ||
+    carryOver.greywaterLevel > 0 ||
+    carryOver.departure.length > 0
+  )
 }
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import {
+  clampTankLiters,
+  computeEveningTankMaxLiters,
+  computeRefilledTankMaxLiters,
+  extractTankCapacitiesFromYacht,
+  formatTankLitersForInput,
+  parseOptionalTankLiters,
+  tankCapacityInputFromStored
+} from './tankCapacity.js'
+
+describe('tankCapacity', () => {
+  it('parses optional liters with comma decimal', () => {
+    expect(parseOptionalTankLiters('200')).toBe(200)
+    expect(parseOptionalTankLiters('12,5')).toBe(12.5)
+    expect(parseOptionalTankLiters('')).toBeUndefined()
+  })
+
+  it('rejects negative or invalid liters', () => {
+    expect(() => parseOptionalTankLiters('-1')).toThrow('invalid_tank_liters')
+    expect(() => parseOptionalTankLiters('abc')).toThrow('invalid_tank_liters')
+  })
+
+  it('extracts capacities from yacht payload', () => {
+    expect(
+      extractTankCapacitiesFromYacht({
+        freshwaterCapacityL: 300,
+        fuelCapacityL: 120,
+        greywaterCapacityL: 80
+      })
+    ).toEqual({
+      freshwaterCapacityL: 300,
+      fuelCapacityL: 120,
+      greywaterCapacityL: 80
+    })
+    expect(extractTankCapacitiesFromYacht({ name: 'Test' })).toEqual({})
+  })
+
+  it('formats stored capacity for input', () => {
+    expect(tankCapacityInputFromStored(150)).toBe('150')
+    expect(formatTankLitersForInput(12.5)).toBe('12.5')
+  })
+
+  it('clamps liters to max when set', () => {
+    expect(clampTankLiters(250, 200)).toBe(200)
+    expect(clampTankLiters(-5, 200)).toBe(0)
+    expect(clampTankLiters(50)).toBe(50)
+  })
+
+  it('computes refilled max as capacity minus morning', () => {
+    expect(computeRefilledTankMaxLiters('10', 60)).toBe(50)
+    expect(computeRefilledTankMaxLiters('60', 60)).toBeUndefined()
+    expect(computeRefilledTankMaxLiters('10', undefined)).toBeUndefined()
+  })
+
+  it('computes evening max as morning plus refilled capped by capacity', () => {
+    expect(computeEveningTankMaxLiters('10', '20', 60)).toBe(30)
+    expect(computeEveningTankMaxLiters('40', '40', 60)).toBe(60)
+    expect(computeEveningTankMaxLiters('10', '20')).toBe(30)
+    expect(computeEveningTankMaxLiters('0', '0', 60)).toBeUndefined()
+  })
+})
@@ -0,0 +1,101 @@
+import { formatTankLiters } from './logEntryTankLevels.js'
+
+export interface VesselTankCapacities {
+  freshwaterCapacityL?: number
+  fuelCapacityL?: number
+  greywaterCapacityL?: number
+}
+
+export function parseOptionalTankLiters(input: string): number | undefined {
+  const trimmed = input.trim().replace(',', '.')
+  if (!trimmed) return undefined
+  const parsed = Number(trimmed)
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    throw new Error('invalid_tank_liters')
+  }
+  return parsed
+}
+
+export function formatTankLitersForInput(liters: number): string {
+  return formatTankLiters(liters)
+}
+
+function capacityFromStored(value: unknown): number | undefined {
+  if (value == null || value === '') return undefined
+  if (typeof value === 'number' && Number.isFinite(value) && value >= 0) return value
+  if (typeof value === 'string') {
+    const trimmed = value.trim().replace(',', '.')
+    if (!trimmed) return undefined
+    const parsed = Number(trimmed)
+    if (Number.isFinite(parsed) && parsed >= 0) return parsed
+  }
+  return undefined
+}
+
+export function tankCapacityInputFromStored(value: unknown): string {
+  const n = capacityFromStored(value)
+  return n != null ? formatTankLitersForInput(n) : ''
+}
+
+export function extractTankCapacitiesFromYacht(decrypted: unknown): VesselTankCapacities {
+  if (!decrypted || typeof decrypted !== 'object') return {}
+  const y = decrypted as Record<string, unknown>
+  const capacities: VesselTankCapacities = {}
+  const fw = capacityFromStored(y.freshwaterCapacityL)
+  const fuel = capacityFromStored(y.fuelCapacityL)
+  const gw = capacityFromStored(y.greywaterCapacityL)
+  if (fw != null) capacities.freshwaterCapacityL = fw
+  if (fuel != null) capacities.fuelCapacityL = fuel
+  if (gw != null) capacities.greywaterCapacityL = gw
+  return capacities
+}
+
+/** Parse a liter amount from form state (string). */
+export function parseTankLitersFromInput(input: string): number {
+  const trimmed = input.trim().replace(',', '.')
+  if (!trimmed) return 0
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0
+}
+
+/**
+ * Max for refilled amount: remaining capacity after morning level.
+ * Returns undefined when no positive max (no slider).
+ */
+export function computeRefilledTankMaxLiters(
+  morningInput: string,
+  tankCapacityL?: number
+): number | undefined {
+  if (tankCapacityL == null || tankCapacityL <= 0) return undefined
+  const remaining = tankCapacityL - parseTankLitersFromInput(morningInput)
+  if (remaining <= 0) return undefined
+  return remaining
+}
+
+/**
+ * Max for evening fill level: morning + refilled, capped by tank capacity when known.
+ * Returns undefined when no positive max (no slider).
+ */
+export function computeEveningTankMaxLiters(
+  morningInput: string,
+  refilledInput: string,
+  tankCapacityL?: number
+): number | undefined {
+  const sum = parseTankLitersFromInput(morningInput) + parseTankLitersFromInput(refilledInput)
+  if (sum <= 0) return undefined
+
+  if (tankCapacityL != null && tankCapacityL > 0) {
+    return Math.min(tankCapacityL, sum)
+  }
+
+  return sum
+}
+
+/** Clamp numeric liter value to [0, max] when max is known. */
+export function clampTankLiters(value: number, maxLiters?: number): number {
+  const clamped = Math.max(0, value)
+  if (maxLiters != null && maxLiters > 0) {
+    return Math.min(clamped, maxLiters)
+  }
+  return clamped
+}
@@ -2,9 +2,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa'
-import { readFileSync } from 'node:fs'
+import { readFileSync, writeFileSync } from 'node:fs'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import type { Plugin } from 'vite'

 const __dirname = dirname(fileURLToPath(import.meta.url))

@@ -19,6 +20,19 @@ function readAppVersion(): string {
  }
 }

+function versionJsonPlugin(version: string): Plugin {
+  return {
+    name: 'version-json',
+    writeBundle(options) {
+      const outDir = options.dir ?? resolve(__dirname, 'dist')
+      writeFileSync(
+        resolve(outDir, 'version.json'),
+        `${JSON.stringify({ version }, null, 2)}\n`
+      )
+    }
+  }
+}
+
 // https://vite.dev/config/
 export default defineConfig({
  test: {
@@ -42,6 +56,7 @@ export default defineConfig({
  },
  plugins: [
    react(),
+    versionJsonPlugin(readAppVersion()),
    VitePWA({
      strategies: 'injectManifest',
      srcDir: 'src',
@@ -322,7 +322,7 @@
      <div class="feature"><span class="feature-icon">✦</span><span>GPS-Track Upload (GPX/KML) mit Kartendarstellung</span></div>
      <div class="feature"><span class="feature-icon">✦</span><span>Streckenstatistik</span></div>
      <div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge pro Reisetag</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge für Skipper und Crew</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Foto-Avatarbilder für Skipper und Crew</span></div>
      <div class="feature"><span class="feature-icon">✦</span><span>Crew einladen — gemeinsam am Logbuch arbeiten</span></div>
      <div class="feature"><span class="feature-icon">✦</span><span>PDF- &amp; CSV-Export</span></div>
      <div class="feature"><span class="feature-icon">✦</span><span>Verschlüsseltes Backup &amp; Wiederherstellung</span></div>
@@ -59,7 +59,7 @@ bump_patch_version() {
 }

 ensure_clean_git_tree() {
-  if git diff-index --quiet HEAD -- && [ -z "$(git status --porcelain)" ]; then
+  if [ -z "$(git status --porcelain)" ]; then
    return 0
  fi

@@ -22,6 +22,7 @@ model User {
  collaborations           Collaboration[]
  pushSubscriptions        PushSubscription[]
  notificationPrefs        UserNotificationPrefs?
+  appearancePrefs          UserAppearancePrefs?
 }

 model PushSubscription {
@@ -48,6 +49,15 @@ model UserNotificationPrefs {
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 }

+model UserAppearancePrefs {
+  userId      String   @id
+  theme       String   @default("auto")
+  colorScheme String   @default("auto")
+  updatedAt   DateTime @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
 model Credential {
  id           String   @id @default(uuid())
  userId       String
@@ -38,6 +38,17 @@ function normalizeCredentialLabel(label: unknown): string | null {
  return trimmed.slice(0, 64)
 }

+const VALID_THEMES = new Set(['auto', 'ocean', 'material', 'cupertino'])
+const VALID_COLOR_SCHEMES = new Set(['auto', 'light', 'dark'])
+
+function parseThemePreference(value: unknown): string | null {
+  return typeof value === 'string' && VALID_THEMES.has(value) ? value : null
+}
+
+function parseColorSchemePreference(value: unknown): string | null {
+  return typeof value === 'string' && VALID_COLOR_SCHEMES.has(value) ? value : null
+}
+
 router.post('/register-options', async (req, res) => {
  try {
    const { username } = req.body
@@ -426,6 +437,57 @@ router.post('/rotate-recovery', requireReauth, async (req: any, res) => {
  }
 })

+router.get('/appearance-prefs', requireUser, async (req: any, res) => {
+  try {
+    const prefs = await prisma.userAppearancePrefs.findUnique({
+      where: { userId: req.userId }
+    })
+
+    return res.json({
+      theme: prefs?.theme ?? 'auto',
+      colorScheme: prefs?.colorScheme ?? 'auto',
+      persisted: prefs != null
+    })
+  } catch (error: any) {
+    console.error('Error reading appearance prefs:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.put('/appearance-prefs', requireUser, async (req: any, res) => {
+  try {
+    const theme = parseThemePreference(req.body?.theme)
+    const colorScheme = parseColorSchemePreference(req.body?.colorScheme)
+    if (!theme || !colorScheme) {
+      return res.status(400).json({ error: 'Invalid theme or colorScheme' })
+    }
+
+    const prefs = await prisma.userAppearancePrefs.upsert({
+      where: { userId: req.userId },
+      create: {
+        userId: req.userId,
+        theme,
+        colorScheme,
+        updatedAt: new Date()
+      },
+      update: {
+        theme,
+        colorScheme,
+        updatedAt: new Date()
+      }
+    })
+
+    return res.json({
+      theme: prefs.theme,
+      colorScheme: prefs.colorScheme,
+      persisted: true
+    })
+  } catch (error: any) {
+    console.error('Error updating appearance prefs:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
 router.get('/profile', requireUser, async (req: any, res) => {
  try {
    const user = await prisma.user.findUnique({
Author	SHA1	Message	Date
elpatron	cc87b0f8e6	chore: release v0.1.0.67	2026-05-31 14:46:45 +02:00
elpatron	58984594b0	fix(pwa): Pending-Refresh bei Suppression nicht sofort verwerfen Suppression wird vor dem Flush geprüft, damit gepufferte needRefresh-Werte erhalten bleiben, bis die Unterdrückung endet. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:46:02 +02:00
elpatron	61675e1085	fix(pwa): Ausstehendes needRefresh nicht mehr während des Renders setzen Frühe Service-Worker-Callbacks puffern den Refresh-Status; der Flush erfolgt jetzt im useEffect statt in der Render-Phase. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:44:12 +02:00
elpatron	2082218f78	chore: release v0.1.0.66	2026-05-31 14:43:25 +02:00
elpatron	5882edcbdf	fix(dashboard): Sortierbuttons als kompakte Icon-Buttons ohne Text Beschriftungen entfernt, Buttons auf 36px verkleinert; aria-label und title bleiben für Tooltip und Barrierefreiheit erhalten. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:41:46 +02:00
elpatron	b7a47a1d90	fix(ui): Vite-Template-CSS entfernen und App-Layout wieder zentrieren index.css auf App-Shell reduziert, App.css zentral in main.tsx geladen und #root zentriert Dashboard/Logbuch-Ansichten nach dem Login. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:40:03 +02:00
elpatron	48c408302f	fix(pwa): Hintergrund-SW-Updates während Update-Suppression unterbinden Das periodische Intervall nutzt checkForUpdate() und respektiert damit „Später“ wie Fokus- und Online-Checks. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:28:01 +02:00
elpatron	2b5c5d4a36	feat(dashboard): Filter und Sortierung für die Logbuchliste Hilft bei vielen Logbüchern: Suche nach Name/Jahr/Datum sowie Sortierung nach Name oder Datum in beide Richtungen. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:27:41 +02:00
elpatron	7cf04b3357	fix(pwa): Recovery-Zähler, Update-Suppression und Timer-Leaks beheben Stale-Recovery zählt nur aufeinanderfolgende Fehler und wird nach Hard Recovery zurückgesetzt; Update-Checks respektieren „Später“, und PWA-Refresh-State sowie Recovery-Timer werden zuverlässig gesetzt bzw. beim Unmount aufgeräumt. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:24:25 +02:00
elpatron	bbd4281dcb	fix(pwa): Updates zuverlässiger erkennen und veraltete Instanzen automatisch reparieren Unabhängige version.json-Prüfung, häufigere Update-Checks und Hard Recovery beheben hängende Android-PWAs ohne manuelles Cache-Löschen. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:20:54 +02:00
elpatron	d2833f7664	chore: release v0.1.0.65	2026-05-31 14:14:25 +02:00
elpatron	2a14080b5b	fix(appearance): Theme-Sync an aufgelöste User-ID und Session koppeln Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:13:09 +02:00
elpatron	2457fa41e3	fix(profile): Profil-Statistiken auf Mobilgeräten platzsparender gestalten Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:11:57 +02:00
elpatron	87b0fa7bde	chore: release v0.1.0.64	2026-05-31 14:03:27 +02:00
elpatron	d90f292a21	fix(appearance): Theme-Einstellungen serverseitig speichern und beim Login wiederherstellen Nach PWA-Cache-Löschung gingen Theme und Farbschema verloren, weil sie nur in localStorage lagen. Die Präferenzen werden jetzt synchronisiert und nach dem Login erneut angewendet. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 14:03:17 +02:00
elpatron	9e42f828a0	chore: release v0.1.0.63	2026-05-31 14:00:00 +02:00
elpatron	4197e77b1e	feat(auth): Passwortmanager für Wiederherstellungsschlüssel aktivieren Das Eingabefeld nutzt jetzt Passwort-Semantik und Autocomplete-Attribute, damit OS-Passwortmanager gespeicherte Schlüssel vorschlagen können. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:59:50 +02:00
elpatron	1373c11de8	fix(pwa): Kaltstart nach verpassten Updates stabilisieren Service Worker übernimmt Updates zuverlässig (SKIP_WAITING, clientsClaim), wartende Versionen werden beim Start angewendet und veraltete Chunks führen nicht mehr zum Hängenbleiben. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:58:35 +02:00
elpatron	0bae3b29dc	feat: Grauwasserstand beim neuen Reisetag vom Vortag übernehmen Übernimmt den Grauwasser-Füllstand analog zu Frischwasser und Kraftstoff beim Anlegen eines Reisetags und zeigt ihn im Übernahme-Dialog an. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:54:57 +02:00
elpatron	73e86d28b3	chore: release v0.1.0.62	2026-05-31 13:47:49 +02:00
elpatron	ad4721e694	fix: Fehler-Alert nach Push-Aktivierung korrekt awaiten Stellt sicher, dass die Fehlermeldung angezeigt wird, bevor promptPushAfterInviteCreated zurückkehrt. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:47:36 +02:00
elpatron	8037b3b63e	chore: release v0.1.0.61	2026-05-31 13:45:05 +02:00
elpatron	c4cd566da0	fix: Tank-Nachfüll-Clamping und Deaktivierung bei vollem Tank Korrigiert fehlende useEffect-Dependencies beim Auto-Clamping und deaktiviert Refill-Eingaben, wenn der Morgenstand die Tankkapazität erreicht. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:44:49 +02:00
elpatron	3a267905b0	feat: Push-Hinweis nach Erstellen eines Crew-Einladungslinks Owner sieht einen Dialog zur Aktivierung von Crew-Push-Benachrichtigungen, sofern diese noch nicht aktiv sind. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:43:52 +02:00
elpatron	c856c2e903	chore: release v0.1.0.60	2026-05-31 13:41:29 +02:00
elpatron	b3256d1685	fix: Tank-Slider für Touch auf Mobilgeräten vergrößern Größerer Thumb und sichtbarere Spur mit touch-action, damit Füllstände am Handy leichter einstellbar sind. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:40:59 +02:00
elpatron	23fc940324	feat: dynamische Slider-Obergrenzen für Frischwasser und Treibstoff Nachgefüllt ist auf Restkapazität nach Morgen begrenzt, Stand abends auf Morgen plus Nachgefüllt; Werte werden bei Änderungen automatisch gekürzt. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:39:46 +02:00
elpatron	25e1bdded3	feat: Tankkapazitäten, Grauwasser und Slider im Journal Schiffsdaten speichern optionale Tankvolumina; Reisetage erfassen Grauwasser-Füllstand und nutzen Slider bei bekannter Kapazität, inkl. Tooltips und CSV/PDF-Export. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:33:40 +02:00
elpatron	6a61c9e06c	chore: release v0.1.0.59	2026-05-31 13:25:11 +02:00
elpatron	d3683ad6aa	fix: DemoViewer an erweiterte TourNavigation-Schnittstelle anpassen Ergänzt No-Op-Stubs für setLogbookActive und setProfileOpen, damit der Production-Build nach der Profil-Tour-Erweiterung wieder durchläuft. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:25:04 +02:00
elpatron	ef5891ba3f	chore: release v0.1.0.58	2026-05-31 13:22:59 +02:00
elpatron	d25095bab3	fix: Fehlalarm bei sauberem Working Tree in update-prod.sh vermeiden Die Clean-Tree-Prüfung verlässt sich nur noch auf git status --porcelain, da git diff-index nach git reset fälschlich Änderungen melden kann. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:22:52 +02:00
elpatron	0d16782001	fix: Onboarding-Tour bei gelöschtem Demo-Logbuch und GPS-Schritt stabilisieren Bereinigt veraltete Demo-Referenzen, löst gültiges Logbuch und ersten Eintrag zur Laufzeit auf und scrollt den GPS-Track-Schritt automatisch ins Viewport. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:15:53 +02:00
elpatron	b7e2d470a9	fix: Tour-Tooltip auf feste Breite begrenzen Entfernt left+right-Stretching in CSS, positioniert das Tooltip horizontal am Spotlight und misst Ziele nach Navigation mit verzögerten Retries. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:08:31 +02:00
elpatron	520ba766a3	feat: Onboarding-Tour um Benutzerprofil erweitern Profil-Schritte auf dem Dashboard und in den Einstellungen, entry_open highlightet nur die Karte ohne Editor, Finish verweist auf Benutzerprofil. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 13:04:02 +02:00
elpatron	c215cd8b15	docs: Beta-Flyer-Formulierung für Skipper/Crew-Fotos präzisieren Feature-Text nennt Avatarbilder statt Foto-Anhänge; PDF entsprechend aktualisiert. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 12:57:23 +02:00
elpatron	27c780d2b8	fix: Passkey-Signatur beim Speichern der Logbuchseite erhalten Leeres Event-Formular (nur Uhrzeit) galt fälschlich als Änderung und invalidierte frische Signaturen. Speichern-Button und Hash-Sperre folgen nun echten Entwürfen und synchronisiertem Seiteninhalt. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 12:57:02 +02:00
elpatron	aa52948ddc	chore: release v0.1.0.57	2026-05-31 12:45:44 +02:00
elpatron	49b4e7b9c3	fix: Code- und Profil-Kontrast an App-Theme binden Benutzer-ID und Passkey-IDs nutzen jetzt Theme-Token statt System- prefers-color-scheme, damit Monospace-Text in allen Schemes lesbar bleibt. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 12:43:27 +02:00
elpatron	2d64987ada	chore: release v0.1.0.56	2026-05-31 12:38:09 +02:00
elpatron	87973eaa4a	fix: Light-Theme-Hintergrund auf PWA/Android reparieren Der hardcodierte Inline-Style auf body überschrieb --app-body-bg und ließ hellen Modus mit dunklem Seitenhintergrund erscheinen. Theme-Bootstrap und dynamisches theme-color ergänzen alle Scheme/Theme-Kombinationen. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 12:38:01 +02:00
elpatron	93e26b7807	chore: release v0.1.0.55	2026-05-31 12:26:55 +02:00
elpatron	814eeadd1f	fix: Sync-Indikator Listener-Cleanup und CSS-Zustände useSyncIndicator gibt die Unsubscribe-Funktion von subscribeToSyncState zurück. conn-status-Klassen berücksichtigen jetzt auch den aktiven Sync-Lauf (syncing) statt nur die Queue-Länge. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 12:26:33 +02:00
elpatron	d9cbcd8e43	chore: release v0.1.0.54	2026-05-31 12:24:01 +02:00
elpatron	282e7ba8ba	fix: Sync-Icon nur während aktiver Synchronisation animieren Die Drehung hing an der Queue-Länge statt am laufenden Sync. Veraltete Queue-Einträge werden nach Pull bereinigt; parallele syncAll-Läufe werden im Sync-State korrekt gezählt. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-31 12:23:50 +02:00
@@ -1 +1 @@
 .1.0.54
 .1.0.68