made the long waited animation when add new truck or truck is completed. mouse over the list prevents the list from changing, only the animations work. moved top menu buttons to the right sidebar to free some vertical space. license text on button hover, not fixed above

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.claude/plans/css-design-tokens.md

@@ -0,0 +1,88 @@
+# CSS design tokens — typography, spacing, and full colour migration
+
+## Context
+`src/styles/tokens.css` already defines semantic colour/radius/shadow tokens for
+two themes (`classic`, `cockpit`). But:
+- there are no font or spacing tokens: ~25 distinct font-sizes (7px…40px, px and
+  rem mixed), 9 font-family declarations, ~25 distinct padding/margin/gap values;
+- about half the stylesheets still hardcode colours (`#667eea` ×88, `#333` ×42 …),
+  so those screens ignore the theme — they stay light under `cockpit`;
+- `UserManager.jsx` styles itself entirely with inline `style={{}}`.
+
+Goal: every UI value (colour, font, size, weight, spacing) comes from a token, so
+the look is changed in one file. Report *output* keeps fixed values.
+
+## What stays fixed (not tokenised)
+Printed/rendered report output must look identical regardless of screen theme:
+- `ReportEditor/a4/a4Elements.css`, `a4/print/print.css`, `ReportEditor/print/print.css`,
+  `ReportEditor/elements.css` (text-mode report elements on the page)
+- colours in A4 element JSX (`a4/elements/*`), `calibrationReport.js`, `sampleData.js`, tests
+- the "paper" surface itself (white page in `A4Canvas.css` / `EditorCanvas.css`)
+
+The report **editor chrome** around it (toolbar, inspectors, config panel, character
+palette, kind chooser, page setup, selection handles/guides) *does* get tokens.
+
+Also left alone: `components/concepts/ScalesAppCyberpunk.css` (standalone mockup
+with its own private vars). `DataDisplay.jsx/.css` is not imported anywhere — dead
+code, flagged, not touched.
+
+## New tokens (in `:root` only — theme-independent, both themes share them)
+```css
+/* Type */
+--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+--font-mono: 'Courier New', Consolas, monospace;
+
+--fs-xs: 11px;  --fs-sm: 12px;  --fs-base: 13px;  --fs-md: 14px;
+--fs-lg: 16px;  --fs-xl: 18px;  --fs-2xl: 22px;   --fs-3xl: 28px;
+--fs-display: 32px;             /* big figures: the weight reading etc. */
+
+--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
+
+/* Spacing — 4px grid with the half-steps this UI actually uses a lot (6, 10) */
+--space-0-5: 2px;  --space-1: 4px;   --space-1-5: 6px;  --space-2: 8px;
+--space-2-5: 10px; --space-3: 12px;  --space-4: 16px;   --space-5: 20px;
+--space-6: 24px;   --space-8: 32px;  --space-10: 40px;
+```
+A theme may later override any of these (e.g. a larger `--fs-display` for cockpit).
+
+**Snapping rule:** off-scale values snap to the nearest step (5→4/6, 7→6/8,
+14→12/16, 15/17→16, 20→22 for font, rem values converted at 16px). Expect ≤2px
+drift in places — that's the consistency we're buying. Values that are
+geometry rather than rhythm (1px borders, icon/checkbox sizes, fixed widths,
+`letter-spacing`) stay literal.
+
+**Colour mapping** for stray literals (add a token only if nothing fits):
+`#667eea`→`--accent`, `#764ba2` gradients→`--accent-gradient`,
+`#333/#2c3e50`→`--text`, `#555/#666/#888/#999`→`--text-muted`,
+`#ddd/#e0e0e0/#dee2e6`→`--border`, `#f5f5f5/#fafafa/#f0f0f0`→`--surface-sunken`/`--surface-hover`,
+`white/#fff`→`--surface`, `#fee/#c33`→`--danger-soft`/`--danger`, greens/oranges→`--success*`/`--warning*`.
+Likely one new token: `--backdrop` (modal overlay dim).
+
+## Phases (one commit each; done via `/dispatch` → react-expert-dev)
+1. **Tokens** — add the block above to `tokens.css`; `index.css` body uses
+   `--font-sans`, `code` uses `--font-mono`.
+2. **Screens already on colour tokens** — swap font/spacing literals:
+   `Main.css`, `ScaleMonitor.css`, `Header.css`, `History.css`,
+   `ExtraCombinationsTable.css`, `App.css`, `ReportPreviewModal.css`.
+3. **Hardcoded screens** — colours + fonts + spacing:
+   `NomenclatureManager.css`, `NomenclatureUI/*.css` (ManagementOverlay, EntryForm,
+   Dropdown, FormOverlay), `LicenseManager.css`, `Login.css`, `ChangePasswordOverlay.css`.
+   `UserManager.jsx`: move inline styles into a new `UserManager.css` (reuse existing
+   Main.css classes like `.extra-field`, `.vehicle-form-actions` where they already fit).
+4. **Report editor chrome** — `ReportEditor.css`, `Toolbar.css`, `ObjectInspector.css`,
+   `ConfigPanel.css`, `CharacterPalette.css`, `EditorCanvas.css` (non-paper parts),
+   `a4/A4Canvas.css` (non-paper), `A4Inspector.css`, `A4PageSetup.css`,
+   `A4KindChooser.css`, `A4ReportEditor.css`; chrome colours in `A4Canvas.jsx` /
+   `A4Inspector.jsx` / `ObjectInspector.jsx` (guides, handles) → `var(--…)`.
+
+## Verification
+- After each phase: grep for `#[0-9a-f]{3,6}`, `font-size: *[0-9]`, px spacing in the
+  touched files → only allowed literals remain.
+- End state: hex colours exist only in `tokens.css`, the "fixed" report files, and the
+  concept page.
+- `npm run build` passes.
+- Visual: screenshots (Playwright, saved to `.claude/screenshots/`) of main screen,
+  nomenclature manager, login, licence, user manager, both report editors — in
+  `classic` and `cockpit`, before and after. Classic should look the same (±snapping);
+  cockpit should now be dark on the previously-light screens.
+- Test suite only when you say "ready for testing".

backend/api/tests/test_one_weight.py

@@ -0,0 +1,105 @@
+from datetime import timedelta
+from unittest import mock
+
+from django.utils import timezone
+from rest_framework.test import APITestCase
+
+from api.models import User
+from vehicles.models import Vehicle
+
+STATION = {'station_key': 'test-station'}
+
+
+class OneWeightTests(APITestCase):
+    def setUp(self):
+        self.user = User.objects.create_user('op', password='x', can_measure=True)
+        self.other = User.objects.create_user('first', password='x')
+        self.client.force_authenticate(self.user)
+        p = mock.patch('api.views._station_allowed', return_value=True)
+        p.start()
+        self.addCleanup(p.stop)
+        p = mock.patch('api.views.sse_broadcast_update')
+        self.sse = p.start()
+        self.addCleanup(p.stop)
+
+    def url(self, v):
+        return f'/api/vehicles/{v.pk}/one-weight/'
+
+    def make(self, **kw):
+        return Vehicle.objects.create(vehicle_number='CB1234', driver_name='D', **kw)
+
+    def test_moves_tare_to_gross_and_finalizes(self):
+        when = timezone.now() - timedelta(hours=1)
+        v = self.make(tare=1500, tare_date=when, tare_user=self.other, tare_manual=True,
+                      tare_manual_user=self.other, tare_manual_date=when, tare_manual_note='n')
+        r = self.client.post(self.url(v), STATION, format='json')
+        self.assertEqual(r.status_code, 200, r.content)
+        v.refresh_from_db()
+        self.assertEqual(v.gross, 1500)
+        self.assertEqual(v.gross_date, when)
+        self.assertEqual(v.gross_user, self.other)
+        self.assertTrue(v.gross_manual)
+        self.assertEqual(v.gross_manual_user, self.other)
+        self.assertEqual(v.gross_manual_date, when)
+        self.assertEqual(v.gross_manual_note, 'n')
+        for f in ('tare', 'tare_date', 'tare_user', 'tare_manual_user',
+                  'tare_manual_date', 'tare_manual_note'):
+            self.assertIsNone(getattr(v, f), f)
+        self.assertFalse(v.tare_manual)
+        self.assertEqual(v.net, 1500)
+        self.assertEqual(v.net_user, self.user)
+        self.assertIsNotNone(v.net_date)
+        self.assertTrue(v.doc_number)
+        self.assertEqual(r.data['doc_number'], v.doc_number)
+        self.assertEqual(r.data['net'], 1500)
+        self.assertIsNone(r.data['tare'])
+        self.sse.assert_called_once()
+        self.assertEqual(self.sse.call_args.args[:2], ('vehicle', 'updated'))
+
+    def test_gross_already_set(self):
+        when = timezone.now()
+        v = self.make(gross=9000, gross_date=when, gross_user=self.other)
+        r = self.client.post(self.url(v), STATION, format='json')
+        self.assertEqual(r.status_code, 200, r.content)
+        v.refresh_from_db()
+        self.assertEqual((v.gross, v.gross_user, v.gross_date), (9000, self.other, when))
+        self.assertIsNone(v.tare)
+        self.assertEqual(v.net, 9000)
+        self.assertTrue(v.doc_number)
+
+    def _assert_400(self, v):
+        r = self.client.post(self.url(v), STATION, format='json')
+        self.assertEqual(r.status_code, 400)
+        self.assertIn('detail', r.data)
+        self.sse.assert_not_called()
+
+    def test_already_finalized(self):
+        self._assert_400(self.make(gross=5, net=5, doc_number='2026-1'))
+
+    def test_void(self):
+        self._assert_400(self.make(tare=5, is_void=True))
+
+    def test_no_weight(self):
+        self._assert_400(self.make())
+
+    def test_both_weights(self):
+        self._assert_400(self.make(tare=5, gross=10))
+
+    def test_permission_denied(self):
+        v = self.make(tare=5)
+        self.client.force_authenticate(self.other)
+        r = self.client.post(self.url(v), STATION, format='json')
+        self.assertEqual(r.status_code, 403)
+        v.refresh_from_db()
+        self.assertEqual(v.tare, 5)
+        self.assertIsNone(v.doc_number)
+
+    def test_station_not_licensed(self):
+        v = self.make(tare=5)
+        with mock.patch('api.views._station_allowed', return_value=False):
+            r = self.client.post(self.url(v), STATION, format='json')
+        self.assertEqual(r.status_code, 403)
+
+    def test_unknown_vehicle_404(self):
+        r = self.client.post('/api/vehicles/999999/one-weight/', STATION, format='json')
+        self.assertEqual(r.status_code, 404)

backend/api/views.py

@@ -2,6 +2,7 @@ from rest_framework import viewsets, status, mixins
 from rest_framework.decorators import action
 from rest_framework.response import Response
 from rest_framework.views import APIView
+from rest_framework.generics import get_object_or_404
 from rest_framework.permissions import IsAuthenticated, AllowAny
 from .models import (ComPortReading, User, Report, ScaleProtocol, License,
                      StationSlot, generate_doc_number)
@@ -11,6 +12,7 @@ from .serializers import (
     NomenclatureEntrySerializer, ReportSerializer, ExtraCombinationSerializer,
     ScaleProtocolSerializer,
 )
+from django.db import transaction
 from django.utils import timezone
 from vehicles.models import Vehicle, ExtraCombination, combination_hash
 from nomenclatures.models import Nomenclature, NomenclatureEntry
@@ -131,6 +133,24 @@ class ComPortReadingViewSet(viewsets.ModelViewSet):
         serializer.save(source_ip=self.get_client_ip(self.request))
 
 
+_WEIGHING_SUFFIXES = ('', '_date', '_user', '_manual', '_manual_user', '_manual_date', '_manual_note')
+
+
+def _move_weighing(vehicle, src_prefix, dst_prefix):
+    """Copy a recorded weighing to the other slot, carrying all its provenance.
+
+    The source slot is left untouched (callers overwrite or clear it as needed).
+    """
+    for suffix in _WEIGHING_SUFFIXES:
+        setattr(vehicle, f'{dst_prefix}{suffix}', getattr(vehicle, f'{src_prefix}{suffix}'))
+
+
+def _clear_weighing(vehicle, prefix):
+    """Reset every field of a weighing slot to its empty state."""
+    for suffix in _WEIGHING_SUFFIXES:
+        setattr(vehicle, f'{prefix}{suffix}', False if suffix == '_manual' else None)
+
+
 def _maybe_finalize(vehicle, user):
     """If both tare and gross are set and net hasn't been calculated yet, compute net and assign doc_number."""
     if vehicle.tare is not None and vehicle.gross is not None and vehicle.net is None:
@@ -159,9 +179,7 @@ def _assign_weighing(vehicle, value, user, manual=False, note=None):
         setattr(vehicle, f'{prefix}_manual_note', note if manual else None)
 
     def move(src_prefix, dst_prefix):
-        """Move a recorded weighing to the other slot, carrying all its provenance."""
+        _move_weighing(vehicle, src_prefix, dst_prefix)
-        for suffix in ('', '_date', '_user', '_manual', '_manual_user', '_manual_date', '_manual_note'):
-            setattr(vehicle, f'{dst_prefix}{suffix}', getattr(vehicle, f'{src_prefix}{suffix}'))
 
     if vehicle.tare is not None and vehicle.gross is not None:
         raise ValueError('Vehicle already has both weights.')
@@ -231,6 +249,7 @@ class VehicleViewSet(viewsets.ModelViewSet):
     destroy: Disabled - vehicles are never deleted, see void() instead
     by_number: Get vehicle by vehicle_number
     measure: Record a weighing (app assigns tare vs gross by weight)
+    one_weight: Finalize a vehicle weighed once (weight becomes gross, net = gross)
     void: Flag a completed vehicle as voided (corrective reversal, not a delete)
     mark_notice_printed: Signal that a completed vehicle's notice was printed/downloaded
     """
@@ -333,6 +352,55 @@ class VehicleViewSet(viewsets.ModelViewSet):
         sse_broadcast_update('vehicle', 'updated', serializer.data)
         return Response(serializer.data)
 
+    @action(detail=True, methods=['post'], url_path='one-weight')
+    def one_weight(self, request, pk=None):
+        """Finalize a vehicle weighed only once (external clients).
+
+        The single weight is treated as gross: net = gross, tare stays empty.
+        """
+        if not request.user.can_measure:
+            return Response({'detail': 'You do not have permission to measure.'},
+                            status=status.HTTP_403_FORBIDDEN)
+
+        station_key = (request.data.get('station_key') or '').strip()
+        if not _station_allowed(station_key):
+            limit = licensing.effective_station_limit()
+            return Response(
+                {'detail': f'This station is not licensed to measure '
+                           f'(limit: {limit} stations).'},
+                status=status.HTTP_403_FORBIDDEN)
+
+        with transaction.atomic():
+            vehicle = get_object_or_404(self.get_queryset().select_for_update(of=('self',)),
+                                        pk=pk)
+            self.check_object_permissions(request, vehicle)
+
+            if vehicle.doc_number:
+                return Response({'detail': 'This vehicle is already finalized.'},
+                                status=status.HTTP_400_BAD_REQUEST)
+            if vehicle.is_void:
+                return Response({'detail': 'A voided vehicle cannot be finalized.'},
+                                status=status.HTTP_400_BAD_REQUEST)
+            if (vehicle.tare is None) == (vehicle.gross is None):
+                return Response(
+                    {'detail': 'Exactly one weight must be recorded to finalize with one weight.'},
+                    status=status.HTTP_400_BAD_REQUEST)
+
+            if vehicle.tare is not None:
+                _move_weighing(vehicle, 'tare', 'gross')
+                _clear_weighing(vehicle, 'tare')
+
+            now = timezone.now()
+            vehicle.net = vehicle.gross
+            vehicle.net_date = now
+            vehicle.net_user = request.user
+            vehicle.doc_number = generate_doc_number(now.year)
+            vehicle.save()
+
+        serializer = self.get_serializer(vehicle)
+        sse_broadcast_update('vehicle', 'updated', serializer.data)
+        return Response(serializer.data)
+
     @action(detail=True, methods=['post'], url_path='void')
     def void(self, request, pk=None):
         """Flag a completed vehicle as voided. Does not touch doc_number/net/tare/gross."""

frontend/jsconfig.json

@@ -1,14 +1,3 @@
 {
-  "compilerOptions": {
-    "baseUrl": "src",
-    "paths": {
-      "@components/*": ["components/*"],
-      "@contexts/*": ["contexts/*"],
-      "@hooks/*": ["hooks/*"],
-      "@utils/*": ["utils/*"],
-      "@services/*": ["services/*"],
-      "@assets/*": ["assets/*"]
-    }
-  },
   "include": ["src"]
 }

frontend/src/App.css

@@ -7,34 +7,34 @@
 
 .status-bar {
   background: var(--surface);
-  padding: 12px 20px;
+  padding: var(--space-3) var(--space-5);
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: var(--space-5);
   box-shadow: var(--shadow-card);
 }
 
 .status-connected {
   color: var(--success);
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 
 .status-disconnected {
   color: var(--danger);
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 
 .status-error {
   color: var(--danger);
-  font-size: 12px;
+  font-size: var(--fs-sm);
 }
 
 .container {
   max-width: 1200px;
-  margin: 20px auto;
+  margin: var(--space-5) auto;
-  padding: 0 20px;
+  padding: 0 var(--space-5);
   flex: 1;
   width: 100%;
 }
@@ -42,16 +42,16 @@
 .error-message {
   background-color: var(--danger-soft);
   color: var(--danger);
-  padding: 12px 20px;
+  padding: var(--space-3) var(--space-5);
   border-radius: 4px;
-  margin-bottom: 20px;
+  margin-bottom: var(--space-5);
   border: 1px solid var(--danger);
 }
 
 .loading {
   text-align: center;
-  padding: 40px;
+  padding: var(--space-10);
-  font-size: 18px;
+  font-size: var(--fs-xl);
   color: var(--text-muted);
 }
 
@@ -59,10 +59,10 @@
   .status-bar {
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
+    gap: var(--space-2);
   }
 
   .container {
-    padding: 0 10px;
+    padding: 0 var(--space-2-5);
   }
 }

frontend/src/App.jsx

@@ -8,6 +8,7 @@ import Main from './components/Main';
 import ReportEditor from './components/ReportEditor/ReportEditor';
 import UserManager from './components/Users/UserManager';
 import History from './components/History';
+import RailLayout from './components/RailLayout';
 import './App.css';
 import { NomenclatureProvider } from './contexts/NomenclatureContext';
 import { NomenclatureDataProvider } from './contexts/NomenclatureDataContext';
@@ -77,13 +78,15 @@ function AppContent() {
           <LicenseProvider>
             <Suspense fallback={<div className="loading"><p>Loading...</p></div>}>
               <Routes>
+                <Route element={<RailLayout />}>
                   <Route path="/" element={<Main />} />
                   <Route path="/history" element={<History />} />
-                <Route path="/report-editor" element={currentUser?.can_edit_documents ? <ReportEditor /> : <Navigate to="/" />} />
-                <Route path="/report-editor-a4" element={currentUser?.can_edit_documents ? <A4ReportEditor /> : <Navigate to="/" />} />
                   <Route path="/users" element={currentUser?.is_admin ? <UserManager /> : <Navigate to="/" />} />
                   <Route path="/scale-monitor" element={currentUser?.is_admin ? <ScaleMonitor /> : <Navigate to="/" />} />
                   <Route path="/license" element={currentUser?.is_admin ? <LicenseManager /> : <Navigate to="/" />} />
+                </Route>
+                <Route path="/report-editor" element={currentUser?.can_edit_documents ? <ReportEditor /> : <Navigate to="/" />} />
+                <Route path="/report-editor-a4" element={currentUser?.can_edit_documents ? <A4ReportEditor /> : <Navigate to="/" />} />
               </Routes>
             </Suspense>
           </LicenseProvider>

frontend/src/components/ExtraCombinationsTable.css

@@ -1,24 +1,24 @@
 .extra-combos {
-    margin-bottom: 16px;
+    margin-bottom: var(--space-4);
 }
 
 .extra-combos h3 {
-    margin: 0 0 8px 0;
+    margin: 0 0 var(--space-2) 0;
-    font-size: 12px;
+    font-size: var(--fs-sm);
     color: var(--text-muted);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .extra-combos-error {
-    padding: 6px 10px;
+    padding: var(--space-1-5) var(--space-2-5);
     background-color: var(--danger-soft);
     color: var(--danger);
     border: 1px solid var(--danger);
     border-radius: 6px;
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    margin-bottom: 8px;
+    margin-bottom: var(--space-2);
 }
 
 .extra-combos-table-container {
@@ -61,11 +61,11 @@
 }
 
 .extra-combos-table th {
-    padding: 0.4rem 0.75rem;
+    padding: var(--space-1-5) var(--space-3);
     text-align: left;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     color: var(--text-muted);
-    font-size: 0.75rem;
+    font-size: var(--fs-sm);
     border-bottom: 2px solid var(--border);
     white-space: nowrap;
     text-transform: uppercase;
@@ -77,9 +77,9 @@
 }
 
 .extra-combos-table td {
-    padding: 0.4rem 0.75rem;
+    padding: var(--space-1-5) var(--space-3);
     border-bottom: 1px solid var(--border);
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
     color: var(--text);
     white-space: nowrap;
 }
@@ -100,11 +100,11 @@
 .extra-combos-delete-btn {
     background: none;
     border: 1px solid var(--border);
-    padding: 0 0.35rem;
+    padding: 0 var(--space-1-5);
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 0.9rem;
+    font-size: var(--fs-md);
     line-height: 1.4;
     color: var(--text-muted);
 }
@@ -122,8 +122,8 @@
 
 .extra-combos-empty {
     text-align: center;
-    padding: 1rem !important;
+    padding: var(--space-4) !important;
     color: var(--text-muted);
     font-style: italic;
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
 }

frontend/src/components/Header.css

@@ -1,223 +0,0 @@
-.app-header {
-  background: var(--header-bg);
-  color: var(--header-text);
-  padding: 0;
-  box-shadow: var(--shadow-raised);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.header-left h1 {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.nav-button {
-  width: 42px;
-  height: 42px;
-  border-radius: var(--radius);
-  background: var(--header-chrome);
-  border: 1px solid var(--header-chrome-border);
-  color: var(--header-text);
-  font-size: 20px;
-  cursor: pointer;
-  transition: background 0.2s, transform 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-.nav-button:hover {
-  background: var(--header-chrome-hover);
-  transform: scale(1.05);
-}
-
-/* Header dropdown — the report editor button opens a choice of editors rather
-   than navigating straight to one, since the two are not interchangeable. */
-.nav-dropdown {
-  position: relative;
-  display: flex;
-}
-
-/* Over the page, under the menu: any outside click closes it. */
-.nav-dropdown-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-}
-
-.nav-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: 101;
-  min-width: 220px;
-  background: var(--surface);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-overlay);
-  overflow: hidden;
-}
-
-.nav-dropdown-menu button {
-  display: block;
-  width: 100%;
-  padding: 10px 14px;
-  background: none;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  color: var(--text);
-  font-family: inherit;
-}
-
-.nav-dropdown-menu button + button {
-  border-top: 1px solid var(--border);
-}
-
-.nav-dropdown-menu button:hover {
-  background: var(--surface-hover);
-}
-
-.nav-dropdown-menu strong {
-  display: block;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.nav-dropdown-menu span {
-  display: block;
-  margin-top: 2px;
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  margin-right: 10px;
-}
-
-.user-name {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.user-role {
-  font-size: 12px;
-  opacity: 0.9;
-}
-
-.avatar-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background: var(--header-avatar-bg);
-  color: var(--header-avatar-text);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 16px;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  box-shadow: var(--shadow-card);
-}
-
-.avatar:hover {
-  transform: scale(1.05);
-  box-shadow: var(--shadow-raised);
-}
-
-.logout-button {
-  padding: 8px 16px;
-  background: var(--header-chrome);
-  border: 1px solid var(--header-chrome-border);
-  color: var(--header-text);
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.logout-button:hover {
-  background: var(--header-chrome-hover);
-}
-
-@media (max-width: 768px) {
-  .header-content {
-    flex-direction: column;
-    gap: 12px;
-    align-items: stretch;
-  }
-
-  .header-left h1 {
-    font-size: 18px;
-    text-align: center;
-  }
-
-  .header-right {
-    justify-content: space-between;
-  }
-
-  .user-info {
-    align-items: flex-start;
-    margin-right: 0;
-  }
-}
-
-/* Theme toggle — same chrome as the nav buttons, so it reads as part of the
-   header furniture rather than a feature being advertised. */
-.theme-toggle {
-  width: 38px;
-  height: 38px;
-  border-radius: var(--radius-sm);
-  background: var(--header-chrome);
-  border: 1px solid var(--header-chrome-border);
-  color: var(--header-text);
-  font-size: 17px;
-  line-height: 1;
-  cursor: pointer;
-  transition: background 0.2s, transform 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.theme-toggle:hover {
-  background: var(--header-chrome-hover);
-  transform: scale(1.05);
-}

frontend/src/components/Header.jsx

@@ -1,151 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
-import { useTheme } from '../contexts/ThemeContext';
-import ChangePasswordOverlay from './Users/ChangePasswordOverlay';
-import NomenclatureManager from './NomenclatureManager/NomenclatureManager';
-import './Header.css';
-
-function Header() {
-  const { currentUser, logout } = useAuth();
-  const { theme, toggleTheme } = useTheme();
-  const navigate = useNavigate();
-  const [showPasswordOverlay, setShowPasswordOverlay] = useState(false);
-  const [showNomenclatureManager, setShowNomenclatureManager] = useState(false);
-  const [showEditorMenu, setShowEditorMenu] = useState(false);
-
-  const openEditor = (route) => {
-    setShowEditorMenu(false);
-    navigate(route);
-  };
-
-  const getInitials = (user) => {
-    if (user.first_name && user.last_name) {
-      return `${user.first_name[0]}${user.last_name[0]}`.toUpperCase();
-    }
-    return user.username.substring(0, 2).toUpperCase();
-  };
-
-  const handleAvatarClick = () => {
-    setShowPasswordOverlay(true);
-  };
-
-  return (
-    <>
-      <header className="app-header">
-        <div className="header-content">
-          <div className="header-left">
-            {currentUser?.can_edit_documents && (
-              <div className="nav-dropdown">
-                <button
-                  className="nav-button"
-                  onClick={() => setShowEditorMenu(v => !v)}
-                  title="Report Editor"
-                  aria-haspopup="menu"
-                  aria-expanded={showEditorMenu}
-                >
-                  📝
-                </button>
-                {showEditorMenu && (
-                  <>
-                    {/* Click-away close, without a document-level listener. */}
-                    <div
-                      className="nav-dropdown-backdrop"
-                      onClick={() => setShowEditorMenu(false)}
-                    />
-                    <div className="nav-dropdown-menu" role="menu">
-                      <button role="menuitem" onClick={() => openEditor('/report-editor')}>
-                        <strong>Matrix editor</strong>
-                        <span>Character grid · dot-matrix printer</span>
-                      </button>
-                      <button role="menuitem" onClick={() => openEditor('/report-editor-a4')}>
-                        <strong>A4 editor</strong>
-                        <span>Millimetres · laser printer &amp; PDF</span>
-                      </button>
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-            {currentUser?.can_manage_entities && (
-              <button
-                className="nav-button"
-                onClick={() => setShowNomenclatureManager(true)}
-                title="Nomenclatures"
-              >
-                📋
-              </button>
-            )}
-            <button
-              className="nav-button"
-              onClick={() => navigate('/history')}
-              title="History"
-            >
-              🕘
-            </button>
-            {currentUser?.is_admin && (
-              <button
-                className="nav-button"
-                onClick={() => navigate('/users')}
-                title="User Manager"
-              >
-                👥
-              </button>
-            )}
-            {currentUser?.is_admin && (
-              <button
-                className="nav-button"
-                onClick={() => navigate('/scale-monitor')}
-                title="Scale Monitor"
-              >
-                📡
-              </button>
-            )}
-            {currentUser?.is_admin && (
-              <button
-                className="nav-button"
-                onClick={() => navigate('/license')}
-                title="Licence"
-              >
-                🔑
-              </button>
-            )}
-            <h1>ScalesApp - Real-time Data Monitor</h1>
-          </div>
-          <div className="header-right">
-            <button
-              className="theme-toggle"
-              onClick={toggleTheme}
-              title={theme === 'cockpit' ? 'Switch to the classic theme' : 'Switch to the cockpit theme'}
-              aria-label="Toggle colour theme"
-            >
-              {theme === 'cockpit' ? '☀' : '◐'}
-            </button>
-            <div className="user-info">
-              <span className="user-name">{currentUser?.username}</span>
-              <span className="user-role">({currentUser?.role})</span>
-            </div>
-            <div className="avatar-container">
-              <div className="avatar" onClick={handleAvatarClick} title="Change Password">
-                {getInitials(currentUser || {})}
-              </div>
-              <button className="logout-button" onClick={logout} title="Logout">
-                Logout
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {showPasswordOverlay && (
-        <ChangePasswordOverlay onClose={() => setShowPasswordOverlay(false)} />
-      )}
-
-      {showNomenclatureManager && (
-        <NomenclatureManager onClose={() => setShowNomenclatureManager(false)} />
-      )}
-    </>
-  );
-}
-
-export default Header;

frontend/src/components/History.css

@@ -1,21 +1,21 @@
 .history {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 24px 20px;
+    padding: var(--space-6) var(--space-5);
 }
 
 .history-title {
-    margin: 0 0 16px 0;
+    margin: 0 0 var(--space-4) 0;
     color: var(--text);
 }
 
 .history-error {
-    padding: 10px 14px;
+    padding: var(--space-2-5) var(--space-4);
-    margin-bottom: 12px;
+    margin-bottom: var(--space-3);
     background: var(--danger-soft);
     color: var(--danger);
     border-radius: var(--radius-sm);
-    font-size: 13px;
+    font-size: var(--fs-base);
 }
 
 .history-table-wrap {
@@ -28,23 +28,23 @@
 .history-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 14px;
+    font-size: var(--fs-md);
 }
 
 .history-table th {
     text-align: left;
-    padding: 10px 14px;
+    padding: var(--space-2-5) var(--space-4);
     background: var(--surface-hover);
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: var(--fs-xs);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border-bottom: 1px solid var(--border);
 }
 
 .history-table td {
-    padding: 10px 14px;
+    padding: var(--space-2-5) var(--space-4);
     border-bottom: 1px solid var(--border);
     color: var(--text);
 }
@@ -64,16 +64,16 @@
 .history-empty {
     text-align: center;
     color: var(--text-muted);
-    padding: 32px !important;
+    padding: var(--space-8) !important;
 }
 
 .history-badge {
     display: inline-block;
-    padding: 3px 10px;
+    padding: var(--space-1) var(--space-2-5);
     border: 1px solid;
     border-radius: 20px;
-    font-size: 11px;
+    font-size: var(--fs-xs);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     letter-spacing: 0.03em;
     white-space: nowrap;
 }
@@ -91,12 +91,12 @@
 }
 
 .history-void-btn {
-    padding: 4px 12px;
+    padding: var(--space-1) var(--space-3);
     background: none;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     color: var(--text-muted);
-    font-size: 12px;
+    font-size: var(--fs-sm);
     cursor: pointer;
 }
 
@@ -108,35 +108,35 @@
 .history-void-inline {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: var(--space-1-5);
     min-width: 180px;
 }
 
 .history-void-inline input {
-    padding: 6px 8px;
+    padding: var(--space-1-5) var(--space-2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    font-size: 12px;
+    font-size: var(--fs-sm);
     box-sizing: border-box;
 }
 
 .history-void-error {
     color: var(--danger);
-    font-size: 11px;
+    font-size: var(--fs-xs);
 }
 
 .history-void-actions {
     display: flex;
-    gap: 6px;
+    gap: var(--space-1-5);
 }
 
 .history-void-actions button {
-    padding: 4px 10px;
+    padding: var(--space-1) var(--space-2-5);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     background: var(--surface-hover);
     color: var(--text);
-    font-size: 12px;
+    font-size: var(--fs-sm);
     cursor: pointer;
 }
 
@@ -144,19 +144,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 4px;
+    gap: var(--space-1);
-    margin-top: 16px;
+    margin-top: var(--space-4);
 }
 
 .history-pager button {
     min-width: 32px;
     height: 32px;
-    padding: 0 8px;
+    padding: 0 var(--space-2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     background: var(--surface);
     color: var(--text);
-    font-size: 13px;
+    font-size: var(--fs-base);
     cursor: pointer;
 }
 
@@ -178,5 +178,5 @@
 
 .history-page-gap {
     color: var(--text-muted);
-    padding: 0 4px;
+    padding: 0 var(--space-1);
 }

frontend/src/components/History.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from 'react';
-import Header from './Header';
 import { useAuth } from '../contexts/AuthContext';
 import { useNomenclatureData } from '../contexts/NomenclatureDataContext';
 import { buildVehicleReportData } from '../services/vehicleReportData';
@@ -124,7 +123,6 @@ export default function History() {
 
     return (
         <div>
-            <Header />
             <div className="history">
                 <h2 className="history-title">History</h2>
 

frontend/src/components/License/LicenseManager.css

@@ -1,110 +1,110 @@
 .license-manager {
-    min-height: 100vh;
+    flex: 1 0 auto;             /* fill the rail layout's content column */
-    background-color: #f5f5f7;
+    background-color: var(--surface-sunken);
 }
 
 .lm-body {
-    padding: 20px;
+    padding: var(--space-5);
     max-width: 800px;
     margin: 0 auto;
 }
 
 .lm-loading,
 .lm-empty {
-    padding: 24px;
+    padding: var(--space-6);
     text-align: center;
-    color: #999;
+    color: var(--text-muted);
     font-style: italic;
 }
 
 .lm-toolbar {
-    margin-bottom: 16px;
+    margin-bottom: var(--space-4);
 }
 
 .lm-back {
-    padding: 6px 12px;
+    padding: var(--space-1-5) var(--space-3);
-    background: white;
+    background: var(--surface);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    color: #666;
+    color: var(--text-muted);
     cursor: pointer;
-    font-size: 13px;
+    font-size: var(--fs-base);
 }
 
 .lm-back:hover {
-    border-color: #667eea;
+    border-color: var(--accent);
-    color: #667eea;
+    color: var(--accent);
 }
 
 .lm-ok,
 .lm-error {
-    padding: 8px 12px;
+    padding: var(--space-2) var(--space-3);
     border-radius: 6px;
-    font-size: 13px;
+    font-size: var(--fs-base);
-    margin-bottom: 12px;
+    margin-bottom: var(--space-3);
 }
 
 .lm-ok {
-    background-color: #e8f5e9;
+    background-color: var(--success-soft);
-    border: 1px solid #c8e6c9;
+    border: 1px solid var(--success);
-    color: #2e7d32;
+    color: var(--success);
 }
 
 .lm-error {
-    background-color: #fee;
+    background-color: var(--danger-soft);
-    border: 1px solid #fcc;
+    border: 1px solid var(--danger);
-    color: #c33;
+    color: var(--danger);
 }
 
 .lm-panel {
-    background: white;
+    background: var(--surface);
     border-radius: 8px;
-    padding: 18px;
+    padding: var(--space-5);
-    margin-bottom: 16px;
+    margin-bottom: var(--space-4);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-card);
 }
 
 .lm-panel h3 {
-    margin: 0 0 12px 0;
+    margin: 0 0 var(--space-3) 0;
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #888;
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .lm-badge {
     display: inline-block;
-    padding: 3px 10px;
+    padding: var(--space-1) var(--space-2-5);
     border-radius: 4px;
-    font-size: 11px;
+    font-size: var(--fs-xs);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    margin-bottom: 10px;
+    margin-bottom: var(--space-2-5);
 }
 
 .lm-badge--ok {
-    background-color: #e8f5e9;
+    background-color: var(--success-soft);
-    color: #2e7d32;
+    color: var(--success);
 }
 
 .lm-badge--warn {
-    background-color: #fff3cd;
+    background-color: var(--warning-soft);
-    color: #856404;
+    color: var(--warning);
 }
 
 .lm-facts {
     display: grid;
     grid-template-columns: 140px 1fr;
-    gap: 6px 12px;
+    gap: var(--space-1-5) var(--space-3);
     margin: 0;
 }
 
 .lm-facts dt {
-    font-size: 11px;
+    font-size: var(--fs-xs);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #888;
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     align-self: center;
@@ -112,107 +112,107 @@
 
 .lm-facts dd {
     margin: 0;
-    font-size: 14px;
+    font-size: var(--fs-md);
-    color: #333;
+    color: var(--text);
 }
 
 .lm-reason {
-    margin: 0 0 8px 0;
+    margin: 0 0 var(--space-2) 0;
-    font-size: 14px;
+    font-size: var(--fs-md);
-    color: #333;
+    color: var(--text);
 }
 
 .lm-grace {
     margin: 0;
-    font-size: 13px;
+    font-size: var(--fs-base);
-    color: #666;
+    color: var(--text-muted);
     line-height: 1.5;
 }
 
 .lm-hint {
-    margin: 0 0 12px 0;
+    margin: 0 0 var(--space-3) 0;
-    font-size: 13px;
+    font-size: var(--fs-base);
-    color: #666;
+    color: var(--text-muted);
     line-height: 1.5;
 }
 
 .lm-fingerprint {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
 }
 
 .lm-fingerprint code {
     flex: 1;
-    padding: 10px 12px;
+    padding: var(--space-2-5) var(--space-3);
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
-    font-size: 18px;
+    font-size: var(--fs-xl);
     letter-spacing: 1px;
-    color: #333;
+    color: var(--text);
     word-break: break-all;
 }
 
 .lm-components {
-    font-size: 11px !important;
+    font-size: var(--fs-xs) !important;
     letter-spacing: 0 !important;
 }
 
 .lm-fingerprint button {
-    padding: 8px 14px;
+    padding: var(--space-2) var(--space-4);
     background: none;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    color: #666;
+    color: var(--text-muted);
-    font-size: 13px;
+    font-size: var(--fs-base);
     cursor: pointer;
     flex-shrink: 0;
 }
 
 .lm-fingerprint button:hover {
-    border-color: #667eea;
+    border-color: var(--accent);
-    color: #667eea;
+    color: var(--accent);
 }
 
 .lm-details {
-    margin-top: 10px;
+    margin-top: var(--space-2-5);
 }
 
 .lm-details summary {
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    color: #888;
+    color: var(--text-muted);
     cursor: pointer;
-    margin-bottom: 8px;
+    margin-bottom: var(--space-2);
 }
 
 .lm-blob {
     width: 100%;
-    padding: 10px;
+    padding: var(--space-2-5);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
-    font-size: 12px;
+    font-size: var(--fs-sm);
     box-sizing: border-box;
     resize: vertical;
 }
 
 .lm-install {
-    margin-top: 10px;
+    margin-top: var(--space-2-5);
-    padding: 9px 18px;
+    padding: var(--space-2-5) var(--space-5);
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: var(--accent-gradient);
     border: none;
     border-radius: 6px;
-    color: white;
+    color: var(--accent-contrast);
-    font-size: 13px;
+    font-size: var(--fs-base);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
 .lm-install:hover:not(:disabled) {
     transform: translateY(-1px);
-    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .lm-install:disabled {
@@ -226,41 +226,21 @@
 }
 
 .lm-table th {
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
     text-align: left;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #495057;
+    color: var(--text);
-    font-size: 0.75rem;
+    font-size: var(--fs-sm);
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 2px solid var(--border);
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
 }
 
 .lm-table td {
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--border);
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
-    color: #333;
+    color: var(--text);
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
-}
-
-/* Persistent, non-dismissible banner shown app-wide during grace */
-.license-banner {
-    padding: 8px 16px;
-    background-color: #fff3cd;
-    border-bottom: 1px solid #ffe69c;
-    color: #856404;
-    font-size: 13px;
-    text-align: center;
-}
-
-.license-banner strong {
-    font-weight: 600;
-}
-
-.license-banner--blocked {
-    background-color: #fee;
-    border-bottom-color: #fcc;
-    color: #c33;
 }

frontend/src/components/License/LicenseManager.jsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Header from '../Header';
 import { useLicense } from '../../contexts/LicenseContext';
 import api from '../../services/api';
 import './LicenseManager.css';
@@ -40,7 +39,6 @@ export default function LicenseManager() {
     if (!status) {
         return (
             <div className="license-manager">
-                <Header />
                 <div className="lm-body"><div className="lm-loading">Loading licence...</div></div>
             </div>
         );
@@ -50,7 +48,6 @@ export default function LicenseManager() {
 
     return (
         <div className="license-manager">
-            <Header />
             <div className="lm-body">
                 <div className="lm-toolbar">
                     <button className="lm-back" onClick={() => navigate('/')}>&larr; Back</button>

frontend/src/components/Main.jsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Header from './Header';
 import useSerialData from '../hooks/useSerialData';
+import useStagedList, { prefersReducedMotion } from '../hooks/useStagedList';
 import { useAuth } from '../contexts/AuthContext';
 import { useNomenclatures } from '../contexts/NomenclatureContext';
 import { useNomenclatureData } from '../contexts/NomenclatureDataContext';
@@ -11,19 +10,21 @@ import { parseReading } from '../services/scaleProtocols';
 import NomenclatureDropdown from './NomenclatureUI/NomenclatureDropdown';
 import ReportPreviewModal from './ReportPreviewModal';
 import ExtraCombinationsTable from './ExtraCombinationsTable';
+import { LIST_STAGING, listStagingStyle, PendingMarker, RevealPlate, measureOpeningRow, shouldHoldList } from './VehicleListStaging';
 import { visibleNomenclatures, codesRevealedBy } from '../services/nomenclatureVisibility';
-import { buildVehicleReportData } from '../services/vehicleReportData';
+import { buildVehicleReportData, vehicleNetWeight } from '../services/vehicleReportData';
 import api from '../services/api';
 import './Main.css';
 import './License/LicenseManager.css';
 
+const getVehicleKey = v => v.id;
+
 export default function Main() {
-    const navigate = useNavigate();
     const { readings, isConnected } = useSerialData();
     const { vehicles } = useNomenclatures();
     const { currentUser } = useAuth();
     const { selectedProtocol } = useScaleProtocols();
-    const { allowed: licenseAllowed, detail: licenseDetail, stationKey, status: licenseStatus } = useLicense();
+    const { allowed: licenseAllowed, detail: licenseDetail, stationKey } = useLicense();
 
     const [selectedVehicleId, setSelectedVehicleId] = useState(null);
     const [searchQuery, setSearchQuery] = useState('');
@@ -34,7 +35,7 @@ export default function Main() {
     const [isSaving, setIsSaving] = useState(false);
     const [showNoticeReport, setShowNoticeReport] = useState(false);
     const [isPrinting, setIsPrinting] = useState(false);
-    const [showDesignMenu, setShowDesignMenu] = useState(false);
+    const [isOneWeighing, setIsOneWeighing] = useState(false);
     const [showManualForm, setShowManualForm] = useState(false);
     const [manualForm, setManualForm] = useState({ value: '', note: '' });
 
@@ -165,12 +166,60 @@ export default function Main() {
         [vehicles, selectedVehicleId]
     );
 
-    // Filtered vehicles
+    // While the mouse is over the list, staged changes wait (useStagedList
+    // `hold`). Only mouse/pen hold, so a touch screen never gets stuck. A
+    // click on a row releases; a mouse move REHOLD_PX away from the click
+    // point holds again (shouldHoldList).
+    const [isListHeld, setIsListHeld] = useState(false);
+    const lastPointerRef = useRef(null);
+    const holdReleasedAtRef = useRef(null);
+    const trackListPointer = e => {
+        if (e.pointerType === 'mouse' || e.pointerType === 'pen') {
+            lastPointerRef.current = { x: e.clientX, y: e.clientY };
+        }
+    };
+    const handleListPointerOver = e => {
+        trackListPointer(e);
+        if (!shouldHoldList(e, holdReleasedAtRef.current)) return;
+        holdReleasedAtRef.current = null;
+        if (!isListHeld) setIsListHeld(true);
+    };
+    const handleListPointerLeave = () => {
+        holdReleasedAtRef.current = null;
+        setIsListHeld(false);
+    };
+    const releaseListHoldOnClick = () => {
+        holdReleasedAtRef.current = lastPointerRef.current;
+        setIsListHeld(false);
+    };
+    useEffect(() => {
+        const release = () => setIsListHeld(false);
+        const handleVisibilityChange = () => { if (document.hidden) release(); };
+        window.addEventListener('blur', release);
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            window.removeEventListener('blur', release);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, []);
+
+    // The list lags the live data so rows never shift under the cursor
+    // unannounced; the search filter applies to it instantly.
+    const stagedVehicles = useStagedList(vehicles, {
+        getKey: getVehicleKey,
+        delay: LIST_STAGING.delay,
+        distortMs: LIST_STAGING.distortMs,
+        enterMs: LIST_STAGING.enterMs,
+        animationMs: LIST_STAGING.exitMs,
+        hold: isListHeld,
+        releaseStagger: LIST_STAGING.releaseStagger,
+    });
     const filteredVehicles = useMemo(() => {
-        if (!searchQuery.trim()) return vehicles;
+        if (!searchQuery.trim()) return stagedVehicles;
         const q = searchQuery.toLowerCase();
-        return vehicles.filter(v => v.vehicle_number.toLowerCase().includes(q));
+        return stagedVehicles.filter(({ item }) => item.vehicle_number.toLowerCase().includes(q));
-    }, [vehicles, searchQuery]);
+    }, [stagedVehicles, searchQuery]);
+    const reduceMotion = prefersReducedMotion();
 
     // When vehicle selection changes, load its extra data
     useEffect(() => {
@@ -185,7 +234,7 @@ export default function Main() {
     const handleNewVehicle = () => {
         setSelectedVehicleId(null);
         setShowNewForm(true);
-        setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '' });
+        setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '', driver_name: '' });
         setNewExtraData({});
         setError('');
     };
@@ -245,6 +294,24 @@ export default function Main() {
         }
     };
 
+    // Finalize on the single recorded weight (external clients weighed once).
+    // Like handleMeasure, the screen updates from the server's SSE broadcast.
+    const handleOneWeight = async () => {
+        if (!selectedVehicle || isOneWeighing) return;
+        if (!window.confirm('Finalize with a single weight?')) return;
+        setIsOneWeighing(true);
+        setError('');
+        try {
+            await api.post(`/api/vehicles/${selectedVehicle.id}/one-weight/`, {
+                station_key: stationKey,
+            });
+        } catch (err) {
+            setError(err.response?.data?.detail || 'Failed to finalize with a single weight');
+        } finally {
+            setIsOneWeighing(false);
+        }
+    };
+
     // Record a weighing entered by hand - requires a note
     const handleManualMeasure = async () => {
         if (!selectedVehicle) return;
@@ -319,13 +386,18 @@ export default function Main() {
         return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     };
 
-    // Net weight
+    // Net weight - the server's net when set (a one-weight vehicle has no tare,
-    const netWeight = (selectedVehicle?.tare != null && selectedVehicle?.gross != null)
+    // so gross - tare cannot produce it), otherwise derived from both weighings.
-        ? selectedVehicle.gross - selectedVehicle.tare
+    const netWeight = vehicleNetWeight(selectedVehicle);
-        : null;
 
     const canMeasure = !!currentUser?.can_measure;
-    const isFinalized = selectedVehicle?.tare != null && selectedVehicle?.gross != null;
+    // doc_number is assigned on finalization by both the second weighing and
+    // the one-weight path, so it is the one signal that covers both.
+    const isFinalized = selectedVehicle?.doc_number != null;
+
+    // Weighed exactly once and still open - may be closed on that single weight.
+    const canOneWeight = canMeasure && !isFinalized && !selectedVehicle?.is_void
+        && (selectedVehicle?.tare != null) !== (selectedVehicle?.gross != null);
 
     // Vehicle data shaped for report preview/design (shared with History)
     const vehicleReportData = useMemo(
@@ -375,67 +447,8 @@ export default function Main() {
         }
     };
 
-    // Design Notice routes to the editor that can actually edit the saved
-    // report. A matrix report opened in the mm editor would read its character
-    // coordinates as millimetres, so the kind decides the route, not a default.
-    const handleDesignNotice = async () => {
-        const state = { reportName: 'notice_report', vehicleData: vehicleReportData };
-        try {
-            const report = await fetchNoticeReport();
-            navigate(report?.kind === 'a4' ? '/report-editor-a4' : '/report-editor', { state });
-        } catch (err) {
-            // Nothing saved yet, or the lookup failed — the matrix editor is the
-            // existing default and pre-fills the name so Save creates it.
-            console.error('Failed to resolve notice report kind:', err);
-            navigate('/report-editor', { state });
-        }
-    };
-
-    /**
-     * Open a chosen editor regardless of what is saved.
-     *
-     * The automatic route above is right for editing an existing notice; this is
-     * for deliberately starting the OTHER kind. Opening a report in the wrong
-     * editor reinterprets its coordinates — character cells as millimetres, or
-     * the reverse — so a mismatch is confirmed rather than done silently.
-     */
-    const handleDesignAs = async (kind) => {
-        setShowDesignMenu(false);
-        const state = { reportName: 'notice_report', vehicleData: vehicleReportData };
-        const route = kind === 'a4' ? '/report-editor-a4' : '/report-editor';
-
-        let saved = null;
-        try {
-            saved = await fetchNoticeReport();
-        } catch (err) {
-            console.error('Failed to resolve notice report kind:', err);
-        }
-
-        if (saved && saved.kind !== kind) {
-            const savedLabel = saved.kind === 'a4' ? 'A4' : 'matrix';
-            const targetLabel = kind === 'a4' ? 'A4' : 'matrix';
-            const ok = window.confirm(
-                `"notice_report" is saved as a ${savedLabel} report.\n\n` +
-                `Opening it in the ${targetLabel} editor will read its positions in the ` +
-                `wrong units, and saving would overwrite the ${savedLabel} layout.\n\n` +
-                `Open the ${targetLabel} editor anyway?`
-            );
-            if (!ok) return;
-        }
-
-        navigate(route, { state });
-    };
-
     return (
-        <div>
+        <div className="main-page">
-            <Header />
-            {licenseStatus && !licenseStatus.valid && (
-                <div className={`license-banner ${licenseStatus.in_grace ? '' : 'license-banner--blocked'}`}>
-                    {licenseStatus.in_grace
-                        ? <>This installation is not licensed. Everything keeps working for <strong>{licenseStatus.grace_days_left} more days</strong>.</>
-                        : <>This installation is not licensed. Only {licenseStatus.stations} station can measure.</>}
-                </div>
-            )}
             <div className="main">
                 {/* Left panel - Vehicle list */}
                 <div className="main-left">
@@ -455,20 +468,46 @@ export default function Main() {
                         />
                     </div>
 
-                    <div className="vehicle-list">
-                        {filteredVehicles.map(v => (
                     <div
-                                key={v.id}
+                        className="vehicle-list"
-                                className={`vehicle-list-item ${selectedVehicleId === v.id ? 'vehicle-list-item--active' : ''}`}
+                        style={listStagingStyle}
-                                onClick={() => { setSelectedVehicleId(v.id); setShowNewForm(false); setError(''); }}
+                        onPointerEnter={handleListPointerOver}
+                        onPointerDown={trackListPointer}
+                        onPointerMove={handleListPointerOver}
+                        onPointerLeave={handleListPointerLeave}
                     >
-                                <span className="vehicle-list-number">{v.vehicle_number}</span>
+                        {filteredVehicles.map(({ id, item: v, phase }) => {
+                            if (phase === 'pending' || phase === 'distorting') {
+                                return <PendingMarker key={id} reduceMotion={reduceMotion} distorting={phase === 'distorting'} />;
+                            }
+                            const isGone = phase === 'leaving' || phase === 'exiting';
+                            const isEntering = phase === 'entering';
+                            // Only settled rows are clickable: an opening row is
+                            // still changing size under the cursor.
+                            const isInteractive = phase === 'stable';
+                            const stateClass = {
+                                entering: 'vehicle-list-item--entering',
+                                leaving: 'vehicle-list-item--leaving',
+                                exiting: 'vehicle-list-item--leaving vehicle-list-item--exiting',
+                            }[phase] || '';
+                            return (
+                                <div
+                                    key={id}
+                                    className={`vehicle-list-item ${!isGone && selectedVehicleId === v.id ? 'vehicle-list-item--active' : ''} ${stateClass}`}
+                                    ref={isEntering ? measureOpeningRow : undefined}
+                                    aria-disabled={!isInteractive || undefined}
+                                    onClick={isInteractive ? () => { setSelectedVehicleId(v.id); setShowNewForm(false); setError(''); releaseListHoldOnClick(); } : undefined}
+                                >
+                                    {isEntering && !reduceMotion
+                                        ? <RevealPlate text={v.vehicle_number} />
+                                        : <span className="vehicle-list-number">{v.vehicle_number}</span>}
                                     {v.tare != null && (
                                         <span className="vehicle-list-weight">{v.tare} kg</span>
                                     )}
                                 </div>
-                        ))}
+                            );
-                        {filteredVehicles.length === 0 && (
+                        })}
+                        {!filteredVehicles.some(e => e.phase !== 'pending' && e.phase !== 'distorting') && (
                             <div className="vehicle-list-empty">No vehicles found</div>
                         )}
                     </div>
@@ -748,13 +787,22 @@ export default function Main() {
                                     </div>
                                 </div>
 
-                                {/* Action column. Print/Design only now - Measure/Manual entry
+                                {/* Action column. Measure/Manual entry live in the Current
-                                    moved into the Current Reading card, since they act on that
+                                    Reading card, since they act on that card's live value. Here:
-                                    card's live value. This column is empty (just its panel
+                                    One weight only after a single weighing, Print Notice once
-                                    chrome) until weighing is finalized. */}
+                                    finalized; otherwise empty (just its panel chrome). */}
                                 <div className="weight-card weight-actions">
-                                    {netWeight !== null && (
+                                    {canOneWeight && (
-                                        <>
+                                        <button
+                                            className="weight-set-btn"
+                                            onClick={handleOneWeight}
+                                            disabled={isOneWeighing || !licenseAllowed}
+                                            title={licenseAllowed ? undefined : licenseDetail}
+                                        >
+                                            {isOneWeighing ? 'Finalizing...' : 'One weight only'}
+                                        </button>
+                                    )}
+                                    {isFinalized && netWeight !== null && (
                                         <button
                                             className="weight-set-btn"
                                             onClick={handlePrintNotice}
@@ -764,53 +812,6 @@ export default function Main() {
                                         >
                                             {isPrinting ? 'Preparing...' : 'Print Notice'}
                                         </button>
-                                            {/* Split button: the main action routes by
-                                                the saved report's kind; the caret opens
-                                                an explicit choice for starting the other
-                                                kind. */}
-                                            <div className="design-notice-split">
-                                                <button
-                                                    className="weight-set-btn design-notice-main"
-                                                    onClick={handleDesignNotice}
-                                                >
-                                                    Design Notice
-                                                </button>
-                                                <button
-                                                    className="weight-set-btn design-notice-caret"
-                                                    onClick={() => setShowDesignMenu(v => !v)}
-                                                    aria-haspopup="menu"
-                                                    aria-expanded={showDesignMenu}
-                                                    title="Choose which editor to open"
-                                                >
-                                                    ▾
-                                                </button>
-                                                {showDesignMenu && (
-                                                    <>
-                                                        {/* Click-away closes the menu. */}
-                                                        <div
-                                                            className="design-notice-backdrop"
-                                                            onClick={() => setShowDesignMenu(false)}
-                                                        />
-                                                        <div className="design-notice-menu" role="menu">
-                                                            <button
-                                                                role="menuitem"
-                                                                onClick={() => handleDesignAs('matrix')}
-                                                            >
-                                                                <strong>Matrix editor</strong>
-                                                                <span>Character grid · dot-matrix printer</span>
-                                                            </button>
-                                                            <button
-                                                                role="menuitem"
-                                                                onClick={() => handleDesignAs('a4')}
-                                                            >
-                                                                <strong>A4 editor</strong>
-                                                                <span>Millimetres · laser printer &amp; PDF</span>
-                                                            </button>
-                                                        </div>
-                                                    </>
-                                                )}
-                                            </div>
-                                        </>
                                     )}
                                 </div>
                             </div>

frontend/src/components/NavRail.css

@@ -0,0 +1,428 @@
+/* App shell: the page content takes everything left of the rail and exactly
+   the viewport height. The content column scrolls on its own, so no screen can
+   produce a page (body) scrollbar; a screen that must fit without scrolling
+   (Main) sizes itself to this column with flex instead of calc(100vh - x). */
+.app-shell {
+  display: flex;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.app-shell-content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The rail is the old header turned on its side, so it keeps the header's
+   surface tokens. */
+.nav-rail {
+  --rail-width: 68px;
+  position: relative;
+  z-index: 100;
+  width: var(--rail-width);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2) 0;
+  background: var(--header-bg);
+  color: var(--header-text);
+  box-shadow: var(--shadow-raised);
+}
+
+.nav-rail-top,
+.nav-rail-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.nav-rail-bottom {
+  gap: var(--space-2-5);
+}
+
+/* Positioning context for a flyout opening beside its trigger. */
+.nav-rail-anchor {
+  position: relative;
+  display: flex;
+}
+
+.nav-rail-item {
+  width: 60px;
+  padding: var(--space-1-5) var(--space-0-5) var(--space-1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-0-5);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  color: var(--header-text);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.nav-rail-item:hover {
+  background: var(--header-chrome);
+  border-color: var(--header-chrome-border);
+}
+
+.nav-rail-icon {
+  font-size: var(--fs-xl);
+  line-height: 1.2;
+}
+
+.nav-rail-label {
+  max-width: 100%;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The lit edge faces the content, the way a tab points at its page. */
+.nav-rail-item--active,
+.nav-rail-item--active:hover {
+  background: var(--header-chrome-hover);
+  border-color: var(--header-chrome-border);
+  box-shadow: inset 3px 0 0 var(--header-active);
+}
+
+.nav-rail-item:focus-visible,
+.nav-rail-theme:focus-visible,
+.nav-rail-avatar:focus-visible {
+  outline: 2px solid var(--header-active);
+  outline-offset: 2px;
+}
+
+.nav-rail-theme {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-sm);
+  background: var(--header-chrome);
+  border: 1px solid var(--header-chrome-border);
+  color: var(--header-text);
+  font-size: var(--fs-xl);
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.nav-rail-theme:hover {
+  background: var(--header-chrome-hover);
+  transform: scale(1.05);
+}
+
+.nav-rail-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  background: var(--header-avatar-bg);
+  color: var(--header-avatar-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-weight: var(--fw-bold);
+  font-size: var(--fs-lg);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: var(--shadow-card);
+}
+
+.nav-rail-avatar:hover {
+  transform: scale(1.05);
+  box-shadow: var(--shadow-raised);
+}
+
+/* Over the page, under the flyout: any outside click closes it. */
+.nav-rail-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+/* Flyouts open to the LEFT of the rail, over the page content. */
+.nav-rail-flyout {
+  position: absolute;
+  right: calc(100% + var(--space-2-5));
+  z-index: 2;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-overlay);
+  overflow: hidden;
+}
+
+.nav-rail-menu {
+  top: 0;
+  min-width: 220px;
+}
+
+/* The avatar sits at the foot of the rail, so its menu grows upwards. */
+.nav-rail-user-menu {
+  bottom: 0;
+  min-width: 180px;
+}
+
+.nav-rail-flyout button {
+  display: block;
+  width: 100%;
+  padding: var(--space-2-5) var(--space-4);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--fs-md);
+}
+
+.nav-rail-flyout button + button,
+.nav-rail-user + button {
+  border-top: 1px solid var(--border);
+}
+
+.nav-rail-flyout button:hover,
+.nav-rail-flyout button:focus-visible {
+  background: var(--surface-hover);
+  outline: none;
+}
+
+.nav-rail-menu strong,
+.nav-rail-user strong {
+  display: block;
+  font-size: var(--fs-base);
+  font-weight: var(--fw-semibold);
+}
+
+.nav-rail-menu span,
+.nav-rail-user span {
+  display: block;
+  margin-top: var(--space-0-5);
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+}
+
+.nav-rail-user {
+  padding: var(--space-2-5) var(--space-4);
+  color: var(--text);
+  background: var(--surface-sunken);
+}
+
+/* Licence warning: amber while in grace, red once measuring is blocked. The
+   colour drives the label, the "!" marker and the badge; an emoji icon keeps
+   its own colours, so the item also gets a tinted surface. */
+.nav-rail-item--license-grace {
+  --license-tone: var(--warning);
+  --license-tone-soft: var(--warning-soft);
+}
+
+.nav-rail-item--license-blocked {
+  --license-tone: var(--danger);
+  --license-tone-soft: var(--danger-soft);
+}
+
+.nav-rail-item--license {
+  color: var(--license-tone);
+  background: var(--license-tone-soft);
+}
+
+.nav-rail-item--license:hover {
+  background: var(--license-tone-soft);
+  border-color: var(--license-tone);
+}
+
+.nav-rail-item--license .nav-rail-icon {
+  position: relative;
+  font-weight: var(--fw-bold);
+}
+
+.nav-rail-badge {
+  position: absolute;
+  top: 0;
+  right: -6px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--license-tone);
+  box-shadow: 0 0 0 2px var(--header-bg);
+}
+
+/* One gentle pulse when the badge first appears, never on a loop. */
+@media (prefers-reduced-motion: no-preference) {
+  .nav-rail-badge {
+    animation: nav-rail-badge-pulse 1.2s ease-out 1;
+  }
+}
+
+@keyframes nav-rail-badge-pulse {
+  0%   { transform: scale(1); }
+  35%  { transform: scale(1.6); }
+  100% { transform: scale(1); }
+}
+
+.nav-rail-license-popover {
+  top: 0;
+  width: 260px;
+  border-left: 3px solid var(--warning);
+}
+
+.nav-rail-license-popover--blocked {
+  border-left-color: var(--danger);
+}
+
+/* The non-admin marker sits near the foot of the rail: grow upwards. */
+.nav-rail-license-popover--bottom {
+  top: auto;
+  bottom: 0;
+}
+
+.nav-rail-license-popover p {
+  margin: 0;
+  padding: var(--space-2-5) var(--space-4);
+  color: var(--text);
+  font-size: var(--fs-md);
+  line-height: 1.4;
+}
+
+.nav-rail-license-popover strong {
+  font-weight: var(--fw-semibold);
+}
+
+.nav-rail-license-popover button {
+  border-top: 1px solid var(--border);
+  font-weight: var(--fw-semibold);
+}
+
+/* Cockpit: the rail needs its own lit edge facing the content, or it floats,
+   and the active item glows like the rest of the lit instruments. */
+[data-theme="cockpit"] .nav-rail {
+  border-left: 1px solid var(--border);
+  box-shadow: -1px 0 0 color-mix(in srgb, var(--accent) 25%, transparent),
+              var(--shadow-raised);
+}
+
+[data-theme="cockpit"] .nav-rail-item--active {
+  color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent), var(--glow-accent);
+}
+
+[data-theme="cockpit"] .nav-rail-flyout {
+  border-color: var(--border-strong);
+}
+
+[data-theme="cockpit"] .nav-rail-license-popover {
+  border-left-color: var(--warning);
+}
+
+[data-theme="cockpit"] .nav-rail-license-popover--blocked {
+  border-left-color: var(--danger);
+}
+
+[data-theme="cockpit"] .nav-rail-item--license-grace .nav-rail-badge {
+  box-shadow: 0 0 0 2px var(--header-bg), var(--glow-warning);
+}
+
+[data-theme="cockpit"] .nav-rail-item--license-blocked .nav-rail-badge {
+  box-shadow: 0 0 0 2px var(--header-bg), var(--glow-danger);
+}
+
+/* Short windows: drop the labels before the rail runs out of height. */
+@media (max-height: 620px) and (min-width: 700px) {
+  .nav-rail-label {
+    display: none;
+  }
+
+  .nav-rail-item {
+    padding: var(--space-1-5) var(--space-0-5);
+  }
+}
+
+/* Narrow screens: the rail becomes a bottom bar, icons only. */
+@media (max-width: 699px) {
+  .app-shell {
+    flex-direction: column;
+  }
+
+  .nav-rail {
+    width: auto;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--space-1) var(--space-2);
+  }
+
+  [data-theme="cockpit"] .nav-rail {
+    border-left: none;
+    border-top: 1px solid var(--border);
+  }
+
+  .nav-rail-top,
+  .nav-rail-bottom {
+    flex-direction: row;
+    gap: var(--space-0-5);
+  }
+
+  .nav-rail-top {
+    flex: 1;
+    min-width: 0;
+    justify-content: space-around;
+  }
+
+  .nav-rail-item {
+    width: auto;
+    min-width: 36px;
+    padding: var(--space-1);
+  }
+
+  .nav-rail-label {
+    display: none;
+  }
+
+  .nav-rail-item--active,
+  .nav-rail-item--active:hover,
+  [data-theme="cockpit"] .nav-rail-item--active {
+    box-shadow: inset 0 -3px 0 var(--header-active);
+  }
+
+  .nav-rail-theme,
+  .nav-rail-avatar {
+    width: 34px;
+    height: 34px;
+    font-size: var(--fs-md);
+  }
+
+  /* Above the bar instead of beside it. */
+  .nav-rail-flyout {
+    right: auto;
+    left: 0;
+    top: auto;
+    bottom: calc(100% + var(--space-2));
+  }
+
+  .nav-rail-user-menu,
+  .nav-rail-license-popover {
+    left: auto;
+    right: 0;
+  }
+
+  .nav-rail-license-popover {
+    max-width: calc(100vw - 2 * var(--space-4));
+  }
+}

frontend/src/components/NavRail.jsx

@@ -0,0 +1,355 @@
+import React, { useState, useEffect, useRef, useId } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import { useTheme } from '../contexts/ThemeContext';
+import { useLicense } from '../contexts/LicenseContext';
+import { getLicenseWarning } from './licenseWarning';
+import ChangePasswordOverlay from './Users/ChangePasswordOverlay';
+import NomenclatureManager from './NomenclatureManager/NomenclatureManager';
+import './NavRail.css';
+
+function RailItem({ icon, label, title, onClick, isActive = false, buttonRef, className = '', noTooltip = false, ...rest }) {
+  return (
+    <button
+      ref={buttonRef}
+      className={`nav-rail-item${isActive ? ' nav-rail-item--active' : ''}${className ? ` ${className}` : ''}`}
+      onClick={onClick}
+      title={noTooltip ? undefined : title}
+      aria-label={title}
+      aria-current={isActive ? 'page' : undefined}
+      {...rest}
+    >
+      <span className="nav-rail-icon" aria-hidden="true">{icon}</span>
+      <span className="nav-rail-label" aria-hidden="true">{label}</span>
+    </button>
+  );
+}
+
+const LICENSE_OPEN_DELAY_MS = 200;
+const LICENSE_CLOSE_DELAY_MS = 250;
+
+// Licence item in its warning state, with a popover beside the rail that opens
+// on hover (after a short delay), focus or click. Admins get the real Licence
+// item, which still navigates; everyone else gets a "!" marker that does not.
+function LicenseWarning({ warning, isAdmin, isActive, onOpenPage }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const triggerRef = useRef(null);
+  const timerRef = useRef(null);
+  const skipFocusOpenRef = useRef(false);
+  const popoverId = useId();
+
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const handleMouseDown = (e) => {
+      if (!anchorRef.current?.contains(e.target)) setIsOpen(false);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key !== 'Escape') return;
+      clearTimeout(timerRef.current);
+      setIsOpen(false);
+      // Only pull focus back when it was inside the popover itself.
+      const active = document.activeElement;
+      if (active !== triggerRef.current && anchorRef.current?.contains(active)) {
+        skipFocusOpenRef.current = true;
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const openNow = () => {
+    clearTimeout(timerRef.current);
+    setIsOpen(true);
+  };
+
+  // Entering again (e.g. trigger -> popover across the gap) cancels a pending close.
+  const handleMouseEnter = () => {
+    clearTimeout(timerRef.current);
+    if (!isOpen) timerRef.current = setTimeout(() => setIsOpen(true), LICENSE_OPEN_DELAY_MS);
+  };
+
+  const handleMouseLeave = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setIsOpen(false), LICENSE_CLOSE_DELAY_MS);
+  };
+
+  const handleFocus = () => {
+    if (skipFocusOpenRef.current) {
+      skipFocusOpenRef.current = false;
+      return;
+    }
+    openNow();
+  };
+
+  // A null relatedTarget is a click on something unfocusable; the outside
+  // mousedown handler covers the case where that was outside the anchor.
+  const handleBlur = (e) => {
+    if (e.relatedTarget && !anchorRef.current?.contains(e.relatedTarget)) {
+      clearTimeout(timerRef.current);
+      setIsOpen(false);
+    }
+  };
+
+  const handleOpenPage = () => {
+    setIsOpen(false);
+    onOpenPage();
+  };
+
+  const badgeIcon = (icon) => (
+    <>
+      {icon}
+      <span className="nav-rail-badge" />
+    </>
+  );
+
+  return (
+    <div
+      ref={anchorRef}
+      className="nav-rail-anchor"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onBlur={handleBlur}
+    >
+      <RailItem
+        buttonRef={triggerRef}
+        className={`nav-rail-item--license nav-rail-item--license-${warning.level}`}
+        icon={badgeIcon(isAdmin ? '🔑' : '!')}
+        label="Licence"
+        title={`Licence: ${warning.message}`}
+        noTooltip /* the popover already shows the message; aria-label keeps it for screen readers */
+        onClick={isAdmin ? onOpenPage : openNow}
+        onFocus={handleFocus}
+        isActive={isActive}
+        aria-describedby={isOpen ? popoverId : undefined}
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? popoverId : undefined}
+      />
+      {isOpen && (
+        <div
+          id={popoverId}
+          className={`nav-rail-flyout nav-rail-license-popover nav-rail-license-popover--${warning.level}${isAdmin ? '' : ' nav-rail-license-popover--bottom'}`}
+          role={isAdmin ? 'dialog' : 'tooltip'}
+          aria-label={isAdmin ? 'Licence warning' : undefined}
+        >
+          <p>
+            {warning.lead}
+            {warning.emphasis && <strong>{warning.emphasis}</strong>}
+            {warning.tail}
+          </p>
+          {isAdmin && (
+            <button onClick={handleOpenPage}>Open licence page</button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const getInitials = (user) => {
+  if (user.first_name && user.last_name) {
+    return `${user.first_name[0]}${user.last_name[0]}`.toUpperCase();
+  }
+  return (user.username || '').substring(0, 2).toUpperCase();
+};
+
+function NavRail() {
+  const { currentUser, logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const { status: licenseStatus } = useLicense();
+  const licenseWarning = getLicenseWarning(licenseStatus);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [showPasswordOverlay, setShowPasswordOverlay] = useState(false);
+  const [showNomenclatureManager, setShowNomenclatureManager] = useState(false);
+  const [showEditorMenu, setShowEditorMenu] = useState(false);
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const editorButtonRef = useRef(null);
+  const avatarButtonRef = useRef(null);
+
+  // Escape closes whichever flyout is open and hands focus back to its trigger.
+  useEffect(() => {
+    if (!showEditorMenu && !showUserMenu) return undefined;
+    const handleKeyDown = (e) => {
+      if (e.key !== 'Escape') return;
+      const trigger = showEditorMenu ? editorButtonRef.current : avatarButtonRef.current;
+      setShowEditorMenu(false);
+      setShowUserMenu(false);
+      trigger?.focus();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [showEditorMenu, showUserMenu]);
+
+  const openEditor = (route) => {
+    setShowEditorMenu(false);
+    navigate(route);
+  };
+
+  const handleChangePassword = () => {
+    setShowUserMenu(false);
+    setShowPasswordOverlay(true);
+  };
+
+  const handleLogout = () => {
+    setShowUserMenu(false);
+    logout();
+  };
+
+  return (
+    <>
+      <nav className="nav-rail" aria-label="Main navigation">
+        <div className="nav-rail-top">
+          <RailItem
+            icon="⚖️"
+            label="Weighing"
+            title="Weighing"
+            onClick={() => navigate('/')}
+            isActive={pathname === '/'}
+          />
+          {currentUser?.can_edit_documents && (
+            <div className="nav-rail-anchor">
+              <RailItem
+                buttonRef={editorButtonRef}
+                icon="📝"
+                label="Reports"
+                title="Report Editor"
+                onClick={() => setShowEditorMenu(v => !v)}
+                aria-haspopup="menu"
+                aria-expanded={showEditorMenu}
+              />
+              {showEditorMenu && (
+                <>
+                  {/* Click-away close, without a document-level listener. */}
+                  <div
+                    className="nav-rail-backdrop"
+                    onClick={() => setShowEditorMenu(false)}
+                  />
+                  <div className="nav-rail-flyout nav-rail-menu" role="menu">
+                    <button role="menuitem" onClick={() => openEditor('/report-editor')}>
+                      <strong>Matrix editor</strong>
+                      <span>Character grid · dot-matrix printer</span>
+                    </button>
+                    <button role="menuitem" onClick={() => openEditor('/report-editor-a4')}>
+                      <strong>A4 editor</strong>
+                      <span>Millimetres · laser printer &amp; PDF</span>
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+          {currentUser?.can_manage_entities && (
+            <RailItem
+              icon="📋"
+              label="Lists"
+              title="Nomenclatures"
+              onClick={() => setShowNomenclatureManager(true)}
+            />
+          )}
+          <RailItem
+            icon="🕘"
+            label="History"
+            title="History"
+            onClick={() => navigate('/history')}
+            isActive={pathname === '/history'}
+          />
+          {currentUser?.is_admin && (
+            <>
+              <RailItem
+                icon="👥"
+                label="Users"
+                title="User Manager"
+                onClick={() => navigate('/users')}
+                isActive={pathname === '/users'}
+              />
+              <RailItem
+                icon="📡"
+                label="Scale"
+                title="Scale Monitor"
+                onClick={() => navigate('/scale-monitor')}
+                isActive={pathname === '/scale-monitor'}
+              />
+              {licenseWarning ? (
+                <LicenseWarning
+                  warning={licenseWarning}
+                  isAdmin
+                  isActive={pathname === '/license'}
+                  onOpenPage={() => navigate('/license')}
+                />
+              ) : (
+                <RailItem
+                  icon="🔑"
+                  label="Licence"
+                  title="Licence"
+                  onClick={() => navigate('/license')}
+                  isActive={pathname === '/license'}
+                />
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="nav-rail-bottom">
+          {licenseWarning && !currentUser?.is_admin && (
+            <LicenseWarning warning={licenseWarning} isAdmin={false} />
+          )}
+          <button
+            className="nav-rail-theme"
+            onClick={toggleTheme}
+            title={theme === 'cockpit' ? 'Switch to the classic theme' : 'Switch to the cockpit theme'}
+            aria-label="Toggle colour theme"
+          >
+            {theme === 'cockpit' ? '☀' : '◐'}
+          </button>
+          <div className="nav-rail-anchor">
+            <button
+              ref={avatarButtonRef}
+              className="nav-rail-avatar"
+              onClick={() => setShowUserMenu(v => !v)}
+              title={currentUser?.username}
+              aria-label={`Account: ${currentUser?.username ?? ''}`}
+              aria-haspopup="menu"
+              aria-expanded={showUserMenu}
+            >
+              {getInitials(currentUser || {})}
+            </button>
+            {showUserMenu && (
+              <>
+                <div
+                  className="nav-rail-backdrop"
+                  onClick={() => setShowUserMenu(false)}
+                />
+                <div className="nav-rail-flyout nav-rail-user-menu" role="menu">
+                  <div className="nav-rail-user">
+                    <strong>{currentUser?.username}</strong>
+                    <span>{currentUser?.role}</span>
+                  </div>
+                  <button role="menuitem" onClick={handleChangePassword}>Change password</button>
+                  <button role="menuitem" onClick={handleLogout}>Logout</button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </nav>
+
+      {showPasswordOverlay && (
+        <ChangePasswordOverlay onClose={() => setShowPasswordOverlay(false)} />
+      )}
+
+      {showNomenclatureManager && (
+        <NomenclatureManager onClose={() => setShowNomenclatureManager(false)} />
+      )}
+    </>
+  );
+}
+
+export default NavRail;

frontend/src/components/NomenclatureManager/NomenclatureManager.css

@@ -5,12 +5,12 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 20px;
+  padding: var(--space-5);
   animation: nmFadeIn 0.2s ease-in;
 }
 
@@ -21,9 +21,9 @@
 
 /* Main content container */
 .nm-content {
-  background: white;
+  background: var(--surface);
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
   width: 100%;
   max-width: 960px;
   max-height: 90vh;
@@ -39,8 +39,8 @@
 
 /* Header */
 .nm-header {
-  padding: 20px 24px;
+  padding: var(--space-5) var(--space-6);
-  border-bottom: 2px solid #667eea;
+  border-bottom: 2px solid var(--accent);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -49,15 +49,15 @@
 
 .nm-header h2 {
   margin: 0;
-  color: #667eea;
+  color: var(--accent);
-  font-size: 22px;
+  font-size: var(--fs-2xl);
 }
 
 .nm-close-button {
   background: none;
   border: none;
-  font-size: 32px;
+  font-size: var(--fs-display);
-  color: #999;
+  color: var(--text-muted);
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -70,8 +70,8 @@
 }
 
 .nm-close-button:hover {
-  background: #f5f5f5;
+  background: var(--surface-sunken);
-  color: #333;
+  color: var(--text);
 }
 
 /* Body - two panels */
@@ -85,28 +85,28 @@
 /* Left panel */
 .nm-list-panel {
   width: 250px;
-  border-right: 1px solid #e0e0e0;
+  border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }
 
 .nm-add-btn {
-  margin: 12px;
+  margin: var(--space-3);
-  padding: 8px 16px;
+  padding: var(--space-2) var(--space-4);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
-  color: white;
+  color: var(--accent-contrast);
   border: none;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .nm-add-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .nm-list {
@@ -117,20 +117,20 @@
 .nm-list-item {
   display: flex;
   align-items: center;
-  padding: 10px 12px;
+  padding: var(--space-2-5) var(--space-3);
   cursor: pointer;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border);
   transition: background 0.15s;
   user-select: none;
 }
 
 .nm-list-item:hover {
-  background: #f5f5ff;
+  background: var(--accent-soft);
 }
 
 .nm-list-item--active {
-  background: #eef0ff;
+  background: var(--accent-soft);
-  border-left: 3px solid #667eea;
+  border-left: 3px solid var(--accent);
 }
 
 .nm-list-item--dragging {
@@ -139,7 +139,7 @@
 
 /* Inset shadow rather than a border, so the drop line adds no row height */
 .nm-list-item--drag-over {
-  box-shadow: inset 0 2px 0 #667eea;
+  box-shadow: inset 0 2px 0 var(--accent);
 }
 
 .nm-list-item-info {
@@ -149,9 +149,9 @@
 
 .nm-list-item-name {
   display: block;
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  font-size: 14px;
+  font-size: var(--fs-md);
-  color: #333;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -159,40 +159,40 @@
 
 .nm-list-item-meta {
   display: block;
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  color: #999;
+  color: var(--text-muted);
-  margin-top: 2px;
+  margin-top: var(--space-0-5);
 }
 
 .nm-edit-btn {
   background: none;
   border: none;
-  color: #999;
+  color: var(--text-muted);
-  font-size: 16px;
+  font-size: var(--fs-lg);
   cursor: pointer;
-  padding: 4px;
+  padding: var(--space-1);
   border-radius: 4px;
   transition: color 0.2s, background 0.2s;
   flex-shrink: 0;
 }
 
 .nm-edit-btn:hover {
-  color: #667eea;
+  color: var(--accent);
-  background: #f0f0ff;
+  background: var(--accent-soft);
 }
 
 .nm-loading {
-  padding: 20px;
+  padding: var(--space-5);
   text-align: center;
-  color: #999;
+  color: var(--text-muted);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .nm-empty {
-  padding: 16px;
+  padding: var(--space-4);
   text-align: center;
-  color: #999;
+  color: var(--text-muted);
-  font-size: 13px;
+  font-size: var(--fs-base);
 }
 
 /* Right panel */
@@ -207,51 +207,51 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: #999;
+  color: var(--text-muted);
-  font-size: 15px;
+  font-size: var(--fs-lg);
-  padding: 40px;
+  padding: var(--space-10);
   text-align: center;
 }
 
 .nm-form {
-  padding: 20px 24px;
+  padding: var(--space-5) var(--space-6);
 }
 
 .nm-form-title {
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #333;
+  color: var(--text);
-  margin-bottom: 16px;
+  margin-bottom: var(--space-4);
 }
 
 .nm-error {
-  background-color: #fee;
+  background-color: var(--danger-soft);
-  color: #c33;
+  color: var(--danger);
-  padding: 10px 14px;
+  padding: var(--space-2-5) var(--space-4);
   border-radius: 6px;
-  border: 1px solid #fcc;
+  border: 1px solid var(--danger);
-  font-size: 13px;
+  font-size: var(--fs-base);
-  margin-bottom: 14px;
+  margin-bottom: var(--space-4);
 }
 
 /* Form grid */
 .nm-form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  gap: var(--space-3);
-  margin-bottom: 20px;
+  margin-bottom: var(--space-5);
 }
 
 .nm-form-group {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
 }
 
 .nm-form-group label {
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #555;
+  color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--fs-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -259,61 +259,61 @@
 .nm-form-group input[type="text"],
 .nm-form-group input[type="number"],
 .nm-form-group select {
-  padding: 8px 10px;
+  padding: var(--space-2) var(--space-2-5);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
   transition: border-color 0.2s;
 }
 
 .nm-form-group input:focus,
 .nm-form-group select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-form-group input:disabled,
 .nm-form-group select:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 /* Sections */
 .nm-section {
-  margin-bottom: 20px;
+  margin-bottom: var(--space-5);
 }
 
 .nm-section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
-  padding-bottom: 6px;
+  padding-bottom: var(--space-1-5);
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border);
 }
 
 .nm-section-header h3 {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  color: #667eea;
+  color: var(--accent);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
 }
 
 .nm-section-add {
   background: none;
-  border: 1px solid #667eea;
+  border: 1px solid var(--accent);
-  color: #667eea;
+  color: var(--accent);
-  padding: 4px 10px;
+  padding: var(--space-1) var(--space-2-5);
   border-radius: 4px;
-  font-size: 12px;
+  font-size: var(--fs-sm);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
 }
 
 .nm-section-add:hover {
-  background: #667eea;
+  background: var(--accent);
-  color: white;
+  color: var(--accent-contrast);
 }
 
 .nm-section-add:disabled {
@@ -323,7 +323,7 @@
 
 /* Fields table */
 .nm-fields-table {
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border);
   border-radius: 6px;
   overflow: hidden;
 }
@@ -331,12 +331,12 @@
 .nm-fields-header {
   display: grid;
   grid-template-columns: 2fr 2fr 1.2fr 40px 32px;
-  gap: 6px;
+  gap: var(--space-1-5);
-  padding: 6px 8px;
+  padding: var(--space-1-5) var(--space-2);
-  background: #f8f8fc;
+  background: var(--surface-sunken);
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #666;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -344,38 +344,38 @@
 .nm-fields-row {
   display: grid;
   grid-template-columns: 2fr 2fr 1.2fr 40px 32px;
-  gap: 6px;
+  gap: var(--space-1-5);
-  padding: 6px 8px;
+  padding: var(--space-1-5) var(--space-2);
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--border);
   align-items: center;
 }
 
 .nm-fields-row input[type="text"] {
-  padding: 5px 8px;
+  padding: var(--space-1-5) var(--space-2);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
 
 .nm-fields-row input[type="text"]:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-fields-row select {
-  padding: 5px 4px;
+  padding: var(--space-1-5) var(--space-1);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
 
 .nm-fields-row select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-fields-row input[type="checkbox"] {
@@ -388,8 +388,8 @@
 .nm-remove-btn {
   background: none;
   border: none;
-  color: #ccc;
+  color: var(--border-strong);
-  font-size: 20px;
+  font-size: var(--fs-2xl);
   cursor: pointer;
   padding: 0;
   width: 24px;
@@ -402,8 +402,8 @@
 }
 
 .nm-remove-btn:hover:not(:disabled) {
-  color: #c33;
+  color: var(--danger);
-  background: #fee;
+  background: var(--danger-soft);
 }
 
 .nm-remove-btn:disabled {
@@ -415,51 +415,51 @@
 .nm-entries {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .nm-entry {
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  padding: 10px 12px;
+  padding: var(--space-2-5) var(--space-3);
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  gap: var(--space-2-5);
 }
 
 .nm-entry--inactive {
   opacity: 0.5;
-  background: #fafafa;
+  background: var(--surface-sunken);
 }
 
 .nm-entry-fields {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .nm-entry-field {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-0-5);
   min-width: 100px;
   flex: 1;
 }
 
 .nm-entry-field label {
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  color: #888;
+  color: var(--text-muted);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 
 .nm-entry-field input[type="text"],
 .nm-entry-field input[type="number"],
 .nm-entry-field select {
-  padding: 5px 8px;
+  padding: var(--space-1-5) var(--space-2);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
@@ -467,61 +467,61 @@
 .nm-entry-field input:focus,
 .nm-entry-field select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-entry-field input[type="checkbox"] {
   width: 16px;
   height: 16px;
-  margin-top: 4px;
+  margin-top: var(--space-1);
 }
 
 .nm-entry-actions {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
   flex-shrink: 0;
 }
 
 .nm-entry-save {
-  background: #667eea;
+  background: var(--accent);
-  color: white;
+  color: var(--accent-contrast);
   border: none;
-  padding: 4px 10px;
+  padding: var(--space-1) var(--space-2-5);
   border-radius: 4px;
-  font-size: 12px;
+  font-size: var(--fs-sm);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .nm-entry-save:hover {
-  background: #5568d3;
+  background: var(--accent-hover);
 }
 
 .nm-entry-toggle {
-  background: #e8f5e9;
+  background: var(--success-soft);
-  color: #2e7d32;
+  color: var(--success);
   border: none;
-  padding: 4px 10px;
+  padding: var(--space-1) var(--space-2-5);
   border-radius: 4px;
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .nm-entry-toggle:hover {
-  background: #c8e6c9;
+  background: color-mix(in srgb, var(--success) 25%, transparent);
 }
 
 .nm-entry-toggle--inactive {
-  background: #fff3e0;
+  background: var(--warning-soft);
-  color: #e65100;
+  color: var(--warning);
 }
 
 .nm-entry-toggle--inactive:hover {
-  background: #ffe0b2;
+  background: color-mix(in srgb, var(--warning) 25%, transparent);
 }
 
 /* Form actions */
@@ -529,49 +529,49 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 20px;
+  margin-top: var(--space-5);
-  padding-top: 16px;
+  padding-top: var(--space-4);
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--border);
 }
 
 .nm-form-actions-right {
   display: flex;
-  gap: 10px;
+  gap: var(--space-2-5);
   margin-left: auto;
 }
 
 .nm-cancel-btn {
-  padding: 8px 20px;
+  padding: var(--space-2) var(--space-5);
-  background: white;
+  background: var(--surface);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
-  color: #666;
+  color: var(--text-muted);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: border-color 0.2s, color 0.2s;
 }
 
 .nm-cancel-btn:hover:not(:disabled) {
-  border-color: #999;
+  border-color: var(--border-strong);
-  color: #333;
+  color: var(--text);
 }
 
 .nm-save-btn {
-  padding: 8px 24px;
+  padding: var(--space-2) var(--space-6);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
   border: none;
-  color: white;
+  color: var(--accent-contrast);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .nm-save-btn:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .nm-save-btn:disabled,
@@ -581,19 +581,19 @@
 }
 
 .nm-delete-btn {
-  padding: 8px 16px;
+  padding: var(--space-2) var(--space-4);
-  background: white;
+  background: var(--surface);
-  border: 1px solid #e57373;
+  border: 1px solid var(--danger);
-  color: #c33;
+  color: var(--danger);
   border-radius: 6px;
-  font-size: 13px;
+  font-size: var(--fs-base);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
 }
 
 .nm-delete-btn:hover:not(:disabled) {
-  background: #fee;
+  background: var(--danger-soft);
 }
 
 .nm-delete-btn:disabled {
@@ -617,7 +617,7 @@
     width: 100%;
     max-height: 200px;
     border-right: none;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border);
   }
 
   .nm-form-grid {
@@ -628,50 +628,50 @@
 /* --- Selector options editor --- */
 .nm-options-empty {
   margin: 0;
-  padding: 10px 8px;
+  padding: var(--space-2-5) var(--space-2);
-  font-size: 13px;
+  font-size: var(--fs-base);
-  color: #888;
+  color: var(--text-muted);
   line-height: 1.5;
 }
 
 .nm-option-row {
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--border);
-  padding: 8px;
+  padding: var(--space-2);
 }
 
 .nm-option-head {
   display: grid;
   grid-template-columns: 1fr 1fr 32px;
-  gap: 6px;
+  gap: var(--space-1-5);
   align-items: center;
 }
 
 .nm-option-head input[type="text"] {
-  padding: 5px 8px;
+  padding: var(--space-1-5) var(--space-2);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  font-size: 13px;
+  font-size: var(--fs-base);
   width: 100%;
   box-sizing: border-box;
 }
 
 .nm-option-head input[type="text"]:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .nm-option-remove {
   background: none;
   border: none;
-  color: #c0392b;
+  color: var(--danger);
-  font-size: 18px;
+  font-size: var(--fs-xl);
   cursor: pointer;
   padding: 0;
   line-height: 1;
 }
 
 .nm-option-remove:disabled {
-  color: #ccc;
+  color: var(--border-strong);
   cursor: not-allowed;
 }
 
@@ -679,14 +679,14 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-2-5);
-  margin-top: 6px;
+  margin-top: var(--space-1-5);
-  padding-left: 2px;
+  padding-left: var(--space-0-5);
 }
 
 .nm-option-reveals-label {
-  font-size: 12px;
+  font-size: var(--fs-sm);
-  color: #888;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -694,8 +694,8 @@
 .nm-option-reveal {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-1);
-  font-size: 13px;
+  font-size: var(--fs-base);
-  color: #333;
+  color: var(--text);
   cursor: pointer;
 }

frontend/src/components/NomenclatureUI/FormOverlay.css

@@ -5,7 +5,7 @@
     right: 0;
     bottom: 0;
     z-index: 13000;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,9 +21,9 @@
     width: 90%;
     max-width: 600px;
     max-height: 80vh;
-    background: white;
+    background: var(--surface);
     border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-overlay);
     display: flex;
     flex-direction: column;
     animation: nuiFormSlideUp 0.15s ease-out;
@@ -38,18 +38,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1rem 1.5rem;
+    padding: var(--space-4) var(--space-6);
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border);
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
     border-radius: 8px 8px 0 0;
     flex-shrink: 0;
 }
 
 .nui-form-modal-header h3 {
     margin: 0;
-    font-size: 1.1rem;
+    font-size: var(--fs-xl);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #333;
+    color: var(--text);
 }
 
 .nui-form-modal-close {
@@ -60,8 +60,8 @@
     justify-content: center;
     background: none;
     border: none;
-    font-size: 1.4rem;
+    font-size: var(--fs-2xl);
-    color: #666;
+    color: var(--text-muted);
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.2s, color 0.2s;
@@ -69,12 +69,12 @@
 }
 
 .nui-form-modal-close:hover {
-    background-color: #e9ecef;
+    background-color: var(--surface-hover);
-    color: #333;
+    color: var(--text);
 }
 
 .nui-form-modal-content {
-    padding: 1.5rem;
+    padding: var(--space-6);
     overflow-y: auto;
     flex: 1;
 }

frontend/src/components/NomenclatureUI/NomenclatureDropdown.css

@@ -1,13 +1,13 @@
 .nui-dropdown {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: var(--space-1);
 }
 
 .nui-dropdown-label {
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #555;
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -15,58 +15,58 @@
 .nui-dropdown-label--checkbox {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     cursor: pointer;
     text-transform: uppercase;
 }
 
 .nui-dropdown-row {
     display: flex;
-    gap: 4px;
+    gap: var(--space-1);
 }
 
 .nui-dropdown-select {
     flex: 1;
-    padding: 7px 10px;
+    padding: var(--space-2) var(--space-2-5);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 14px;
+    font-size: var(--fs-md);
-    background-color: white;
+    background-color: var(--surface);
-    color: #333;
+    color: var(--text);
     transition: border-color 0.2s;
     min-width: 0;
 }
 
 .nui-dropdown-select:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--accent);
 }
 
 .nui-dropdown-select:disabled {
-    background-color: #f0f0f0;
+    background-color: var(--surface-hover);
     cursor: not-allowed;
     opacity: 0.6;
 }
 
 .nui-dropdown-input {
     width: 100%;
-    padding: 7px 10px;
+    padding: var(--space-2) var(--space-2-5);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 14px;
+    font-size: var(--fs-md);
-    background-color: white;
+    background-color: var(--surface);
-    color: #333;
+    color: var(--text);
     transition: border-color 0.2s;
     box-sizing: border-box;
 }
 
 .nui-dropdown-input:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--accent);
 }
 
 .nui-dropdown-input:disabled {
-    background-color: #f0f0f0;
+    background-color: var(--surface-hover);
     cursor: not-allowed;
     opacity: 0.6;
 }
@@ -94,11 +94,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: white;
+    background: var(--surface);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 18px;
+    font-size: var(--fs-xl);
-    color: #666;
+    color: var(--text-muted);
     cursor: pointer;
     transition: all 0.2s;
     flex-shrink: 0;
@@ -107,9 +107,9 @@
 }
 
 .nui-dropdown-manage-btn:hover:not(:disabled) {
-    border-color: #667eea;
+    border-color: var(--accent);
-    color: #667eea;
+    color: var(--accent);
-    background-color: #f0f0ff;
+    background-color: var(--accent-soft);
 }
 
 .nui-dropdown-manage-btn:disabled {

frontend/src/components/NomenclatureUI/NomenclatureEntryForm.css

@@ -1,31 +1,31 @@
 .nui-entry-form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
 }
 
 .nui-entry-form-field {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--space-2);
 }
 
 .nui-entry-form-field > label {
-    font-weight: 500;
+    font-weight: var(--fw-medium);
-    color: #333;
+    color: var(--text);
-    font-size: 0.9rem;
+    font-size: var(--fs-md);
 }
 
 .nui-entry-form-field input[type="text"],
 .nui-entry-form-field input[type="number"],
 .nui-entry-form-field select {
     width: 100%;
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 4px;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
-    background-color: white;
+    background-color: var(--surface);
-    color: #333;
+    color: var(--text);
     transition: border-color 0.2s, box-shadow 0.2s;
     box-sizing: border-box;
 }
@@ -34,14 +34,14 @@
 .nui-entry-form-field input[type="number"]:focus,
 .nui-entry-form-field select:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--accent);
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
 .nui-entry-form-field input[type="text"]:disabled,
 .nui-entry-form-field input[type="number"]:disabled,
 .nui-entry-form-field select:disabled {
-    background-color: #f0f0f0;
+    background-color: var(--surface-hover);
     cursor: not-allowed;
     opacity: 0.6;
 }
@@ -58,23 +58,23 @@
 
 /* Error state */
 .nui-entry-form-input-error {
-    border-color: #dc3545 !important;
+    border-color: var(--danger) !important;
 }
 
 .nui-entry-form-error {
-    font-size: 0.8rem;
+    font-size: var(--fs-base);
-    color: #dc3545;
+    color: var(--danger);
 }
 
 /* Checkbox field */
 .nui-entry-form-checkbox-label {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     cursor: pointer;
-    font-weight: normal !important;
+    font-weight: var(--fw-regular) !important;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
-    color: #333;
+    color: var(--text);
 }
 
 .nui-entry-form-checkbox {
@@ -86,27 +86,27 @@
 /* Actions */
 .nui-entry-form-actions {
     display: flex;
-    gap: 0.75rem;
+    gap: var(--space-3);
     justify-content: flex-end;
-    margin-top: 1rem;
+    margin-top: var(--space-4);
-    padding-top: 1rem;
+    padding-top: var(--space-4);
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border);
 }
 
 .nui-entry-form-cancel {
-    background-color: #6c757d;
+    background-color: var(--text-muted);
-    color: white;
+    color: var(--text-inverse);
-    padding: 0.5rem 1.5rem;
+    padding: var(--space-2) var(--space-6);
     border: none;
     border-radius: 4px;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: background-color 0.2s, transform 0.1s;
 }
 
 .nui-entry-form-cancel:hover {
-    background-color: #5a6268;
+    background-color: var(--text);
 }
 
 .nui-entry-form-cancel:active {
@@ -114,19 +114,19 @@
 }
 
 .nui-entry-form-save {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--accent-gradient);
-    color: white;
+    color: var(--accent-contrast);
-    padding: 0.5rem 1.5rem;
+    padding: var(--space-2) var(--space-6);
     border: none;
     border-radius: 4px;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: box-shadow 0.2s, transform 0.1s;
 }
 
 .nui-entry-form-save:hover:not(:disabled) {
-    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 3px 8px var(--accent-soft);
 }
 
 .nui-entry-form-save:active:not(:disabled) {

frontend/src/components/NomenclatureUI/NomenclatureManagementOverlay.css

@@ -5,7 +5,7 @@
     right: 0;
     bottom: 0;
     z-index: 12000;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,9 +21,9 @@
     width: 90%;
     max-width: 1200px;
     max-height: 90vh;
-    background: white;
+    background: var(--surface);
     border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-overlay);
     display: flex;
     flex-direction: column;
     animation: nuiMgmtSlideUp 0.15s ease-out;
@@ -39,18 +39,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1rem 1.5rem;
+    padding: var(--space-4) var(--space-6);
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--border);
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
     border-radius: 8px 8px 0 0;
     flex-shrink: 0;
 }
 
 .nui-mgmt-header h2 {
     margin: 0;
-    font-size: 1.2rem;
+    font-size: var(--fs-xl);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #333;
+    color: var(--text);
 }
 
 .nui-mgmt-close {
@@ -61,8 +61,8 @@
     justify-content: center;
     background: none;
     border: none;
-    font-size: 1.5rem;
+    font-size: var(--fs-2xl);
-    color: #666;
+    color: var(--text-muted);
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.2s, color 0.2s;
@@ -70,60 +70,60 @@
 }
 
 .nui-mgmt-close:hover {
-    background-color: #e9ecef;
+    background-color: var(--surface-hover);
-    color: #333;
+    color: var(--text);
 }
 
 /* Toolbar */
 .nui-mgmt-toolbar {
     display: flex;
-    gap: 1rem;
+    gap: var(--space-4);
-    padding: 1rem 1.5rem;
+    padding: var(--space-4) var(--space-6);
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }
 
 .nui-mgmt-search {
     flex: 1;
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
-    border: 1px solid #ced4da;
+    border: 1px solid var(--border-strong);
     border-radius: 4px;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
     transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .nui-mgmt-search:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--accent);
-    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+    box-shadow: 0 0 0 0.2rem var(--accent-soft);
 }
 
 .nui-mgmt-add-btn {
-    background-color: #28a745;
+    background-color: var(--success);
-    color: white;
+    color: var(--text-inverse);
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     border: none;
     border-radius: 4px;
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: background-color 0.2s;
     white-space: nowrap;
 }
 
 .nui-mgmt-add-btn:hover {
-    background-color: #218838;
+    background-color: color-mix(in srgb, var(--success) 85%, var(--text));
 }
 
 /* Error */
 .nui-mgmt-error {
-    margin: 0.5rem 1.5rem;
+    margin: var(--space-2) var(--space-6);
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
-    background-color: #fee;
+    background-color: var(--danger-soft);
-    color: #c33;
+    color: var(--danger);
-    border: 1px solid #fcc;
+    border: 1px solid var(--danger);
     border-radius: 4px;
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
     flex-shrink: 0;
 }
 
@@ -141,17 +141,17 @@
 }
 
 .nui-mgmt-table-container::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--surface-sunken);
     border-radius: 4px;
 }
 
 .nui-mgmt-table-container::-webkit-scrollbar-thumb {
-    background: #888;
+    background: var(--text-muted);
     border-radius: 4px;
 }
 
 .nui-mgmt-table-container::-webkit-scrollbar-thumb:hover {
-    background: #555;
+    background: var(--text);
 }
 
 /* Table */
@@ -161,19 +161,19 @@
 }
 
 .nui-mgmt-table thead {
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
     position: sticky;
     top: 0;
     z-index: 1;
 }
 
 .nui-mgmt-table th {
-    padding: 0.6rem 1rem;
+    padding: var(--space-2-5) var(--space-4);
     text-align: left;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    color: #495057;
+    color: var(--text);
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 2px solid var(--border);
     white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: 0.3px;
@@ -195,16 +195,16 @@
 }
 
 .nui-mgmt-table td {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--border);
-    font-size: 0.95rem;
+    font-size: var(--fs-lg);
-    color: #333;
+    color: var(--text);
 }
 
 .nui-mgmt-td-id {
     text-align: center;
-    color: #888;
+    color: var(--text-muted);
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
 }
 
 .nui-mgmt-td-status {
@@ -222,15 +222,15 @@
 }
 
 .nui-mgmt-row:hover {
-    background-color: #f0f0ff;
+    background-color: var(--surface-hover);
 }
 
 .nui-mgmt-row--selected {
-    background-color: #e8eaff;
+    background-color: var(--accent-soft);
 }
 
 .nui-mgmt-row--selected:hover {
-    background-color: #dcdeff;
+    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 .nui-mgmt-row--inactive {
@@ -239,7 +239,7 @@
 
 .nui-mgmt-row--inactive td {
     text-decoration: line-through;
-    color: #999;
+    color: var(--text-muted);
 }
 
 .nui-mgmt-row--inactive .nui-mgmt-td-id,
@@ -251,56 +251,56 @@
 /* Active badge */
 .nui-mgmt-active-badge {
     display: inline-block;
-    padding: 2px 8px;
+    padding: var(--space-0-5) var(--space-2);
     border-radius: 10px;
-    font-size: 0.75rem;
+    font-size: var(--fs-sm);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: all 0.2s;
     user-select: none;
 }
 
 .nui-mgmt-active-badge--active {
-    background-color: #d4edda;
+    background-color: var(--success-soft);
-    color: #155724;
+    color: var(--success);
 }
 
 .nui-mgmt-active-badge--active:hover {
-    background-color: #c3e6cb;
+    background-color: color-mix(in srgb, var(--success) 25%, transparent);
 }
 
 .nui-mgmt-active-badge--inactive {
-    background-color: #f8d7da;
+    background-color: var(--danger-soft);
-    color: #721c24;
+    color: var(--danger);
 }
 
 .nui-mgmt-active-badge--inactive:hover {
-    background-color: #f5c6cb;
+    background-color: color-mix(in srgb, var(--danger) 25%, transparent);
 }
 
 /* Edit button in row */
 .nui-mgmt-edit-btn {
     background: none;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--border);
-    padding: 0.2rem 0.5rem;
+    padding: var(--space-1) var(--space-2);
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
-    color: #666;
+    color: var(--text-muted);
 }
 
 .nui-mgmt-edit-btn:hover {
-    background-color: #e9ecef;
+    background-color: var(--surface-hover);
-    border-color: #adb5bd;
+    border-color: var(--border-strong);
-    color: #333;
+    color: var(--text);
 }
 
 /* Empty state */
 .nui-mgmt-empty {
     text-align: center;
-    padding: 2rem !important;
+    padding: var(--space-8) !important;
-    color: #999;
+    color: var(--text-muted);
     font-style: italic;
 }
 
@@ -309,75 +309,75 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1.5rem;
+    padding: var(--space-4) var(--space-6);
-    border-top: 1px solid #dee2e6;
+    border-top: 1px solid var(--border);
-    background-color: #f8f9fa;
+    background-color: var(--surface-sunken);
     border-radius: 0 0 8px 8px;
     flex-shrink: 0;
 }
 
 .nui-mgmt-footer-info {
-    font-size: 0.85rem;
+    font-size: var(--fs-md);
-    color: #666;
+    color: var(--text-muted);
 }
 
 .nui-mgmt-footer-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
 }
 
 .nui-mgmt-footer-edit-btn {
     background: none;
-    border: 1px solid #667eea;
+    border: 1px solid var(--accent);
-    color: #667eea;
+    color: var(--accent);
-    padding: 0.4rem 1rem;
+    padding: var(--space-1-5) var(--space-4);
     border-radius: 4px;
-    font-size: 0.9rem;
+    font-size: var(--fs-md);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: all 0.2s;
 }
 
 .nui-mgmt-footer-edit-btn:hover {
-    background-color: #667eea;
+    background-color: var(--accent);
-    color: white;
+    color: var(--accent-contrast);
 }
 
 .nui-mgmt-delete-btn {
     background: none;
-    border: 1px solid #dc3545;
+    border: 1px solid var(--danger);
-    color: #dc3545;
+    color: var(--danger);
-    padding: 0.4rem 1rem;
+    padding: var(--space-1-5) var(--space-4);
     border-radius: 4px;
-    font-size: 0.9rem;
+    font-size: var(--fs-md);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: all 0.2s;
 }
 
 .nui-mgmt-delete-btn:hover {
-    background-color: #dc3545;
+    background-color: var(--danger);
-    color: white;
+    color: var(--text-inverse);
 }
 
 .nui-mgmt-select-btn {
-    background-color: #667eea;
+    background-color: var(--accent);
-    color: white;
+    color: var(--accent-contrast);
-    padding: 0.4rem 1.5rem;
+    padding: var(--space-1-5) var(--space-6);
     border: none;
     border-radius: 4px;
-    font-size: 0.9rem;
+    font-size: var(--fs-md);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     cursor: pointer;
     transition: background-color 0.2s;
 }
 
 .nui-mgmt-select-btn:hover:not(:disabled) {
-    background-color: #5568d3;
+    background-color: var(--accent-hover);
 }
 
 .nui-mgmt-select-btn:disabled {
-    background-color: #6c757d;
+    background-color: var(--text-muted);
     opacity: 0.6;
     cursor: not-allowed;
 }

frontend/src/components/RailLayout.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import NavRail from './NavRail';
+
+// Shell for every screen that carries the navigation rail. Mounted once as a
+// layout route, so the rail does not remount (and lose an open menu) when the
+// user moves between the pages inside it.
+function RailLayout() {
+  return (
+    <div className="app-shell">
+      <main className="app-shell-content">
+        <Outlet />
+      </main>
+      <NavRail />
+    </div>
+  );
+}
+
+export default RailLayout;

frontend/src/components/ReportEditor/CharacterPalette.css

@@ -4,9 +4,9 @@
   top: 0;
   width: 300px;
   height: 100vh;
-  background: white;
+  background: var(--surface);
-  border-left: 1px solid #ccc;
+  border-left: 1px solid var(--border-strong);
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-raised);
   overflow-y: auto;
   z-index: 1000;
   display: flex;
@@ -17,9 +17,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: var(--space-4);
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border);
-  background: #f9f9f9;
+  background: var(--surface-sunken);
   position: sticky;
   top: 0;
   z-index: 10;
@@ -27,41 +27,41 @@
 
 .palette-header h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  color: #333;
+  color: var(--text);
 }
 
 .close-button {
   background: transparent;
   border: none;
-  font-size: 20px;
+  font-size: var(--fs-2xl);
   cursor: pointer;
-  color: #666;
+  color: var(--text-muted);
-  padding: 5px 10px;
+  padding: var(--space-1-5) var(--space-2-5);
   line-height: 1;
 }
 
 .close-button:hover {
-  color: #333;
+  color: var(--text);
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--surface-hover);
   border-radius: 3px;
 }
 
 .palette-content {
   flex: 1;
   overflow-y: auto;
-  padding: 10px;
+  padding: var(--space-2-5);
 }
 
 .palette-category {
-  margin-bottom: 10px;
+  margin-bottom: var(--space-2-5);
 }
 
 .category-header {
   display: flex;
   align-items: center;
-  padding: 10px;
+  padding: var(--space-2-5);
-  background: #f5f5f5;
+  background: var(--surface-sunken);
   cursor: pointer;
   border-radius: 4px;
   user-select: none;
@@ -69,32 +69,32 @@
 }
 
 .category-header:hover {
-  background: #e8e8e8;
+  background: var(--surface-hover);
 }
 
 .category-header.expanded {
-  background: #667eea;
+  background: var(--accent);
-  color: white;
+  color: var(--accent-contrast);
 }
 
 .category-icon {
-  margin-right: 8px;
+  margin-right: var(--space-2);
-  font-size: 12px;
+  font-size: var(--fs-sm);
   width: 12px;
   display: inline-block;
 }
 
 .category-name {
-  font-weight: 500;
+  font-weight: var(--fw-medium);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .character-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
-  gap: 5px;
+  gap: var(--space-1-5);
-  padding: 10px;
+  padding: var(--space-2-5);
-  background: #fafafa;
+  background: var(--surface-sunken);
   border-radius: 0 0 4px 4px;
 }
 
@@ -104,27 +104,27 @@
   justify-content: center;
   width: 40px;
   height: 40px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
-  background: white;
+  background: var(--surface);
   cursor: pointer;
-  font-size: 24px;
+  font-size: var(--fs-2xl);
-  font-family: 'Courier New', 'Consolas', monospace;
+  font-family: var(--font-mono);
   transition: all 0.2s;
   border-radius: 3px;
   user-select: none;
 }
 
 .char-button:hover {
-  border-color: #667eea;
+  border-color: var(--accent);
-  background: #f0f0ff;
+  background: var(--accent-soft);
   transform: scale(1.1);
 }
 
 .char-button.active {
-  background: #667eea;
+  background: var(--accent);
-  color: white;
+  color: var(--accent-contrast);
-  border-color: #667eea;
+  border-color: var(--accent);
-  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 2px 4px var(--accent-soft);
 }
 
 /* Scrollbar styling */
@@ -135,16 +135,16 @@
 
 .character-palette::-webkit-scrollbar-track,
 .palette-content::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--surface-sunken);
 }
 
 .character-palette::-webkit-scrollbar-thumb,
 .palette-content::-webkit-scrollbar-thumb {
-  background: #c0c0c0;
+  background: var(--border-strong);
   border-radius: 4px;
 }
 
 .character-palette::-webkit-scrollbar-thumb:hover,
 .palette-content::-webkit-scrollbar-thumb:hover {
-  background: #a0a0a0;
+  background: var(--text-muted);
 }

frontend/src/components/ReportEditor/ConfigPanel.css

@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,38 +12,38 @@
 }
 
 .config-panel {
-  background: white;
+  background: var(--surface);
   border-radius: 8px;
   width: 90%;
   max-width: 600px;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
 }
 
 .config-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
+  padding: var(--space-5);
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--header-bg);
-  color: white;
+  color: var(--header-text);
   border-radius: 8px 8px 0 0;
 }
 
 .config-panel-header h2 {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--fs-2xl);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
 }
 
 .close-button {
   background: none;
   border: none;
-  color: white;
+  color: var(--header-text);
-  font-size: 32px;
+  font-size: var(--fs-display);
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -56,70 +56,70 @@
 }
 
 .close-button:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--header-chrome);
 }
 
 .config-panel-content {
-  padding: 20px;
+  padding: var(--space-5);
   overflow-y: auto;
   flex: 1;
 }
 
 .config-section {
-  margin-bottom: 24px;
+  margin-bottom: var(--space-6);
 }
 
 .config-section h3 {
-  margin: 0 0 12px 0;
+  margin: 0 0 var(--space-3) 0;
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #333;
+  color: var(--text);
 }
 
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: var(--space-3);
 }
 
 .input-group {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .config-input {
   flex: 1;
-  padding: 10px 12px;
+  padding: var(--space-2-5) var(--space-3);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-family: 'Courier New', monospace;
+  font-family: var(--font-mono);
 }
 
 .config-input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .config-input:disabled {
-  background: #f5f5f5;
+  background: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 .config-button {
-  padding: 10px 16px;
+  padding: var(--space-2-5) var(--space-4);
-  background: #f0f0f0;
+  background: var(--surface-sunken);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .config-button:hover:not(:disabled) {
-  background: #e0e0e0;
+  background: var(--surface-hover);
   transform: translateY(-1px);
 }
 
@@ -129,8 +129,8 @@
 }
 
 .config-button.primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
-  color: white;
+  color: var(--accent-contrast);
   border-color: transparent;
 }
 
@@ -139,65 +139,65 @@
 }
 
 .config-button.small {
-  padding: 6px 12px;
+  padding: var(--space-1-5) var(--space-3);
-  font-size: 12px;
+  font-size: var(--fs-sm);
 }
 
 .config-error {
-  margin-top: 8px;
+  margin-top: var(--space-2);
-  padding: 12px;
+  padding: var(--space-3);
-  background: #fee;
+  background: var(--danger-soft);
-  border: 1px solid #fcc;
+  border: 1px solid var(--danger);
   border-radius: 6px;
-  color: #c33;
+  color: var(--danger);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .config-info {
-  padding: 16px;
+  padding: var(--space-4);
-  background: #f0f8ff;
+  background: var(--accent-soft);
-  border: 1px solid #d0e8ff;
+  border: 1px solid var(--accent);
   border-radius: 6px;
-  color: #0066cc;
+  color: var(--accent);
-  font-size: 14px;
+  font-size: var(--fs-md);
   text-align: center;
 }
 
 .manual-input-section {
-  margin-top: 12px;
+  margin-top: var(--space-3);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .manual-data-input {
-  padding: 10px 12px;
+  padding: var(--space-2-5) var(--space-3);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-family: 'Courier New', monospace;
+  font-family: var(--font-mono);
   resize: vertical;
   min-height: 120px;
 }
 
 .manual-data-input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .data-preview {
   max-height: 300px;
   overflow-y: auto;
-  padding: 12px;
+  padding: var(--space-3);
-  background: #f5f5f5;
+  background: var(--surface-sunken);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 6px;
 }
 
 .data-preview pre {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--fs-sm);
-  font-family: 'Courier New', monospace;
+  font-family: var(--font-mono);
   white-space: pre-wrap;
   word-wrap: break-word;
 }

frontend/src/components/ReportEditor/EditorCanvas.css

@@ -3,8 +3,8 @@
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  padding: 20px;
+  padding: var(--space-5);
-  background: #f5f5f5;
+  background: var(--surface-sunken);
   overflow: auto;
 }
 
@@ -13,6 +13,7 @@
   width: 1440px;
   height: 2112px;
   background: white;
+  color: #000;
   border: 1px solid #ccc;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   font-family: 'Courier New', 'Consolas', monospace;
@@ -58,8 +59,8 @@
 
 .frame-preview {
   position: absolute;
-  border: 2px dashed #667eea;
+  border: 2px dashed var(--accent);
-  background: rgba(102, 126, 234, 0.1);
+  background: var(--accent-soft);
   pointer-events: none;
   box-sizing: border-box;
 }
@@ -74,8 +75,8 @@
 
 .selection-rectangle {
   position: absolute;
-  border: 2px dashed #667eea;
+  border: 2px dashed var(--accent);
-  background: rgba(102, 126, 234, 0.1);
+  background: var(--accent-soft);
   pointer-events: none;
   box-sizing: border-box;
   z-index: 100;

frontend/src/components/ReportEditor/ObjectInspector.css

@@ -4,93 +4,93 @@
   top: 0;
   width: 250px;
   height: 100vh;
-  background: #f5f5f5;
+  background: var(--surface-sunken);
-  border-right: 1px solid #ddd;
+  border-right: 1px solid var(--border);
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-raised);
   overflow-y: auto;
-  font-family: Arial, sans-serif;
+  font-family: var(--font-sans);
-  font-size: 13px;
+  font-size: var(--fs-base);
   z-index: 1000;
 }
 
 .inspector-header {
-  background: #e0e0e0;
+  background: var(--surface-hover);
-  padding: 10px;
+  padding: var(--space-2-5);
-  font-weight: bold;
+  font-weight: var(--fw-bold);
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--border-strong);
 }
 
 .inspector-empty {
-  padding: 20px;
+  padding: var(--space-5);
-  color: #999;
+  color: var(--text-muted);
   text-align: center;
 }
 
 .inspector-section {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--border);
-  padding: 10px;
+  padding: var(--space-2-5);
 }
 
 .section-title {
-  font-weight: bold;
+  font-weight: var(--fw-bold);
-  margin-bottom: 10px;
+  margin-bottom: var(--space-2-5);
-  color: #555;
+  color: var(--text-muted);
 }
 
 .property-row {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
 }
 
 .property-row label {
   flex: 0 0 70px;
-  color: #666;
+  color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--fs-sm);
 }
 
 .property-row input,
 .property-row select {
   flex: 1;
-  padding: 4px 6px;
+  padding: var(--space-1) var(--space-1-5);
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-strong);
   border-radius: 3px;
-  font-size: 12px;
+  font-size: var(--fs-sm);
 }
 
 .property-row input:disabled {
-  background: #e0e0e0;
+  background: var(--surface-hover);
-  color: #999;
+  color: var(--text-muted);
 }
 
 .property-row select:disabled {
-  background: #e0e0e0;
+  background: var(--surface-hover);
-  color: #999;
+  color: var(--text-muted);
 }
 
 .property-row input:focus,
 .property-row select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .expr-btn-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 3px;
+  gap: var(--space-1);
-  margin-bottom: 6px;
+  margin-bottom: var(--space-1-5);
 }
 
 .expr-btn-row button {
-  padding: 2px 6px;
+  padding: var(--space-0-5) var(--space-1-5);
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-strong);
   border-radius: 3px;
   cursor: pointer;
-  background: #fff;
+  background: var(--surface);
 }
 
 .expr-btn-row button:hover {
-  background: #e8eeff;
+  background: var(--accent-soft);
-  border-color: #667eea;
+  border-color: var(--accent);
 }

frontend/src/components/ReportEditor/ObjectInspector.jsx

@@ -176,11 +176,11 @@ function ObjectInspector({ element, onUpdate, allElements = [] }) {
           {parentBand ? (
             <>
               <div className="property-info" style={{
-                fontSize: '11px',
+                fontSize: 'var(--fs-xs)',
-                color: '#667eea',
+                color: 'var(--accent)',
-                marginBottom: '8px',
+                marginBottom: 'var(--space-2)',
-                padding: '6px',
+                padding: 'var(--space-1-5)',
-                background: 'rgba(102, 126, 234, 0.1)',
+                background: 'var(--accent-soft)',
                 borderRadius: '3px'
               }}>
                 {parentBand.parentBandId ? (

frontend/src/components/ReportEditor/ReportEditor.css

@@ -18,7 +18,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,74 +26,74 @@
 }
 
 .load-dialog {
-  background: white;
+  background: var(--surface);
   border-radius: 8px;
   width: 500px;
   max-width: 90vw;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-overlay);
 }
 
 .load-dialog-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 20px;
+  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--border);
 }
 
 .load-dialog-header h2 {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--fs-xl);
-  color: #333;
+  color: var(--text);
 }
 
 .load-dialog-close {
   background: none;
   border: none;
-  font-size: 24px;
+  font-size: var(--fs-2xl);
   cursor: pointer;
-  color: #999;
+  color: var(--text-muted);
   padding: 0;
   line-height: 1;
 }
 
 .load-dialog-close:hover {
-  color: #333;
+  color: var(--text);
 }
 
 .load-dialog-actions {
-  padding: 12px 20px;
+  padding: var(--space-3) var(--space-5);
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--border);
 }
 
 .load-dialog-new-btn {
-  padding: 8px 16px;
+  padding: var(--space-2) var(--space-4);
-  background: #667eea;
+  background: var(--accent);
-  color: white;
+  color: var(--accent-contrast);
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .load-dialog-new-btn:hover {
-  background: #5a6fd6;
+  background: var(--accent-hover);
 }
 
 .load-dialog-content {
   flex: 1;
   overflow-y: auto;
-  padding: 12px 0;
+  padding: var(--space-3) 0;
 }
 
 .load-dialog-loading,
 .load-dialog-empty {
-  padding: 40px 20px;
+  padding: var(--space-10) var(--space-5);
   text-align: center;
-  color: #999;
+  color: var(--text-muted);
 }
 
 .load-dialog-list {
@@ -105,47 +105,47 @@
 .load-dialog-item {
   display: flex;
   align-items: center;
-  padding: 12px 20px;
+  padding: var(--space-3) var(--space-5);
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border);
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .load-dialog-item:hover {
-  background: #f8f8f8;
+  background: var(--surface-hover);
 }
 
 .load-dialog-item--current {
-  background: #e8f0ff;
+  background: var(--accent-soft);
 }
 
 .load-dialog-item--current:hover {
-  background: #dde8ff;
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 .load-dialog-item-info {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
 }
 
 .load-dialog-item-name {
-  font-weight: 500;
+  font-weight: var(--fw-medium);
-  color: #333;
+  color: var(--text);
 }
 
 .load-dialog-item-date {
-  font-size: 12px;
+  font-size: var(--fs-sm);
-  color: #999;
+  color: var(--text-muted);
 }
 
 .load-dialog-item-delete {
   background: none;
   border: none;
-  font-size: 16px;
+  font-size: var(--fs-lg);
   cursor: pointer;
-  padding: 4px 8px;
+  padding: var(--space-1) var(--space-2);
   opacity: 0.5;
   transition: opacity 0.2s;
 }

frontend/src/components/ReportEditor/Toolbar.css

@@ -1,54 +1,54 @@
 .toolbar {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--header-bg);
-  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-raised);
-  gap: 16px;
+  gap: var(--space-4);
 }
 
 .toolbar-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .toolbar-separator {
   width: 1px;
   height: 32px;
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--header-chrome-border);
 }
 
 .toolbar-label {
-  color: white;
+  color: var(--header-text);
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
-  margin-right: 4px;
+  margin-right: var(--space-1);
 }
 
 .toolbar-button {
-  padding: 8px 16px;
+  padding: var(--space-2) var(--space-4);
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--header-chrome);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid var(--header-chrome-border);
-  color: white;
+  color: var(--header-text);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
 }
 
 .toolbar-button:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--header-chrome-hover);
   transform: translateY(-1px);
 }
 
 .toolbar-button.active {
-  background: rgba(255, 255, 255, 0.4);
+  background: color-mix(in srgb, var(--header-text) 40%, transparent);
-  border-color: rgba(255, 255, 255, 0.5);
+  border-color: color-mix(in srgb, var(--header-text) 50%, transparent);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-raised);
 }
 
 .toolbar-button:disabled {
@@ -62,21 +62,21 @@
 }
 
 .toolbar-report-name {
-  padding: 8px 12px;
+  padding: var(--space-2) var(--space-3);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--surface);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid var(--header-chrome-border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
   width: 200px;
-  color: #333;
+  color: var(--text);
 }
 
 .toolbar-report-name::placeholder {
-  color: #999;
+  color: var(--text-muted);
 }
 
 .toolbar-report-name:focus {
   outline: none;
-  border-color: rgba(255, 255, 255, 0.6);
+  border-color: color-mix(in srgb, var(--header-text) 60%, transparent);
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 2px var(--header-chrome);
 }

frontend/src/components/ReportEditor/a4/A4Canvas.css

@@ -3,8 +3,8 @@
 .a4-canvas-container {
   flex: 1;
   overflow: auto;
-  background: #8a8a8a;
+  background: var(--desk);
-  padding: 24px;
+  padding: var(--space-6);
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -13,6 +13,7 @@
 .a4-page {
   position: relative;
   background: #fff;
+  color: #000;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
   flex: none;
 }
@@ -102,8 +103,8 @@
 /* Rubber-band selection rectangle */
 .a4-selection-rectangle {
   position: absolute;
-  border: 1px dashed #667eea;
+  border: 1px dashed var(--accent);
-  background: rgba(102, 126, 234, 0.12);
+  background: var(--accent-soft);
   pointer-events: none;
   z-index: 15;
 }
@@ -126,13 +127,13 @@
 
 .a4-preview-page-break {
   width: 100%;
-  padding: 6px 0 14px;
+  padding: var(--space-1-5) 0 var(--space-4);
   text-align: center;
-  font-family: system-ui, sans-serif;
+  font-family: var(--font-sans);
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  color: #e8e8e8;
+  color: var(--desk-text);
-  border-top: 1px dashed rgba(255, 255, 255, 0.4);
+  border-top: 1px dashed color-mix(in srgb, var(--desk-text) 40%, transparent);
-  margin-top: 14px;
+  margin-top: var(--space-4);
 }
 
 .a4-preview-el {

frontend/src/components/ReportEditor/a4/A4Inspector.css

@@ -2,36 +2,36 @@
 
 .a4-inspector .mm-suffix {
   flex: 0 0 auto;
-  margin-left: 6px;
+  margin-left: var(--space-1-5);
-  color: #999;
+  color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--fs-xs);
 }
 
 .a4-inspector .a4-style-buttons {
   flex: 1;
   display: flex;
-  gap: 4px;
+  gap: var(--space-1);
 }
 
 .a4-inspector .a4-style-btn {
   flex: 1;
-  padding: 4px 0;
+  padding: var(--space-1) 0;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-strong);
   border-radius: 3px;
-  background: #fff;
+  background: var(--surface);
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--fs-sm);
 }
 
 .a4-inspector .a4-style-btn:hover {
-  background: #e8eeff;
+  background: var(--accent-soft);
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .a4-inspector .a4-style-btn.active {
-  background: #667eea;
+  background: var(--accent);
-  border-color: #667eea;
+  border-color: var(--accent);
-  color: #fff;
+  color: var(--accent-contrast);
 }
 
 .a4-inspector input[type="color"] {
@@ -42,16 +42,16 @@
 .a4-inspector .a4-expression-input {
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: 4px;
+  margin-bottom: var(--space-1);
-  font-family: monospace;
+  font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: var(--fs-xs);
   resize: vertical;
 }
 
 .a4-inspector .inspector-hint {
-  padding: 2px 0 6px;
+  padding: var(--space-0-5) 0 var(--space-1-5);
-  color: #999;
+  color: var(--text-muted);
-  font-size: 10px;
+  font-size: var(--fs-xs);
   line-height: 1.3;
 }
 

frontend/src/components/ReportEditor/a4/A4KindChooser.css

@@ -3,7 +3,7 @@
 .a4-kind-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,44 +11,44 @@
 }
 
 .a4-kind-dialog {
-  background: #fff;
+  background: var(--surface);
   border-radius: 8px;
   width: 460px;
   max-width: 92vw;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
 }
 
 .a4-kind-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 18px;
+  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border);
 }
 
 .a4-kind-header h2 {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  color: #333;
+  color: var(--text);
 }
 
 .a4-kind-close {
   border: none;
   background: none;
-  font-size: 22px;
+  font-size: var(--fs-2xl);
   line-height: 1;
-  color: #888;
+  color: var(--text-muted);
   cursor: pointer;
 }
 
 .a4-kind-close:hover {
-  color: #333;
+  color: var(--text);
 }
 
 .a4-kind-options {
   display: flex;
-  gap: 12px;
+  gap: var(--space-3);
-  padding: 18px;
+  padding: var(--space-5);
 }
 
 .a4-kind-option {
@@ -56,45 +56,45 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 6px;
+  gap: var(--space-1-5);
-  padding: 16px;
+  padding: var(--space-4);
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #fafafa;
+  background: var(--surface-sunken);
   cursor: pointer;
   text-align: left;
   font: inherit;
 }
 
 .a4-kind-option:hover {
-  border-color: #667eea;
+  border-color: var(--accent);
-  background: #f0f3ff;
+  background: var(--accent-soft);
 }
 
 .a4-kind-option-icon {
-  font-size: 22px;
+  font-size: var(--fs-2xl);
 }
 
 .a4-kind-option-title {
-  font-size: 14px;
+  font-size: var(--fs-md);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #333;
+  color: var(--text);
 }
 
 .a4-kind-option-desc {
-  font-size: 11px;
+  font-size: var(--fs-xs);
   line-height: 1.45;
-  color: #777;
+  color: var(--text-muted);
 }
 
 /* Cross-kind group in the load dialog — dimmed, because these are reports the
    current editor cannot open; clicking one navigates to the other editor. */
 .load-dialog-group-title {
-  padding: 10px 4px 4px;
+  padding: var(--space-2-5) var(--space-1) var(--space-1);
-  font-size: 11px;
+  font-size: var(--fs-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #999;
+  color: var(--text-muted);
 }
 
 .load-dialog-item--other {
@@ -106,12 +106,12 @@
 }
 
 .load-dialog-kind-badge {
-  margin-left: 8px;
+  margin-left: var(--space-2);
-  padding: 1px 6px;
+  padding: 1px var(--space-1-5);
   border-radius: 9px;
-  background: #e8e8e8;
+  background: var(--surface-hover);
-  color: #666;
+  color: var(--text-muted);
-  font-size: 10px;
+  font-size: var(--fs-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   vertical-align: middle;

frontend/src/components/ReportEditor/a4/A4PageSetup.css

@@ -4,7 +4,7 @@
 .a4-page-setup-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,55 +12,55 @@
 }
 
 .a4-page-setup {
-  background: #fff;
+  background: var(--surface);
   border-radius: 8px;
   width: 340px;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
 }
 
 .a4-page-setup-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 18px;
+  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border);
 }
 
 .a4-page-setup-header h2 {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  color: #333;
+  color: var(--text);
 }
 
 .a4-page-setup-close {
   border: none;
   background: none;
-  font-size: 22px;
+  font-size: var(--fs-2xl);
   line-height: 1;
-  color: #888;
+  color: var(--text-muted);
   cursor: pointer;
 }
 
 .a4-page-setup-close:hover {
-  color: #333;
+  color: var(--text);
 }
 
 .a4-page-setup-body {
-  padding: 8px 18px 18px;
+  padding: var(--space-2) var(--space-5) var(--space-5);
   overflow-y: auto;
 }
 
 .a4-page-setup-dims,
 .a4-page-setup-hint {
-  font-size: 11px;
+  font-size: var(--fs-xs);
-  color: #888;
+  color: var(--text-muted);
-  margin-top: 6px;
+  margin-top: var(--space-1-5);
   line-height: 1.4;
 }
 
 .a4-page-setup-dims {
-  color: #667eea;
+  color: var(--accent);
 }

frontend/src/components/ReportEditor/a4/A4ReportEditor.css

@@ -6,16 +6,16 @@
 }
 
 .toolbar-zoom {
-  padding: 8px 10px;
+  padding: var(--space-2) var(--space-2-5);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--surface);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid var(--header-chrome-border);
   border-radius: 6px;
-  font-size: 14px;
+  font-size: var(--fs-md);
-  color: #333;
+  color: var(--text);
   cursor: pointer;
 }
 
 .toolbar-zoom:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 2px var(--header-chrome);
 }

frontend/src/components/ReportEditor/a4/__tests__/a4EntryPoints.test.js

@@ -83,14 +83,17 @@ const click = (el) =>
   act(() => { el.dispatchEvent(new MouseEvent('click', { bubbles: true })); });
 
 // ---------------------------------------------------------------------------
-// Main.jsx's Print / Design Notice dispatch
+// notice_report lookup + route-by-kind dispatch
 // ---------------------------------------------------------------------------
 
 /**
- * The branch under test, mirroring Main.jsx's handlePrintNotice /
+ * The branch under test: the notice_report lookup (Main.jsx's
- * handleDesignNotice. Kept as one function so a change to the real dispatch
+ * fetchNoticeReport, used by handlePrintNotice) and the route-by-kind rule
- * that is not made here shows up as an obviously stale test rather than a
+ * the preview modal's design action (ReportPreviewModal's goDesign) applies.
- * passing one.
+ * Main.jsx no longer has a Design Notice button; the editors stay reachable
+ * from the header and the preview modal. Kept as one function so a change to
+ * the real dispatch that is not made here shows up as an obviously stale test
+ * rather than a passing one.
  */
 async function noticeDispatch({ onModal, onA4Print, onNavigate }) {
   const res = await api.get('/api/reports/?name=notice_report');
@@ -106,7 +109,7 @@ async function noticeDispatch({ onModal, onA4Print, onNavigate }) {
   return { found: true, kind: report.kind };
 }
 
-describe('Print / Design Notice dispatch', () => {
+describe('notice_report dispatch', () => {
   test('a matrix notice_report opens the existing modal, not the A4 print path', async () => {
     api.get.mockResolvedValueOnce({
       data: [{ id: 1, name: 'notice_report', kind: 'matrix', elements: [] }]
@@ -120,7 +123,7 @@ describe('Print / Design Notice dispatch', () => {
     expect(out).toEqual({ found: true, kind: 'matrix' });
     expect(onModal).toHaveBeenCalledTimes(1);
     expect(onA4Print).not.toHaveBeenCalled();
-    // Design Notice must route to the MATRIX editor for a matrix report.
+    // Designing must route to the MATRIX editor for a matrix report.
     expect(onNavigate).toHaveBeenCalledWith('/report-editor');
   });
 

frontend/src/components/ReportEditor/a4/print/print.css

@@ -36,6 +36,7 @@
   position: relative;
   overflow: hidden;
   background: #fff;
+  color: #000;
   page-break-after: always;
   break-after: page;
 }

frontend/src/components/ReportPreviewModal.css

@@ -1,7 +1,7 @@
 .report-preview-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--backdrop);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -23,24 +23,24 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 16px;
+    padding: var(--space-2-5) var(--space-4);
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }
 
 .report-preview-switcher {
     display: flex;
-    gap: 4px;
+    gap: var(--space-1);
 }
 
 .report-preview-switch-btn {
-    padding: 6px 14px;
+    padding: var(--space-1-5) var(--space-4);
     background: var(--surface-hover);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: var(--fs-base);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
@@ -61,13 +61,13 @@
 }
 
 .report-preview-download-btn {
-    padding: 6px 14px;
+    padding: var(--space-1-5) var(--space-4);
     background: none;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: var(--fs-base);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
@@ -84,38 +84,38 @@
 .report-preview-body {
     overflow: auto;
     flex: 1;
-    padding: 8px;
+    padding: var(--space-2);
     background: var(--surface-sunken);
 }
 
 .report-preview-error {
-    padding: 24px;
+    padding: var(--space-6);
     color: var(--danger);
-    font-size: 14px;
+    font-size: var(--fs-md);
 }
 
 .report-preview-loading {
-    padding: 24px;
+    padding: var(--space-6);
     color: var(--text-muted);
-    font-size: 14px;
+    font-size: var(--fs-md);
 }
 
 .report-preview-empty {
-    padding: 40px 24px;
+    padding: var(--space-10) var(--space-6);
     text-align: center;
     color: var(--text-muted);
-    font-size: 14px;
+    font-size: var(--fs-md);
 }
 
 .report-preview-design-btn {
-    margin-top: 12px;
+    margin-top: var(--space-3);
-    padding: 8px 16px;
+    padding: var(--space-2) var(--space-4);
     background: var(--accent);
     border: none;
     border-radius: var(--radius-sm);
     color: var(--accent-contrast);
-    font-size: 13px;
+    font-size: var(--fs-base);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
@@ -133,20 +133,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 12px;
+    gap: var(--space-3);
-    padding: 12px 16px;
+    padding: var(--space-3) var(--space-4);
     border-top: 1px solid var(--border);
     flex-shrink: 0;
 }
 
 .report-preview-print-btn {
-    padding: 8px 24px;
+    padding: var(--space-2) var(--space-6);
     background: var(--accent);
     border: none;
     border-radius: var(--radius-sm);
     color: var(--accent-contrast);
-    font-size: 14px;
+    font-size: var(--fs-md);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
@@ -156,13 +156,13 @@
 }
 
 .report-preview-close-btn {
-    padding: 8px 24px;
+    padding: var(--space-2) var(--space-6);
     background: none;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     color: var(--text);
-    font-size: 14px;
+    font-size: var(--fs-md);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 

frontend/src/components/ScaleMonitor/ScaleMonitor.css

@@ -1,10 +1,10 @@
 .scale-monitor {
-    min-height: 100vh;
+    flex: 1 0 auto;             /* fill the rail layout's content column */
     background-color: var(--bg);
 }
 
 .sm-body {
-    padding: 20px;
+    padding: var(--space-5);
     max-width: 1400px;
     margin: 0 auto;
 }
@@ -12,19 +12,19 @@
 .sm-toolbar {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--space-3);
-    margin-bottom: 16px;
+    margin-bottom: var(--space-4);
     flex-wrap: wrap;
 }
 
 .sm-back {
-    padding: 6px 12px;
+    padding: var(--space-1-5) var(--space-3);
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 6px;
     color: var(--text-muted);
     cursor: pointer;
-    font-size: 13px;
+    font-size: var(--fs-base);
 }
 
 .sm-back:hover {
@@ -33,9 +33,9 @@
 }
 
 .sm-conn {
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
-    padding: 3px 8px;
+    padding: var(--space-1) var(--space-2);
     border-radius: 4px;
     text-transform: uppercase;
     letter-spacing: 0.3px;
@@ -52,25 +52,25 @@
 }
 
 .sm-status {
-    font-size: 12px;
+    font-size: var(--fs-sm);
     color: var(--text-muted);
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
 }
 
 .sm-message {
-    padding: 8px 12px;
+    padding: var(--space-2) var(--space-3);
     background-color: var(--accent-soft);
     border: 1px solid var(--border-strong);
     border-radius: 6px;
     color: var(--text);
-    font-size: 13px;
+    font-size: var(--fs-base);
-    margin-bottom: 12px;
+    margin-bottom: var(--space-3);
 }
 
 .sm-columns {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 16px;
+    gap: var(--space-4);
 }
 
 @media (max-width: 1000px) {
@@ -82,25 +82,25 @@
 .sm-panel {
     background: var(--surface);
     border-radius: 8px;
-    padding: 16px;
+    padding: var(--space-4);
     box-shadow: 0 1px 3px var(--shadow-card);
 }
 
 .sm-panel--wide {
-    margin-top: 16px;
+    margin-top: var(--space-4);
 }
 
 .sm-panel-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 12px;
+    margin-bottom: var(--space-3);
 }
 
 .sm-panel-head h3 {
     margin: 0;
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -108,16 +108,16 @@
 
 .sm-panel-actions {
     display: flex;
-    gap: 6px;
+    gap: var(--space-1-5);
 }
 
 .sm-panel-actions button {
-    padding: 4px 10px;
+    padding: var(--space-1) var(--space-2-5);
     background: none;
     border: 1px solid var(--border);
     border-radius: 6px;
     color: var(--text-muted);
-    font-size: 12px;
+    font-size: var(--fs-sm);
     cursor: pointer;
 }
 
@@ -128,26 +128,26 @@
 
 .sm-send {
     display: flex;
-    gap: 6px;
+    gap: var(--space-1-5);
-    margin-bottom: 10px;
+    margin-bottom: var(--space-2-5);
 }
 
 .sm-send input {
     flex: 1;
-    padding: 6px 10px;
+    padding: var(--space-1-5) var(--space-2-5);
     border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 13px;
+    font-size: var(--fs-base);
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
 }
 
 .sm-send button {
-    padding: 6px 14px;
+    padding: var(--space-1-5) var(--space-4);
     background: linear-gradient(135deg, var(--accent), var(--accent));
     border: none;
     border-radius: 6px;
     color: var(--accent-contrast);
-    font-size: 13px;
+    font-size: var(--fs-base);
     cursor: pointer;
 }
 
@@ -165,11 +165,11 @@
 }
 
 .sm-line {
-    padding: 5px 8px;
+    padding: var(--space-1-5) var(--space-2);
     border-bottom: 1px solid var(--border);
     cursor: pointer;
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
-    font-size: 12px;
+    font-size: var(--fs-sm);
 }
 
 .sm-line:hover {
@@ -183,7 +183,7 @@
 .sm-line-text {
     display: flex;
     justify-content: space-between;
-    gap: 8px;
+    gap: var(--space-2);
     color: var(--text);
 }
 
@@ -199,37 +199,37 @@
 
 .sm-line-hex {
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: var(--fs-xs);
     word-break: break-all;
-    margin-top: 2px;
+    margin-top: var(--space-0-5);
 }
 
 .sm-empty {
-    padding: 20px;
+    padding: var(--space-5);
     text-align: center;
     color: var(--text-muted);
     font-style: italic;
-    font-size: 13px;
+    font-size: var(--fs-base);
 }
 
 .sm-form {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: var(--space-2-5);
 }
 
 .sm-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 10px;
+    gap: var(--space-2-5);
 }
 
 .sm-form label {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: var(--space-1);
-    font-size: 11px;
+    font-size: var(--fs-xs);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -237,43 +237,43 @@
 
 .sm-form input[type="text"],
 .sm-form input[type="number"] {
-    padding: 7px 10px;
+    padding: var(--space-2) var(--space-2-5);
     border: 1px solid var(--border);
     border-radius: 6px;
-    font-size: 14px;
+    font-size: var(--fs-md);
     text-transform: none;
     letter-spacing: normal;
-    font-weight: 400;
+    font-weight: var(--fw-regular);
     color: var(--text);
 }
 
 .sm-check {
     flex-direction: row !important;
     align-items: center;
-    gap: 6px;
+    gap: var(--space-1-5);
     text-transform: none !important;
     letter-spacing: normal !important;
-    font-weight: 400 !important;
+    font-weight: var(--fw-regular) !important;
     color: var(--text) !important;
-    font-size: 12px !important;
+    font-size: var(--fs-sm) !important;
 }
 
 .sm-hint {
-    font-size: 11px;
+    font-size: var(--fs-xs);
     color: var(--text-muted);
     font-style: italic;
 }
 
 .sm-preview {
-    margin-top: 14px;
+    margin-top: var(--space-4);
-    padding-top: 14px;
+    padding-top: var(--space-4);
     border-top: 1px solid var(--border);
 }
 
 .sm-preview h4 {
-    margin: 0 0 8px 0;
+    margin: 0 0 var(--space-2) 0;
-    font-size: 11px;
+    font-size: var(--fs-xs);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -282,43 +282,43 @@
 .sm-preview-ok {
     display: flex;
     align-items: baseline;
-    gap: 10px;
+    gap: var(--space-2-5);
 }
 
 .sm-preview-weight {
-    font-size: 24px;
+    font-size: var(--fs-2xl);
-    font-weight: 700;
+    font-weight: var(--fw-bold);
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
     color: var(--text);
 }
 
 .sm-bal {
     color: var(--success);
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
 }
 
 .sm-unbal {
     color: var(--danger);
-    font-size: 12px;
+    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
 }
 
 .sm-preview-error {
     color: var(--danger);
-    font-size: 13px;
+    font-size: var(--fs-base);
     font-style: italic;
 }
 
 .sm-save {
-    margin-top: 12px;
+    margin-top: var(--space-3);
-    padding: 8px 16px;
+    padding: var(--space-2) var(--space-4);
     background: linear-gradient(135deg, var(--accent), var(--accent));
     border: none;
     border-radius: 6px;
     color: var(--accent-contrast);
-    font-size: 13px;
+    font-size: var(--fs-base);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     cursor: pointer;
 }
 
@@ -330,18 +330,18 @@
 .sm-protocols {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: var(--space-1-5);
 }
 
 .sm-protocol {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--space-2-5);
-    padding: 8px 10px;
+    padding: var(--space-2) var(--space-2-5);
     border: 1px solid var(--border);
     border-radius: 6px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: var(--fs-base);
 }
 
 .sm-protocol:hover {
@@ -349,15 +349,15 @@
 }
 
 .sm-protocol-name {
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     color: var(--text);
 }
 
 .sm-protocol-kind,
 .sm-protocol-poll {
-    font-size: 11px;
+    font-size: var(--fs-xs);
     color: var(--text-muted);
-    font-family: 'Courier New', monospace;
+    font-family: var(--font-mono);
 }
 
 .sm-protocol-poll {

frontend/src/components/ScaleMonitor/ScaleMonitor.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Header from '../Header';
 import useSerialData from '../../hooks/useSerialData';
 import { useScaleProtocols } from '../../contexts/ScaleProtocolContext';
 import { parseReading, formatHex } from '../../services/scaleProtocols';
@@ -120,7 +119,6 @@ export default function ScaleMonitor() {
 
     return (
         <div className="scale-monitor">
-            <Header />
             <div className="sm-body">
                 <div className="sm-toolbar">
                     <button className="sm-back" onClick={() => navigate('/')}>&larr; Back</button>

frontend/src/components/Users/ChangePasswordOverlay.css

@@ -4,12 +4,12 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 20px;
+  padding: var(--space-5);
   animation: fadeIn 0.2s ease-in;
 }
 
@@ -23,9 +23,9 @@
 }
 
 .overlay-content {
-  background: white;
+  background: var(--surface);
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
@@ -45,8 +45,8 @@
 }
 
 .overlay-header {
-  padding: 24px 24px 16px;
+  padding: var(--space-6) var(--space-6) var(--space-4);
-  border-bottom: 2px solid #667eea;
+  border-bottom: 2px solid var(--accent);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -54,15 +54,15 @@
 
 .overlay-header h2 {
   margin: 0;
-  color: #667eea;
+  color: var(--accent);
-  font-size: 24px;
+  font-size: var(--fs-2xl);
 }
 
 .close-button {
   background: none;
   border: none;
-  font-size: 32px;
+  font-size: var(--fs-display);
-  color: #999;
+  color: var(--text-muted);
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -75,84 +75,84 @@
 }
 
 .close-button:hover {
-  background: #f5f5f5;
+  background: var(--surface-sunken);
-  color: #333;
+  color: var(--text);
 }
 
 .password-form {
-  padding: 24px;
+  padding: var(--space-6);
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--space-5);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .form-group label {
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #333;
+  color: var(--text);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .form-group input {
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--border);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: var(--fs-lg);
   transition: border-color 0.3s;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .form-group input:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 .form-actions {
   display: flex;
-  gap: 12px;
+  gap: var(--space-3);
-  margin-top: 8px;
+  margin-top: var(--space-2);
 }
 
 .cancel-button,
 .submit-button {
   flex: 1;
-  padding: 12px 24px;
+  padding: var(--space-3) var(--space-6);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .cancel-button {
-  background: white;
+  background: var(--surface);
-  border: 2px solid #ddd;
+  border: 2px solid var(--border);
-  color: #666;
+  color: var(--text-muted);
 }
 
 .cancel-button:hover:not(:disabled) {
-  border-color: #999;
+  border-color: var(--border-strong);
-  color: #333;
+  color: var(--text);
 }
 
 .submit-button {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
   border: none;
-  color: white;
+  color: var(--accent-contrast);
 }
 
 .submit-button:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px var(--accent-soft);
 }
 
 .cancel-button:disabled,
@@ -162,16 +162,16 @@
 }
 
 .error-message {
-  background-color: #fee;
+  background-color: var(--danger-soft);
-  color: #c33;
+  color: var(--danger);
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
   border-radius: 8px;
-  border: 1px solid #fcc;
+  border: 1px solid var(--danger);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .success-message {
-  padding: 40px 24px;
+  padding: var(--space-10) var(--space-6);
   text-align: center;
 }
 
@@ -179,13 +179,13 @@
   width: 64px;
   height: 64px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
-  color: white;
+  color: var(--accent-contrast);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 36px;
+  font-size: var(--fs-display);
-  margin: 0 auto 16px;
+  margin: 0 auto var(--space-4);
   animation: scaleIn 0.4s ease-out;
 }
 
@@ -200,9 +200,9 @@
 
 .success-message p {
   margin: 0;
-  color: #333;
+  color: var(--text);
-  font-size: 18px;
+  font-size: var(--fs-xl);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 
 @media (max-width: 540px) {
@@ -211,7 +211,7 @@
   }
 
   .password-form {
-    padding: 20px;
+    padding: var(--space-5);
   }
 
   .form-actions {

frontend/src/components/Users/Login.css

@@ -3,88 +3,88 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
-  padding: 20px;
+  padding: var(--space-5);
 }
 
 .login-card {
-  background: white;
+  background: var(--surface);
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-overlay);
   width: 100%;
   max-width: 400px;
-  padding: 40px;
+  padding: var(--space-10);
 }
 
 .login-header {
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: var(--space-8);
 }
 
 .login-header h1 {
-  margin: 0 0 10px 0;
+  margin: 0 0 var(--space-2-5) 0;
-  color: #667eea;
+  color: var(--accent);
-  font-size: 32px;
+  font-size: var(--fs-display);
 }
 
 .login-header p {
   margin: 0;
-  color: #666;
+  color: var(--text-muted);
-  font-size: 16px;
+  font-size: var(--fs-lg);
 }
 
 .login-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--space-5);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .form-group label {
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
-  color: #333;
+  color: var(--text);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .form-group input {
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--border);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: var(--fs-lg);
   transition: border-color 0.3s;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--accent);
 }
 
 .form-group input:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--surface-sunken);
   cursor: not-allowed;
 }
 
 .login-button {
-  padding: 14px 24px;
+  padding: var(--space-4) var(--space-6);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
-  color: white;
+  color: var(--accent-contrast);
   border: none;
   border-radius: 8px;
-  font-size: 16px;
+  font-size: var(--fs-lg);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
-  margin-top: 10px;
+  margin-top: var(--space-2-5);
 }
 
 .login-button:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px var(--accent-soft);
 }
 
 .login-button:active:not(:disabled) {
@@ -97,12 +97,12 @@
 }
 
 .error-message {
-  background-color: #fee;
+  background-color: var(--danger-soft);
-  color: #c33;
+  color: var(--danger);
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
   border-radius: 8px;
-  border: 1px solid #fcc;
+  border: 1px solid var(--danger);
-  font-size: 14px;
+  font-size: var(--fs-md);
 }
 
 .loading {
@@ -111,18 +111,18 @@
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
-  color: white;
+  color: var(--accent-contrast);
 }
 
 .loading-spinner {
-  border: 4px solid rgba(255, 255, 255, 0.3);
+  border: 4px solid color-mix(in srgb, var(--accent-contrast) 30%, transparent);
-  border-top: 4px solid white;
+  border-top: 4px solid var(--accent-contrast);
   border-radius: 50%;
   width: 40px;
   height: 40px;
   animation: spin 1s linear infinite;
-  margin-bottom: 10px;
+  margin-bottom: var(--space-2-5);
 }
 
 @keyframes spin {
@@ -132,10 +132,10 @@
 
 @media (max-width: 480px) {
   .login-card {
-    padding: 30px 20px;
+    padding: var(--space-8) var(--space-5);
   }
 
   .login-header h1 {
-    font-size: 28px;
+    font-size: var(--fs-3xl);
   }
 }

frontend/src/components/Users/UserManager.css

@@ -0,0 +1,116 @@
+/* The form and buttons reuse Main.css classes (.extra-field,
+   .vehicle-form-actions, .extra-save-btn ...); the compound selectors below
+   exist only to outrank those where this screen differs. */
+
+.um-page {
+  padding: var(--space-6);
+  max-width: 900px;
+}
+
+.um-toolbar {
+  margin-bottom: var(--space-4);
+}
+
+.um-add-form {
+  margin-bottom: var(--space-6);
+  padding: var(--space-4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-sunken);
+}
+
+.um-add-form-title {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--fs-md);
+  color: var(--accent);
+  font-weight: var(--fw-semibold);
+}
+
+.extra-field.um-permission-field {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Three classes deep to outrank the cockpit `.extra-field label` rule */
+.um-add-form .extra-field.um-permission-field label {
+  text-transform: none;
+  letter-spacing: normal;
+  cursor: pointer;
+}
+
+.vehicle-form-actions.um-form-actions {
+  margin-top: var(--space-4);
+  padding-top: var(--space-3);
+}
+
+.um-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-md);
+}
+
+.um-table thead tr {
+  border-bottom: 2px solid var(--border);
+  text-align: left;
+}
+
+.um-table th,
+.um-table td {
+  padding: var(--space-2-5) var(--space-3);
+}
+
+.um-table th {
+  color: var(--text-muted);
+  font-weight: var(--fw-semibold);
+}
+
+.um-row {
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.um-row--inactive {
+  background: var(--surface-sunken);
+}
+
+.um-table .um-username {
+  font-weight: var(--fw-semibold);
+  color: var(--text);
+}
+
+.um-table .um-cell-center {
+  text-align: center;
+}
+
+.um-status {
+  display: inline-block;
+  padding: var(--space-0-5) var(--space-2);
+  border-radius: 10px;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.um-status--inactive {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.um-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.um-table .um-action-btn {
+  font-size: var(--fs-sm);
+  padding: var(--space-1-5) var(--space-3);
+}
+
+.um-table .um-empty {
+  padding: var(--space-5);
+  text-align: center;
+  color: var(--text-muted);
+}

frontend/src/components/Users/UserManager.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import api from '../../services/api';
-import Header from '../Header';
+import './UserManager.css';
 
 const PERMISSION_FIELDS = [
     { key: 'can_measure', label: 'Can Measure' },
@@ -86,13 +86,12 @@ export default function UserManager() {
 
     return (
         <div>
-            <Header />
+            <div className="um-page">
-            <div style={{ padding: '24px', maxWidth: '900px' }}>
                 <h2 className="vehicle-detail-title">User Manager</h2>
 
                 {error && <div className="vehicle-error">{error}</div>}
 
-                <div style={{ marginBottom: '16px' }}>
+                <div className="um-toolbar">
                     <button
                         className="vehicle-add-btn"
                         onClick={() => setAddFormOpen(prev => !prev)}
@@ -102,8 +101,8 @@ export default function UserManager() {
                 </div>
 
                 {addFormOpen && (
-                    <form onSubmit={handleAddUser} style={{ marginBottom: '24px', padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', background: '#fafafa' }}>
+                    <form onSubmit={handleAddUser} className="um-add-form">
-                        <h3 style={{ margin: '0 0 14px 0', fontSize: '14px', color: '#667eea', fontWeight: 600 }}>New User</h3>
+                        <h3 className="um-add-form-title">New User</h3>
                         <div className="extra-fields">
                             <div className="extra-field">
                                 <label>Username</label>
@@ -125,18 +124,18 @@ export default function UserManager() {
                                 />
                             </div>
                             {PERMISSION_FIELDS.map(({ key, label }) => (
-                                <div key={key} className="extra-field" style={{ flexDirection: 'row', alignItems: 'center', gap: '8px' }}>
+                                <div key={key} className="extra-field um-permission-field">
                                     <input
                                         type="checkbox"
                                         id={`new-${key}`}
                                         checked={newUser[key]}
                                         onChange={e => setNewUser(prev => ({ ...prev, [key]: e.target.checked }))}
                                     />
-                                    <label htmlFor={`new-${key}`} style={{ textTransform: 'none', letterSpacing: 'normal', cursor: 'pointer' }}>{label}</label>
+                                    <label htmlFor={`new-${key}`}>{label}</label>
                                 </div>
                             ))}
                         </div>
-                        <div className="vehicle-form-actions" style={{ marginTop: '14px', paddingTop: '12px' }}>
+                        <div className="vehicle-form-actions um-form-actions">
                             <button
                                 type="button"
                                 className="vehicle-form-cancel"
@@ -155,60 +154,50 @@ export default function UserManager() {
                     </form>
                 )}
 
-                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>
+                <table className="um-table">
                     <thead>
-                        <tr style={{ borderBottom: '2px solid #e0e0e0', textAlign: 'left' }}>
+                        <tr>
-                            <th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Username</th>
+                            <th>Username</th>
-                            <th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Status</th>
+                            <th>Status</th>
                             {PERMISSION_FIELDS.map(({ key, label }) => (
-                                <th key={key} style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>{label}</th>
+                                <th key={key}>{label}</th>
                             ))}
-                            <th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Actions</th>
+                            <th>Actions</th>
                         </tr>
                     </thead>
                     <tbody>
                         {users.map(u => (
-                            <tr key={u.id} style={{ borderBottom: '1px solid #f0f0f0', background: u.is_active ? 'white' : '#fafafa' }}>
+                            <tr key={u.id} className={u.is_active ? 'um-row' : 'um-row um-row--inactive'}>
-                                <td style={{ padding: '10px 12px', fontWeight: 600, color: '#333' }}>{u.username}</td>
+                                <td className="um-username">{u.username}</td>
-                                <td style={{ padding: '10px 12px' }}>
+                                <td>
-                                    <span style={{
+                                    <span className={u.is_active ? 'um-status' : 'um-status um-status--inactive'}>
-                                        display: 'inline-block',
-                                        padding: '2px 8px',
-                                        borderRadius: '10px',
-                                        fontSize: '12px',
-                                        fontWeight: 600,
-                                        background: u.is_active ? '#e8f5e9' : '#fce4ec',
-                                        color: u.is_active ? '#2e7d32' : '#c62828',
-                                    }}>
                                         {u.is_active ? 'Active' : 'Inactive'}
                                     </span>
                                 </td>
                                 {PERMISSION_FIELDS.map(({ key }) => (
-                                    <td key={key} style={{ padding: '10px 12px', textAlign: 'center' }}>
+                                    <td key={key} className="um-cell-center">
                                         <input
                                             type="checkbox"
                                             checked={!!u[key]}
                                             onChange={e => handlePermissionChange(u.id, key, e.target.checked)}
-                                            style={{ width: '18px', height: '18px', cursor: 'pointer' }}
+                                            className="um-checkbox"
                                         />
                                     </td>
                                 ))}
-                                <td style={{ padding: '10px 12px' }}>
+                                <td>
                                     {u.is_active ? (
                                         <button
-                                            className="vehicle-form-cancel"
+                                            className="vehicle-form-cancel um-action-btn"
                                             onClick={() => handleDeactivate(u.id)}
                                             disabled={u.id === currentUser?.id}
                                             title={u.id === currentUser?.id ? 'Cannot deactivate yourself' : undefined}
-                                            style={{ fontSize: '12px', padding: '5px 12px' }}
                                         >
                                             Deactivate
                                         </button>
                                     ) : (
                                         <button
-                                            className="extra-save-btn"
+                                            className="extra-save-btn um-action-btn"
                                             onClick={() => handleReactivate(u.id)}
-                                            style={{ fontSize: '12px', padding: '5px 12px' }}
                                         >
                                             Reactivate
                                         </button>
@@ -218,7 +207,7 @@ export default function UserManager() {
                         ))}
                         {users.length === 0 && (
                             <tr>
-                                <td colSpan={PERMISSION_FIELDS.length + 3} style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
+                                <td colSpan={PERMISSION_FIELDS.length + 3} className="um-empty">
                                     No users found
                                 </td>
                             </tr>

frontend/src/components/VehicleListStaging.jsx

@@ -0,0 +1,158 @@
+import { useLayoutEffect, useRef } from 'react';
+
+/**
+ * Visuals for the staged vehicle list (hooks/useStagedList), see Main.css.
+ *
+ * A new row is announced by a marker line (pending, `delay` ms): calm with a
+ * travelling shimmer, then for the last `distortMs` (the hook's `distorting`
+ * phase) it wobbles like a plucked string and bulges open into a lens. The
+ * row then opens out of that lens (entering, `enterMs`) and its plate is
+ * revealed character by character. While the list is held the marker stays
+ * calm, so the distortion starts when the hook says so, not at a fixed time.
+ *
+ * The timings are handed to the CSS as custom properties (listStagingStyle),
+ * so the hook's timers and the animations come from the same numbers.
+ */
+
+export const LIST_STAGING = {
+    delay: 3000,      // marker shown before the row opens
+    distortMs: 650,   // the tail of `delay` in which the marker distorts
+    enterMs: 800,     // row opens, plate and weight are revealed
+    exitMs: 280,      // a leaving row collapses
+    releaseStagger: 70,   // between held changes going on, top to bottom
+};
+
+/* ----- Hover hold ----------------------------------------------------------
+   While a mouse/pen is over the list, staged changes wait. A click on a row
+   releases the hold at the click point; it only holds again once the pointer
+   has moved REHOLD_PX away from there, so the jitter of a click does not
+   re-hold at once. Touch never holds. */
+export const REHOLD_PX = 4;
+
+// Whether a pointer event over the list should (re)take the hold, given the
+// point a click released it at (null when not in the post-click state).
+export function shouldHoldList({ pointerType, clientX, clientY }, releasedAt) {
+    if (pointerType !== 'mouse' && pointerType !== 'pen') return false;
+    if (!releasedAt) return true;
+    return Math.hypot(clientX - releasedAt.x, clientY - releasedAt.y) >= REHOLD_PX;
+}
+
+export const listStagingStyle = {
+    '--vl-enter-ms': `${LIST_STAGING.enterMs}ms`,
+    '--vl-exit-ms': `${LIST_STAGING.exitMs}ms`,
+};
+
+/* ----- Marker line ---------------------------------------------------------
+   One closed path, top edge left->right then bottom edge back. While both
+   edges coincide it reads as a single line (zero area, so the fill is
+   invisible); the last frame pulls them apart into a filled lens, which the
+   entering row's overlay picks up. Every frame has the same commands, so SMIL
+   can interpolate `d` (CSS `d: path()` does not animate in Firefox). The
+   viewBox is stretched to the marker's width; y units are pixels. */
+const W = 100;
+const H = 12;           // = .vehicle-list-marker-line height
+const MID = H / 2;
+const SEGS = 8;
+
+const fmt = n => Math.round(n * 100) / 100;
+
+// Cubic Bezier segments sampling f between x0 and x1 (Hermite tangents).
+function edge(f, x0, x1) {
+    const h = (x1 - x0) / SEGS;
+    const slope = x => (f(x + 0.01) - f(x - 0.01)) / 0.02;
+    let d = '';
+    for (let i = 0; i < SEGS; i++) {
+        const a = x0 + i * h, b = a + h;
+        d += ` C${fmt(a + h / 3)} ${fmt(f(a) + slope(a) * h / 3)}`
+           + ` ${fmt(b - h / 3)} ${fmt(f(b) - slope(b) * h / 3)}`
+           + ` ${fmt(b)} ${fmt(f(b))}`;
+    }
+    return d;
+}
+
+const shape = (top, bottom) => `M0 ${fmt(top(0))}${edge(top, 0, W)}${edge(bottom, W, 0)}Z`;
+
+// A string pinned at both ends: a standing wave (modes 3 + 2) and a bulge.
+const wave = a => x => MID + a * (0.8 * Math.sin(3 * Math.PI * x / W) + 0.3 * Math.sin(2 * Math.PI * x / W));
+const bulge = a => x => a * Math.sin(Math.PI * x / W);
+const line = a => shape(wave(a), wave(a));
+const lens = (open, a) => shape(x => wave(a)(x) - bulge(open)(x), x => wave(a)(x) + bulge(open)(x));
+
+const FLAT = line(0);
+const DISTORT_FRAMES = [FLAT, line(0.7), line(-1.3), line(1.9), line(-2.4), lens(2.4, -0.9), lens(4, 0)];
+const DISTORT_TIMES = [0, 0.16, 0.32, 0.48, 0.64, 0.82, 1];
+const DISTORT_SPLINES = DISTORT_FRAMES.slice(1).map(() => '.45 0 .55 1').join(';');
+
+// The morph waits (begin="indefinite") until `distorting` turns on, then is
+// started with beginElement(); the CSS wake and shimmer-out key off the
+// --distorting class at the same moment.
+export function PendingMarker({ reduceMotion, distorting = false }) {
+    const animateRef = useRef(null);
+    useLayoutEffect(() => {
+        if (distorting) animateRef.current?.beginElement?.();
+    }, [distorting]);
+
+    return (
+        <div className={`vehicle-list-marker${distorting ? ' vehicle-list-marker--distorting' : ''}`} aria-hidden="true">
+            <svg
+                className="vehicle-list-marker-line"
+                viewBox={`0 0 ${W} ${H}`}
+                preserveAspectRatio="none"
+            >
+                <path d={FLAT}>
+                    {!reduceMotion && (
+                        <animate
+                            ref={animateRef}
+                            attributeName="d"
+                            begin="indefinite"
+                            dur={`${LIST_STAGING.distortMs}ms`}
+                            fill="freeze"
+                            calcMode="spline"
+                            values={DISTORT_FRAMES.join(';')}
+                            keyTimes={DISTORT_TIMES.join(';')}
+                            keySplines={DISTORT_SPLINES}
+                        />
+                    )}
+                </path>
+            </svg>
+        </div>
+    );
+}
+
+/* ----- Plate reveal --------------------------------------------------------
+   Characters start once the row is mostly open and finish just before the
+   entering phase ends; long plates get a tighter stagger. */
+const REVEAL_AT = 0.36;     // of enterMs
+const CHAR_SHARE = 0.3;     // one char's animation, of enterMs (also in CSS)
+const MAX_STEP = 0.045;
+
+export function RevealPlate({ text }) {
+    const chars = [...text];
+    const t = LIST_STAGING.enterMs;
+    const step = Math.min(t * MAX_STEP, (t * (0.97 - REVEAL_AT - CHAR_SHARE)) / Math.max(chars.length - 1, 1));
+    return (
+        <span className="vehicle-list-number" aria-label={text}>
+            {chars.map((c, i) => (
+                <span
+                    key={i}
+                    className="vehicle-list-char"
+                    aria-hidden="true"
+                    style={{ animationDelay: `${Math.round(t * REVEAL_AT + i * step)}ms` }}
+                >
+                    {c}
+                </span>
+            ))}
+        </span>
+    );
+}
+
+// The opening animates `height` to the row's natural height, measured here
+// before the first paint (with its animation briefly off). Module-level so it
+// runs once per entering row.
+export function measureOpeningRow(el) {
+    if (!el) return;
+    el.style.animationName = 'none';
+    const h = el.offsetHeight;
+    el.style.animationName = '';
+    if (h > 0) el.style.setProperty('--vl-row-h', `${h}px`);
+}

frontend/src/components/__tests__/NavRail.test.jsx

@@ -0,0 +1,165 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+import NavRail from '../NavRail';
+import { getLicenseWarning } from '../licenseWarning';
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+const mocks = vi.hoisted(() => ({ user: null, status: null }));
+
+vi.mock('../../contexts/AuthContext', () => ({
+    useAuth: () => ({ currentUser: mocks.user, logout: () => {} }),
+}));
+vi.mock('../../contexts/ThemeContext', () => ({
+    useTheme: () => ({ theme: 'classic', toggleTheme: () => {} }),
+}));
+vi.mock('../../contexts/LicenseContext', () => ({
+    useLicense: () => ({ status: mocks.status }),
+}));
+vi.mock('../Users/ChangePasswordOverlay', () => ({ default: () => null }));
+vi.mock('../NomenclatureManager/NomenclatureManager', () => ({ default: () => null }));
+
+const ADMIN = { username: 'admin', is_admin: true, role: 'employee' };
+const OPERATOR = { username: 'op', is_admin: false, role: 'employee' };
+const GRACE = { valid: false, in_grace: true, grace_days_left: 12, stations: 1 };
+const BLOCKED = { valid: false, in_grace: false, grace_days_left: 0, stations: 1 };
+const VALID = { valid: true, in_grace: false, grace_days_left: 0, stations: 3 };
+
+describe('getLicenseWarning', () => {
+    it('returns nothing for a valid or not-yet-loaded licence', () => {
+        expect(getLicenseWarning(null)).toBeNull();
+        expect(getLicenseWarning(VALID)).toBeNull();
+    });
+
+    it('builds the grace message with the day count as the emphasis', () => {
+        const w = getLicenseWarning(GRACE);
+        expect(w.level).toBe('grace');
+        expect(w.emphasis).toBe('12 more days');
+        expect(w.message).toBe(
+            'This installation is not licensed. Everything keeps working for 12 more days.'
+        );
+        expect(`${w.lead}${w.emphasis}${w.tail}`).toBe(w.message);
+    });
+
+    it('builds the blocked message', () => {
+        const w = getLicenseWarning(BLOCKED);
+        expect(w.level).toBe('blocked');
+        expect(w.message).toBe('This installation is not licensed. Only 1 station can measure.');
+        expect(`${w.lead}${w.emphasis}${w.tail}`).toBe(w.message);
+    });
+});
+
+describe('NavRail licence state', () => {
+    let container, root;
+
+    const renderRail = (user, status) => {
+        mocks.user = user;
+        mocks.status = status;
+        act(() => root.render(<MemoryRouter><NavRail /></MemoryRouter>));
+    };
+    const licenceItems = () => [...container.querySelectorAll('.nav-rail-item')]
+        .filter(b => b.textContent.includes('Licence'));
+    const popover = () => container.querySelector('.nav-rail-license-popover');
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        container.remove();
+    });
+
+    it('shows nothing extra when the licence is valid', () => {
+        renderRail(ADMIN, VALID);
+        expect(container.querySelector('.nav-rail-item--license')).toBeNull();
+        expect(container.querySelector('.nav-rail-badge')).toBeNull();
+        expect(licenceItems()).toHaveLength(1);
+
+        renderRail(OPERATOR, VALID);
+        expect(licenceItems()).toHaveLength(0);
+    });
+
+    it('puts the admin Licence item into the grace state', () => {
+        renderRail(ADMIN, GRACE);
+        const items = licenceItems();
+        expect(items).toHaveLength(1);
+        const [item] = items;
+        expect(item.classList).toContain('nav-rail-item--license-grace');
+        expect(item.querySelector('.nav-rail-badge')).not.toBeNull();
+        expect(item.textContent).toContain('🔑');
+        expect(item.getAttribute('aria-label')).toBe(`Licence: ${getLicenseWarning(GRACE).message}`);
+        expect(container.querySelector('.nav-rail-bottom .nav-rail-item--license')).toBeNull();
+    });
+
+    it('opens the admin popover on focus, with the bold day count and a page link', () => {
+        renderRail(ADMIN, GRACE);
+        const [item] = licenceItems();
+        act(() => item.focus());
+
+        const pop = popover();
+        expect(pop).not.toBeNull();
+        expect(pop.getAttribute('role')).toBe('dialog');
+        expect(pop.querySelector('strong').textContent).toBe('12 more days');
+        expect(pop.textContent).toContain(getLicenseWarning(GRACE).message);
+        expect(pop.querySelector('button').textContent).toBe('Open licence page');
+        expect(item.getAttribute('aria-describedby')).toBe(pop.id);
+
+        act(() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })));
+        expect(popover()).toBeNull();
+    });
+
+    it('marks the admin item as blocked', () => {
+        renderRail(ADMIN, BLOCKED);
+        const [item] = licenceItems();
+        expect(item.classList).toContain('nav-rail-item--license-blocked');
+        expect(item.querySelector('.nav-rail-badge')).not.toBeNull();
+    });
+
+    it('gives a non-admin a "!" marker at the bottom, without a page link', () => {
+        renderRail(OPERATOR, BLOCKED);
+        const items = licenceItems();
+        expect(items).toHaveLength(1);
+        const [item] = items;
+        expect(item.closest('.nav-rail-bottom')).not.toBeNull();
+        expect(item.classList).toContain('nav-rail-item--license-blocked');
+        expect(item.querySelector('.nav-rail-icon').textContent).toBe('!');
+
+        act(() => item.click());
+        const pop = popover();
+        expect(pop.getAttribute('role')).toBe('tooltip');
+        expect(pop.textContent).toBe(getLicenseWarning(BLOCKED).message);
+        expect(pop.querySelector('button')).toBeNull();
+
+        act(() => document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })));
+        expect(popover()).toBeNull();
+    });
+
+    it('uses the grace state for a non-admin in grace', () => {
+        renderRail(OPERATOR, GRACE);
+        const [item] = licenceItems();
+        expect(item.classList).toContain('nav-rail-item--license-grace');
+    });
+
+    it('opens on hover only after the delay, and closes after leaving', () => {
+        vi.useFakeTimers();
+        try {
+            renderRail(OPERATOR, GRACE);
+            const anchor = licenceItems()[0].closest('.nav-rail-anchor');
+            act(() => anchor.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })));
+            act(() => vi.advanceTimersByTime(100));
+            expect(popover()).toBeNull();
+            act(() => vi.advanceTimersByTime(150));
+            expect(popover()).not.toBeNull();
+
+            act(() => anchor.dispatchEvent(new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })));
+            expect(popover()).not.toBeNull();
+            act(() => vi.advanceTimersByTime(300));
+            expect(popover()).toBeNull();
+        } finally {
+            vi.useRealTimers();
+        }
+    });
+});

frontend/src/components/__tests__/VehicleListStaging.test.jsx

@@ -0,0 +1,136 @@
+import { act } from 'react';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { createRoot } from 'react-dom/client';
+import { LIST_STAGING, PendingMarker, RevealPlate, REHOLD_PX, shouldHoldList } from '../VehicleListStaging';
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('VehicleListStaging', () => {
+    let container, root;
+    const render = el => act(() => root.render(el));
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        root = createRoot(container);
+    });
+    afterEach(() => act(() => root.unmount()));
+
+    it('morphs the marker between frames of one shape, lasting distortMs', () => {
+        render(<PendingMarker reduceMotion={false} />);
+        const anim = container.querySelector('animate');
+        const frames = anim.getAttribute('values').split(';');
+        const commands = d => d.replace(/[^A-Za-z]/g, '');
+        const numbers = d => d.match(/-?\d+(\.\d+)?/g).map(Number);
+
+        expect(new Set(frames.map(commands)).size).toBe(1);
+        expect(new Set(frames.map(f => numbers(f).length)).size).toBe(1);
+        // Every point stays inside the 12px-high viewBox.
+        for (const f of frames) {
+            numbers(f).filter((_, i) => i % 2 === 1).forEach(y => {
+                expect(y).toBeGreaterThanOrEqual(0);
+                expect(y).toBeLessThanOrEqual(12);
+            });
+        }
+        expect(anim.getAttribute('keyTimes').split(';')).toHaveLength(frames.length);
+        expect(anim.getAttribute('dur')).toBe(`${LIST_STAGING.distortMs}ms`);
+    });
+
+    it('starts the distortion only when told to, not at a time after mount', () => {
+        render(<PendingMarker reduceMotion={false} />);
+        const marker = container.querySelector('.vehicle-list-marker');
+        const anim = container.querySelector('animate');
+        expect(anim.getAttribute('begin')).toBe('indefinite');
+        expect(marker.classList.contains('vehicle-list-marker--distorting')).toBe(false);
+
+        // jsdom has no SMIL; stand in for SVGAnimationElement.beginElement.
+        anim.beginElement = vi.fn();
+        render(<PendingMarker reduceMotion={false} />);
+        expect(anim.beginElement).not.toHaveBeenCalled();
+        render(<PendingMarker reduceMotion={false} distorting />);
+        expect(container.querySelector('animate')).toBe(anim);   // same element, not remounted
+        expect(anim.beginElement).toHaveBeenCalledTimes(1);
+        expect(marker.classList.contains('vehicle-list-marker--distorting')).toBe(true);
+        render(<PendingMarker reduceMotion={false} distorting />);
+        expect(anim.beginElement).toHaveBeenCalledTimes(1);
+    });
+
+    it('keeps the marker static when motion is reduced', () => {
+        render(<PendingMarker reduceMotion />);
+        expect(container.querySelector('path')).not.toBeNull();
+        expect(container.querySelector('animate')).toBeNull();
+        render(<PendingMarker reduceMotion distorting />);   // no SMIL to start
+        expect(container.querySelector('animate')).toBeNull();
+    });
+
+    it('splits the plate into hidden, staggered chars under one label', () => {
+        render(<RevealPlate text="CA 1234 AB" />);
+        const plate = container.querySelector('.vehicle-list-number');
+        const chars = [...plate.querySelectorAll('.vehicle-list-char')];
+        expect(plate.getAttribute('aria-label')).toBe('CA 1234 AB');
+        expect(chars.map(c => c.textContent).join('')).toBe('CA 1234 AB');
+        expect(chars.every(c => c.getAttribute('aria-hidden') === 'true')).toBe(true);
+
+        const delays = chars.map(c => parseInt(c.style.animationDelay, 10));
+        delays.slice(1).forEach((d, i) => expect(d).toBeGreaterThan(delays[i]));
+        // The last char finishes within the entering phase (30% per char).
+        expect(delays.at(-1) + LIST_STAGING.enterMs * 0.3).toBeLessThanOrEqual(LIST_STAGING.enterMs);
+    });
+
+    it('fits a long plate into the entering phase too', () => {
+        render(<RevealPlate text="ABCDEFGHIJKLMNOPQRST" />);
+        const chars = [...container.querySelectorAll('.vehicle-list-char')];
+        const last = parseInt(chars.at(-1).style.animationDelay, 10);
+        expect(last + LIST_STAGING.enterMs * 0.3).toBeLessThanOrEqual(LIST_STAGING.enterMs);
+    });
+
+    describe('shouldHoldList', () => {
+        const move = (clientX, clientY, pointerType = 'mouse') => ({ pointerType, clientX, clientY });
+
+        it('holds for a mouse or pen when no click released the hold', () => {
+            expect(shouldHoldList(move(10, 10), null)).toBe(true);
+            expect(shouldHoldList(move(10, 10, 'pen'), null)).toBe(true);
+        });
+
+        it('never holds for touch', () => {
+            expect(shouldHoldList(move(10, 10, 'touch'), null)).toBe(false);
+            expect(shouldHoldList(move(100, 100, 'touch'), { x: 0, y: 0 })).toBe(false);
+        });
+
+        it('after a click, holds again only REHOLD_PX away from the click point', () => {
+            const at = { x: 50, y: 50 };
+            expect(REHOLD_PX).toBe(4);
+            expect(shouldHoldList(move(50, 50), at)).toBe(false);
+            expect(shouldHoldList(move(53, 50), at)).toBe(false);
+            expect(shouldHoldList(move(52, 52), at)).toBe(false);   // ~2.83px
+            expect(shouldHoldList(move(54, 50), at)).toBe(true);
+            expect(shouldHoldList(move(50, 46), at)).toBe(true);
+            expect(shouldHoldList(move(53, 53), at)).toBe(true);    // ~4.24px
+        });
+    });
+
+    describe('overlay marker CSS', () => {
+        // Vitest stubs CSS imports (even ?raw), so read the file itself.
+        const mainCss = readFileSync(resolve(__dirname, '../Main.css'), 'utf8');
+        // The body of the top-level rule whose selector is exactly `sel`.
+        const rule = sel => {
+            const start = mainCss.indexOf(`\n${sel} {`);
+            return start < 0 ? '' : mainCss.slice(start, mainCss.indexOf('}', start));
+        };
+
+        it('gives the marker no layout height and draws its 12px line over the row border', () => {
+            expect(rule('.vehicle-list-marker')).toMatch(/height: 0;/);
+            expect(rule('.vehicle-list-marker')).toMatch(/pointer-events: none;/);
+            expect(rule('.vehicle-list-marker')).toMatch(/z-index: \d+;/);
+            const line = rule('.vehicle-list-marker-line');
+            expect(line).toMatch(/position: absolute;/);
+            expect(line).toMatch(/top: -6px;/);
+            expect(line).toMatch(/height: 12px;/);
+        });
+
+        it('opens the new row from height 0', () => {
+            const open = mainCss.match(/@keyframes vehicle-list-open \{\s*0% \{([^}]*)\}/);
+            expect(open[1]).toMatch(/height: 0;/);
+        });
+    });
+});

frontend/src/components/licenseWarning.js

@@ -0,0 +1,21 @@
+// What the rail shows for a licence status from useLicense(): null when there
+// is nothing to warn about, otherwise the level and the message split around
+// the part shown in bold.
+export function getLicenseWarning(status) {
+  if (!status || status.valid) return null;
+
+  const lead = 'This installation is not licensed. ';
+  if (status.in_grace) {
+    const emphasis = `${status.grace_days_left} more days`;
+    return {
+      level: 'grace',
+      lead: `${lead}Everything keeps working for `,
+      emphasis,
+      tail: '.',
+      message: `${lead}Everything keeps working for ${emphasis}.`,
+    };
+  }
+
+  const text = `${lead}Only ${status.stations} station can measure.`;
+  return { level: 'blocked', lead: text, emphasis: '', tail: '', message: text };
+}

frontend/src/contexts/NomenclatureContext.jsx

@@ -6,7 +6,7 @@ const NomenclatureContext = createContext();
 
 // Centralized nomenclature configuration
 const NOMENCLATURES_CONFIG = [
-    { key: 'vehicles', jsonKey: 'vehicles', sortBy: 'name', endpoint: '/api/vehicles/', sseObjectType: 'vehicle' },
+    { key: 'vehicles', jsonKey: 'vehicles', sortBy: 'vehicle_number', endpoint: '/api/vehicles/', sseObjectType: 'vehicle' },
     // { key: 'vesselOwners', jsonKey: 'vessel_owners', sortBy: 'name', endpoint: '/vessel_owners/api/list/', sseObjectType: 'vessel_owner' },
     // { key: 'agents', jsonKey: 'agents', sortBy: 'name', endpoint: '/agents/api/list/', sseObjectType: 'agent' },
     // { key: 'objects', jsonKey: 'objects', sortBy: 'id', endpoint: '/objects/api/list/', sseObjectType: 'object' },
@@ -42,21 +42,25 @@ export const useNomenclatures = () => {
     return context;
 };
 
+// Compare two items by the configured sort field. 'id' compares numerically;
+// any other field compares as text, case-insensitive with natural number
+// order (so "CA 2" sorts before "CA 10"). Missing values sort as empty text.
+const compareBy = (a, b, orderBy) => {
+    if (orderBy === 'id') {
+        return (a.id || 0) - (b.id || 0);
+    }
+    return String(a[orderBy] ?? '').localeCompare(String(b[orderBy] ?? ''), undefined, {
+        numeric: true,
+        sensitivity: 'base',
+    });
+};
+
 // Utility function to sort nomenclature array based on configuration
 const sortNomenclature = (array, nomenclatureKey) => {
     const config = getConfigForKey(nomenclatureKey);
     const orderBy = config?.sortBy || 'name';
 
-    return [...array].sort((a, b) => {
+    return [...array].sort((a, b) => compareBy(a, b, orderBy));
-        if (orderBy === 'id') {
-            return (a.id || 0) - (b.id || 0);
-        } else {
-            // Order by name (case-insensitive)
-            const nameA = (a.name || '').toLowerCase();
-            const nameB = (b.name || '').toLowerCase();
-            return nameA.localeCompare(nameB);
-        }
-    });
 };
 
 // Utility function to insert item in sorted position
@@ -65,24 +69,10 @@ const insertSorted = (array, newItem, nomenclatureKey) => {
     const orderBy = config?.sortBy || 'name';
     const newArray = [...array];
 
-    // Find the correct insertion position
+    // Insert before the first item that sorts after the new one
-    let insertIndex = newArray.length;
+    let insertIndex = newArray.findIndex(item => compareBy(item, newItem, orderBy) > 0);
-
-    if (orderBy === 'id') {
-        insertIndex = newArray.findIndex(item => {
-            const comparison = item.id > newItem.id;
-            return comparison;
-        });
     if (insertIndex === -1) insertIndex = newArray.length;
 
-    } else {
-        const newName = (newItem.name || '').toLowerCase();
-        insertIndex = newArray.findIndex(item =>
-            (item.name || '').toLowerCase() > newName
-        );
-        if (insertIndex === -1) insertIndex = newArray.length;
-    }
-
     newArray.splice(insertIndex, 0, newItem);
     return newArray;
 };
@@ -102,9 +92,7 @@ const updateSorted = (array, updatedItem, nomenclatureKey) => {
         return insertSorted(filteredArray, updatedItem, nomenclatureKey);
     }
 
-    const orderFieldChanged = orderBy === 'id'
+    const orderFieldChanged = compareBy(oldItem, updatedItem, orderBy) !== 0;
-        ? oldItem.id !== updatedItem.id
-        : (oldItem.name || '').toLowerCase() !== (updatedItem.name || '').toLowerCase();
 
     if (orderFieldChanged) {
         // Re-insert in sorted position if the ordering field changed

frontend/src/hooks/__tests__/useStagedList.test.jsx

@@ -0,0 +1,334 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import useStagedList, { reconcileStaged, advanceStaged, initialStagedState } from '../useStagedList';
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+const v = (id, extra = {}) => ({ id, vehicle_number: `CA${id}`, ...extra });
+const getKey = x => x.id;
+const view = entries => entries.map(e => `${e.phase}:${e.key}`);
+
+describe('useStagedList (hook)', () => {
+    let container, root, latest;
+
+    function Harness({ items, query = '', options }) {
+        const entries = useStagedList(items, { getKey, ...options });
+        latest = query ? entries.filter(e => e.item.vehicle_number.includes(query)) : entries;
+        return null;
+    }
+    const render = (items, query, options) =>
+        act(() => root.render(<Harness items={items} query={query} options={options} />));
+    const tick = ms => act(() => { vi.advanceTimersByTime(ms); });
+
+    beforeEach(() => {
+        vi.useFakeTimers();
+        container = document.createElement('div');
+        root = createRoot(container);
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        vi.useRealTimers();
+    });
+
+    it('shows the initial load immediately, including empty -> many', () => {
+        render([]);
+        expect(view(latest)).toEqual([]);
+        render([v(1), v(2), v(3)]);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2', 'stable:3']);
+        expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it('shows a marker for an added item, then the row after the delay', () => {
+        render([v(1), v(3)]);
+        render([v(1), v(2), v(3)]);
+        expect(view(latest)).toEqual(['stable:1', 'pending:2', 'stable:3']);
+        tick(2999);
+        expect(view(latest)).toEqual(['stable:1', 'pending:2', 'stable:3']);
+        tick(1);
+        expect(view(latest)).toEqual(['stable:1', 'entering:2', 'stable:3']);
+        tick(280);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2', 'stable:3']);
+    });
+
+    it('keeps a removed item as leaving, then removes it', () => {
+        render([v(1), v(2), v(3)]);
+        render([v(1), v(3)]);
+        expect(view(latest)).toEqual(['stable:1', 'leaving:2', 'stable:3']);
+        tick(3000);
+        expect(view(latest)).toEqual(['stable:1', 'exiting:2', 'stable:3']);
+        tick(280);
+        expect(view(latest)).toEqual(['stable:1', 'stable:3']);
+    });
+
+    it('gives overlapping changes independent timers', () => {
+        render([v(1), v(3), v(5)]);
+        render([v(1), v(2), v(3), v(5)]);
+        tick(1500);
+        render([v(1), v(2), v(3), v(4)]);   // add 4, remove 5, 1.5s later
+        expect(view(latest)).toEqual(['stable:1', 'pending:2', 'stable:3', 'leaving:5', 'pending:4']);
+        tick(1500);
+        expect(view(latest)).toEqual(['stable:1', 'entering:2', 'stable:3', 'leaving:5', 'pending:4']);
+        tick(1500);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2', 'stable:3', 'exiting:5', 'entering:4']);
+        tick(280);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2', 'stable:3', 'stable:4']);
+    });
+
+    it('times entering with enterMs and exiting with animationMs', () => {
+        const options = { enterMs: 800, animationMs: 280 };
+        render([v(1), v(2)], '', options);
+        render([v(1), v(3)], '', options);   // remove 2, add 3
+        expect(view(latest)).toEqual(['stable:1', 'leaving:2', 'pending:3']);
+        tick(3000);
+        expect(view(latest)).toEqual(['stable:1', 'exiting:2', 'entering:3']);
+        tick(280);
+        expect(view(latest)).toEqual(['stable:1', 'entering:3']);
+        tick(519);
+        expect(view(latest)).toEqual(['stable:1', 'entering:3']);
+        tick(1);
+        expect(view(latest)).toEqual(['stable:1', 'stable:3']);
+    });
+
+    it('skips the entering phase when enterMs is 0, keeping the exit animation', () => {
+        const options = { enterMs: 0, animationMs: 280 };
+        render([v(1), v(2)], '', options);
+        render([v(1), v(3)], '', options);
+        tick(3000);
+        expect(view(latest)).toEqual(['stable:1', 'exiting:2', 'stable:3']);
+    });
+
+    it('cancels a pending add that is removed before the delay', () => {
+        render([v(1)]);
+        render([v(1), v(2)]);
+        tick(1000);
+        render([v(1)]);
+        expect(view(latest)).toEqual(['stable:1']);
+        tick(5000);
+        expect(view(latest)).toEqual(['stable:1']);
+    });
+
+    it('returns a leaving item to normal when it comes back', () => {
+        render([v(1), v(2), v(3)]);
+        render([v(1), v(3)]);
+        tick(1000);
+        render([v(1), v(2), v(3)]);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2', 'stable:3']);
+        tick(5000);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2', 'stable:3']);
+    });
+
+    it('applies content updates in place immediately', () => {
+        render([v(1), v(2)]);
+        render([v(1), v(2, { tare: 12000 })]);
+        expect(view(latest)).toEqual(['stable:1', 'stable:2']);
+        expect(latest[1].item.tare).toBe(12000);
+    });
+
+    it('applies a filter change instantly, without staging', () => {
+        const items = [v(1), v(12), v(3)];
+        render(items);
+        render(items, 'CA1');
+        expect(view(latest)).toEqual(['stable:1', 'stable:12']);
+        render(items, '');
+        expect(view(latest)).toEqual(['stable:1', 'stable:12', 'stable:3']);
+        expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it('distorts a marker for the last distortMs before it enters', () => {
+        const options = { distortMs: 650 };
+        render([v(1)], '', options);
+        render([v(1), v(2)], '', options);
+        tick(2349);
+        expect(view(latest)).toEqual(['stable:1', 'pending:2']);
+        tick(1);
+        expect(view(latest)).toEqual(['stable:1', 'distorting:2']);
+        tick(649);
+        expect(view(latest)).toEqual(['stable:1', 'distorting:2']);
+        tick(1);
+        expect(view(latest)).toEqual(['stable:1', 'entering:2']);
+    });
+
+    describe('hold', () => {
+        const held = { distortMs: 650, hold: true };
+        const free = { distortMs: 650, hold: false };
+
+        it('keeps a pending entry calm past its delay, then distorts and enters on release', () => {
+            render([v(1)], '', held);
+            render([v(1), v(2)], '', held);
+            tick(10000);
+            expect(view(latest)).toEqual(['stable:1', 'pending:2']);
+            render([v(1), v(2)], '', free);
+            expect(view(latest)).toEqual(['stable:1', 'distorting:2']);
+            tick(650);
+            expect(view(latest)).toEqual(['stable:1', 'entering:2']);
+            tick(280);
+            expect(view(latest)).toEqual(['stable:1', 'stable:2']);
+        });
+
+        it('lets a pending entry finish its calm time normally if released before it is due', () => {
+            render([v(1)], '', held);
+            render([v(1), v(2)], '', held);
+            tick(1000);
+            render([v(1), v(2)], '', free);
+            expect(view(latest)).toEqual(['stable:1', 'pending:2']);
+            tick(1350);
+            expect(view(latest)).toEqual(['stable:1', 'distorting:2']);
+        });
+
+        it('keeps a leaving entry leaving past its delay, then exits on release', () => {
+            render([v(1), v(2)], '', held);
+            render([v(1)], '', held);
+            tick(10000);
+            expect(view(latest)).toEqual(['stable:1', 'leaving:2']);
+            render([v(1)], '', free);
+            expect(view(latest)).toEqual(['stable:1', 'exiting:2']);
+            tick(280);
+            expect(view(latest)).toEqual(['stable:1']);
+        });
+
+        it('does not freeze entries already distorting, entering or exiting', () => {
+            render([v(1), v(9)], '', free);
+            render([v(1), v(2), v(3)], '', free);   // add 2 and 3, remove 9
+            tick(2350);
+            render([v(1), v(2), v(3)], '', held);
+            expect(view(latest)).toEqual(['stable:1', 'leaving:9', 'distorting:2', 'distorting:3']);
+            tick(650);   // 9 is due now, but held
+            expect(view(latest)).toEqual(['stable:1', 'leaving:9', 'entering:2', 'entering:3']);
+            tick(280);
+            expect(view(latest)).toEqual(['stable:1', 'leaving:9', 'stable:2', 'stable:3']);
+
+            render([v(1), v(3)], '', free);     // 9 exits, 2 leaves
+            tick(3000);
+            expect(view(latest)).toEqual(['stable:1', 'exiting:2', 'stable:3']);
+            render([v(1), v(3)], '', held);     // hold while 2 is exiting
+            tick(280);
+            expect(view(latest)).toEqual(['stable:1', 'stable:3']);
+        });
+
+        it('drops a pending entry removed while held, and restores a leaving one re-added', () => {
+            render([v(1), v(2)], '', held);
+            render([v(1), v(3)], '', held);   // remove 2, add 3
+            tick(5000);
+            expect(view(latest)).toEqual(['stable:1', 'leaving:2', 'pending:3']);
+            render([v(1), v(2)], '', held);   // 3 cancelled, 2 back
+            expect(view(latest)).toEqual(['stable:1', 'stable:2']);
+            render([v(1), v(2)], '', free);
+            tick(5000);
+            expect(view(latest)).toEqual(['stable:1', 'stable:2']);
+            expect(vi.getTimerCount()).toBe(0);
+        });
+
+        it('applies a bulk update immediately while held', () => {
+            render([v(1), v(2)], '', held);
+            render([v(1)], '', held);
+            tick(5000);
+            const many = Array.from({ length: 12 }, (_, i) => v(100 + i));
+            render(many, '', held);
+            expect(latest.every(e => e.phase === 'stable')).toBe(true);
+            expect(latest.map(e => e.key)).toEqual(many.map(getKey));
+        });
+
+        it('releases several overdue entries top to bottom, releaseStagger apart', () => {
+            const opts = hold => ({ ...held, hold, releaseStagger: 70 });
+            render([v(1), v(3), v(5)], '', opts(true));
+            render([v(2), v(3), v(4)], '', opts(true));   // -1 +2, +4 -5
+            tick(5000);
+            expect(view(latest)).toEqual(['leaving:1', 'pending:2', 'stable:3', 'leaving:5', 'pending:4']);
+            render([v(2), v(3), v(4)], '', opts(false));
+            expect(view(latest)).toEqual(['exiting:1', 'pending:2', 'stable:3', 'leaving:5', 'pending:4']);
+            tick(70);
+            expect(view(latest)).toEqual(['exiting:1', 'distorting:2', 'stable:3', 'leaving:5', 'pending:4']);
+            tick(70);
+            expect(view(latest)).toEqual(['exiting:1', 'distorting:2', 'stable:3', 'exiting:5', 'pending:4']);
+            render([v(2), v(3), v(4)], '', opts(true));   // held again mid-stagger: 4 keeps waiting
+            tick(580);   // 2 enters, 5 is gone
+            tick(280);   // 2 settles
+            tick(5000);
+            expect(view(latest)).toEqual(['stable:2', 'stable:3', 'pending:4']);
+            render([v(2), v(3), v(4)], '', opts(false));
+            expect(view(latest)).toEqual(['stable:2', 'stable:3', 'distorting:4']);
+        });
+
+        it('releases all overdue entries at once without a stagger', () => {
+            render([v(1), v(3)], '', held);
+            render([v(2), v(4)], '', held);
+            tick(5000);
+            render([v(2), v(4)], '', free);
+            expect(view(latest)).toEqual(['exiting:1', 'exiting:3', 'distorting:2', 'distorting:4']);
+        });
+    });
+
+    it('clears all timers on unmount', () => {
+        render([v(1)]);
+        render([v(2)]);
+        expect(vi.getTimerCount()).toBeGreaterThan(0);
+        act(() => root.unmount());
+        expect(vi.getTimerCount()).toBe(0);
+        root = createRoot(container);   // afterEach unmounts again
+    });
+});
+
+describe('reconcileStaged / advanceStaged (pure)', () => {
+    const start = items => reconcileStaged(initialStagedState, items, getKey);
+
+    it('treats a re-sort as a move: leaving at the old spot, marker at the new', () => {
+        const s0 = start([v(1), v(2), v(3)]);
+        const s1 = reconcileStaged(s0, [v(2), v(3), v(1)], getKey);
+        expect(view(s1.entries)).toEqual(['leaving:1', 'stable:2', 'stable:3', 'pending:1']);
+        // The two entries for key 1 have distinct ids (React keys).
+        expect(s1.entries[0].id).not.toBe(s1.entries[3].id);
+    });
+
+    it('applies bulk replacements without staging', () => {
+        const s0 = start([v(1), v(2)]);
+        const many = Array.from({ length: 12 }, (_, i) => v(100 + i));
+        const s1 = reconcileStaged(s0, many, getKey, { bulkThreshold: 10 });
+        expect(s1.entries.every(e => e.phase === 'stable')).toBe(true);
+        expect(s1.entries.map(e => e.key)).toEqual(many.map(getKey));
+    });
+
+    it('returns the same state when nothing changed', () => {
+        const items = [v(1), v(2)];
+        const s0 = start(items);
+        expect(reconcileStaged(s0, items, getKey)).toBe(s0);
+    });
+
+    it('skips the animation phases when motion is reduced', () => {
+        const s0 = start([v(1)]);
+        const s1 = reconcileStaged(s0, [v(2)], getKey);
+        expect(view(s1.entries)).toEqual(['leaving:1', 'pending:2']);
+        const [leaving, pending] = s1.entries;
+        const s2 = advanceStaged(s1, pending.id, 'pending', false);
+        const s3 = advanceStaged(s2, leaving.id, 'leaving', false);
+        expect(view(s3.entries)).toEqual(['stable:2']);
+    });
+
+    it('sends a pending entry through distorting when asked to', () => {
+        const s0 = start([v(1)]);
+        const s1 = reconcileStaged(s0, [v(1), v(2)], getKey);
+        const id = s1.entries[1].id;
+        const s2 = advanceStaged(s1, id, 'pending', true, true);
+        expect(view(s2.entries)).toEqual(['stable:1', 'distorting:2']);
+        expect(view(advanceStaged(s2, id, 'distorting').entries)).toEqual(['stable:1', 'entering:2']);
+        expect(view(advanceStaged(s2, id, 'distorting', false).entries)).toEqual(['stable:1', 'stable:2']);
+    });
+
+    it('treats a distorting marker like a pending one: it moves along, or is dropped', () => {
+        const s0 = start([v(1), v(3), v(4)]);
+        const s1 = reconcileStaged(s0, [v(1), v(2), v(3), v(4)], getKey);
+        const s2 = advanceStaged(s1, s1.entries[1].id, 'pending', true, true);
+        const moved = reconcileStaged(s2, [v(1), v(3), v(4), v(2)], getKey);
+        expect(view(moved.entries)).toEqual(['stable:1', 'stable:3', 'stable:4', 'distorting:2']);
+        expect(moved.entries[3].id).toBe(s2.entries[1].id);
+        expect(view(reconcileStaged(s2, [v(1), v(3), v(4)], getKey).entries))
+            .toEqual(['stable:1', 'stable:3', 'stable:4']);
+    });
+
+    it('ignores a stale timer for an entry whose phase changed', () => {
+        const s0 = start([v(1)]);
+        const s1 = reconcileStaged(s0, [], getKey);
+        const id = s1.entries[0].id;
+        const s2 = reconcileStaged(s1, [v(1)], getKey);   // restored
+        expect(advanceStaged(s2, id, 'leaving')).toBe(s2);
+    });
+});

frontend/src/hooks/useStagedList.js

@@ -0,0 +1,269 @@
+import { useEffect, useReducer, useRef } from 'react';
+
+/**
+ * Display layer for a live, sorted list that changes under the user's cursor.
+ *
+ * Returns entries `{ id, key, item, phase }` in display order, lagging the
+ * live list so rows never move without warning:
+ *
+ *   pending    - item is in the live list but not shown yet; render a marker
+ *                where it will appear. After `delay - distortMs` -> distorting
+ *                (or, with `distortMs` = 0, after `delay` -> entering).
+ *   distorting - the marker's last moment before the row opens. After
+ *                `distortMs` -> entering.
+ *   entering   - row is animating in. After `enterMs` -> stable.
+ *   stable     - normal row.
+ *   leaving    - row is gone from the live list but kept in place, marked.
+ *                After `delay` -> exiting.
+ *   exiting    - row is animating out. After `animationMs` it is dropped.
+ *
+ * `enterMs` defaults to `animationMs`; a value of 0 skips the entering phase
+ * (and `animationMs` = 0 skips exiting).
+ *
+ * `hold` (read live) parks the list while the user is pointing at it: a
+ * pending entry whose time is up stays pending (no distortion) and a leaving
+ * one stays leaving. Entries already distorting, entering or exiting finish.
+ * When `hold` turns false the overdue entries proceed in display order,
+ * `releaseStagger` ms apart.
+ *
+ * A row whose sort position changes becomes a `leaving` ghost at the old spot
+ * plus a `pending` entry at the new one. Each entry has its own timer.
+ * Content updates (same key, same position) apply immediately.
+ *
+ * Not staged: the first non-empty data (or any time nothing was shown), and
+ * bulk replacements touching more than `bulkThreshold` rows (a full reload).
+ * With prefers-reduced-motion the distorting/entering/exiting phases are
+ * skipped; the pending/leaving warning still lasts `delay`.
+ *
+ * `id` is unique per entry (a moved item briefly has two), use it as the
+ * React key. `getKey` may be an inline function.
+ */
+
+const LIVE_PHASES = new Set(['pending', 'distorting', 'entering', 'stable']);
+const HOLDABLE = new Set(['pending', 'leaving']);
+const isMarker = phase => phase === 'pending' || phase === 'distorting';
+const HEAD = Symbol('head');
+
+export const initialStagedState = { entries: [], nextId: 1 };
+
+// Indices (into `seq`) of one longest strictly increasing subsequence.
+function longestIncreasing(seq) {
+    const tails = [];   // tails[len] = index in seq of the smallest tail for length len+1
+    const prev = new Array(seq.length);
+    for (let i = 0; i < seq.length; i++) {
+        let lo = 0, hi = tails.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (seq[tails[mid]] < seq[i]) lo = mid + 1; else hi = mid;
+        }
+        prev[i] = lo > 0 ? tails[lo - 1] : -1;
+        tails[lo] = i;
+    }
+    const result = new Set();
+    for (let i = tails.length ? tails[tails.length - 1] : -1; i !== -1; i = prev[i]) result.add(i);
+    return result;
+}
+
+function sameEntries(a, b) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+        const x = a[i], y = b[i];
+        if (x.id !== y.id || x.phase !== y.phase || x.item !== y.item) return false;
+    }
+    return true;
+}
+
+/** Merge a new live list into the displayed state. Pure. */
+export function reconcileStaged(state, items, getKey, { bulkThreshold = 10 } = {}) {
+    const prev = state.entries;
+    let nextId = state.nextId;
+    const liveKeys = items.map(getKey);
+    const liveMap = new Map();
+    liveKeys.forEach((k, i) => liveMap.set(k, items[i]));
+    const liveIndex = new Map(liveKeys.map((k, i) => [k, i]));
+
+    // The entry currently representing each key at its live position. A
+    // `leaving` ghost whose key came back is a candidate to be restored.
+    const current = new Map();
+    for (const e of prev) if (LIVE_PHASES.has(e.phase)) current.set(e.key, e);
+    for (const e of prev) {
+        if (e.phase === 'leaving' && liveMap.has(e.key) && !current.has(e.key)) current.set(e.key, e);
+    }
+
+    // Survivors (still live) in previous display order; those on a longest
+    // increasing run of new positions stay put, the rest have moved.
+    const survivors = prev.filter(e => current.get(e.key) === e && liveMap.has(e.key));
+    const staySet = longestIncreasing(survivors.map(e => liveIndex.get(e.key)));
+    const staying = new Set(survivors.filter((_, i) => staySet.has(i)).map(e => e.key));
+
+    const added = liveKeys.filter(k => !current.has(k)).length;
+    const removed = [...current.values()].filter(e => e.phase !== 'leaving' && !liveMap.has(e.key)).length;
+    const moved = survivors.length - staying.size;
+    const hadRows = prev.some(e => LIVE_PHASES.has(e.phase));
+
+    if (!hadRows || added + removed + moved > bulkThreshold) {
+        const entries = liveKeys.map(k => ({
+            id: current.get(k)?.id ?? nextId++,
+            key: k,
+            item: liveMap.get(k),
+            phase: 'stable',
+        }));
+        const next = { entries, nextId };
+        return sameEntries(prev, entries) ? state : next;
+    }
+
+    const placed = new Map();
+    const ghostsAfter = new Map();
+    const addGhost = (anchor, entry) => {
+        if (!ghostsAfter.has(anchor)) ghostsAfter.set(anchor, []);
+        ghostsAfter.get(anchor).push(entry);
+    };
+
+    let anchor = HEAD;
+    for (const e of prev) {
+        const isCurrent = current.get(e.key) === e;
+        if (isCurrent && liveMap.has(e.key)) {
+            const item = liveMap.get(e.key);
+            if (staying.has(e.key)) {
+                placed.set(e.key, { ...e, item, phase: e.phase === 'leaving' ? 'stable' : e.phase });
+                anchor = e.key;
+            } else if (isMarker(e.phase)) {
+                placed.set(e.key, { ...e, item });  // marker just moves, its timer keeps running
+            } else {
+                // Moved: warn at the old spot, marker at the new one.
+                addGhost(anchor, e.phase === 'leaving' ? e : { ...e, item, phase: 'leaving' });
+                placed.set(e.key, { id: nextId++, key: e.key, item, phase: 'pending' });
+            }
+        } else if (isCurrent) {
+            // Gone from the live list. A pending add is simply cancelled.
+            if (!isMarker(e.phase)) addGhost(anchor, e.phase === 'leaving' ? e : { ...e, phase: 'leaving' });
+        } else if (e.phase === 'leaving' || e.phase === 'exiting') {
+            addGhost(anchor, e);
+        }
+    }
+
+    const entries = [...(ghostsAfter.get(HEAD) || [])];
+    for (const k of liveKeys) {
+        entries.push(placed.get(k) || { id: nextId++, key: k, item: liveMap.get(k), phase: 'pending' });
+        if (ghostsAfter.has(k)) entries.push(...ghostsAfter.get(k));
+    }
+
+    return sameEntries(prev, entries) ? state : { entries, nextId };
+}
+
+/** Move one entry to its next phase when its timer fires. Pure. `distort`
+ *  sends a pending entry to distorting instead of straight to entering. */
+export function advanceStaged(state, id, phase, animate = true, distort = false) {
+    const index = state.entries.findIndex(e => e.id === id);
+    if (index === -1 || state.entries[index].phase !== phase) return state;
+
+    const NEXT = animate
+        ? { pending: distort ? 'distorting' : 'entering', distorting: 'entering', entering: 'stable', leaving: 'exiting', exiting: null }
+        : { pending: 'stable', distorting: 'stable', entering: 'stable', leaving: null, exiting: null };
+    const nextPhase = NEXT[phase];
+    const entries = nextPhase
+        ? state.entries.map((e, i) => (i === index ? { ...e, phase: nextPhase } : e))
+        : state.entries.filter((_, i) => i !== index);
+    return { ...state, entries };
+}
+
+function reducer(state, action) {
+    switch (action.type) {
+        case 'sync':
+            return reconcileStaged(state, action.items, action.getKey, action.options);
+        case 'advance':
+            return advanceStaged(state, action.id, action.phase, action.animate, action.distort);
+        default:
+            return state;
+    }
+}
+
+export const prefersReducedMotion = () =>
+    typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+export default function useStagedList(items, {
+    getKey, delay = 3000, animationMs = 280, enterMs = animationMs, distortMs = 0, bulkThreshold = 10,
+    hold = false, releaseStagger = 0,
+} = {}) {
+    const getKeyRef = useRef(getKey);
+    getKeyRef.current = getKey;
+    const holdRef = useRef(hold);
+    holdRef.current = hold;
+
+    const [state, dispatch] = useReducer(reducer, undefined,
+        () => reconcileStaged(initialStagedState, items, getKey, { bulkThreshold }));
+
+    useEffect(() => {
+        dispatch({ type: 'sync', items, getKey: getKeyRef.current, options: { bulkThreshold } });
+    }, [items, bulkThreshold]);
+
+    const entriesRef = useRef(state.entries);
+    entriesRef.current = state.entries;
+
+    // One timer per entry in a timed phase; kept while the entry stays in
+    // that phase, so a new change never resets the others. A pending/leaving
+    // timer that fires while held marks its entry overdue (no handle) and
+    // waits for the release below.
+    const timersRef = useRef(new Map());
+    useEffect(() => {
+        const timers = timersRef.current;
+        const wanted = new Map();
+        for (const e of state.entries) {
+            if (e.phase !== 'stable') wanted.set(e.id, e.phase);
+        }
+        for (const [id, t] of timers) {
+            if (wanted.get(id) !== t.phase) {
+                clearTimeout(t.handle);
+                timers.delete(id);
+            }
+        }
+        for (const [id, phase] of wanted) {
+            if (timers.has(id)) continue;
+            const distort = phase === 'pending' && distortMs > 0 && !prefersReducedMotion();
+            const ms = {
+                pending: distort ? delay - distortMs : delay,
+                distorting: distortMs, leaving: delay, entering: enterMs, exiting: animationMs,
+            }[phase];
+            // The phase this timer leads into, if animated, lasts this long.
+            const nextMs = { pending: distort ? distortMs : enterMs, distorting: enterMs }[phase] ?? animationMs;
+            const t = { phase, handle: null, overdue: false };
+            t.fire = () => {
+                t.handle = null;
+                if (holdRef.current && HOLDABLE.has(phase)) {
+                    t.overdue = true;
+                    return;
+                }
+                timers.delete(id);
+                dispatch({ type: 'advance', id, phase, animate: nextMs > 0 && !prefersReducedMotion(), distort });
+            };
+            t.handle = setTimeout(t.fire, ms);
+            timers.set(id, t);
+        }
+    }, [state.entries, delay, animationMs, enterMs, distortMs]);
+
+    // Released: overdue entries go on, top to bottom. A staggered one that
+    // is still waiting when the hold returns becomes overdue again.
+    useEffect(() => {
+        if (hold) return;
+        const timers = timersRef.current;
+        let wait = 0;
+        for (const e of entriesRef.current) {
+            const t = timers.get(e.id);
+            if (!t?.overdue) continue;
+            t.overdue = false;
+            if (wait === 0) t.fire();
+            else t.handle = setTimeout(t.fire, wait);
+            wait += releaseStagger;
+        }
+    }, [hold, releaseStagger]);
+
+    useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            for (const t of timers.values()) clearTimeout(t.handle);
+            timers.clear();
+        };
+    }, []);
+
+    return state.entries;
+}

frontend/src/index.css

@@ -2,9 +2,7 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: var(--font-sans);
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--bg);
@@ -12,8 +10,7 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: var(--font-mono);
-    monospace;
 }
 
 * {

frontend/src/services/__tests__/vehicleReportData.test.js

@@ -0,0 +1,42 @@
+import { buildVehicleReportData, vehicleNetWeight } from '../vehicleReportData';
+
+describe('vehicleNetWeight', () => {
+  test('null vehicle has no net', () => {
+    expect(vehicleNetWeight(null)).toBeNull();
+  });
+
+  test('two weighings without a server net derive gross - tare', () => {
+    expect(vehicleNetWeight({ tare: 12000, gross: 28500, net: null })).toBe(16500);
+  });
+
+  test('the server net wins over the derived value', () => {
+    expect(vehicleNetWeight({ tare: 12000, gross: 28500, net: 16400 })).toBe(16400);
+  });
+
+  test('a one-weight vehicle (tare null, net = gross) uses net', () => {
+    expect(vehicleNetWeight({ tare: null, gross: 28500, net: 28500 })).toBe(28500);
+  });
+
+  test('a single open weighing has no net', () => {
+    expect(vehicleNetWeight({ tare: 12000, gross: null, net: null })).toBeNull();
+    expect(vehicleNetWeight({ tare: null, gross: 28500, net: null })).toBeNull();
+  });
+});
+
+describe('buildVehicleReportData', () => {
+  test('a one-weight vehicle reports net = gross and keeps tare null', () => {
+    const out = buildVehicleReportData(
+      { id: 1, tare: null, gross: 28500, net: 28500, doc_number: '2026-001', extra: { data: {} } },
+      {},
+      {}
+    );
+    expect(out.vehicle.net).toBe(28500);
+    expect(out.vehicle.tare).toBeNull();
+    expect(out.vehicle.gross).toBe(28500);
+  });
+
+  test('two weighings without a server net still derive net', () => {
+    const out = buildVehicleReportData({ id: 2, tare: 12000, gross: 28500 }, {}, {});
+    expect(out.vehicle.net).toBe(16500);
+  });
+});

frontend/src/services/vehicleReportData.js

@@ -1,3 +1,19 @@
+/**
+ * Net weight of a vehicle: the server's `net` when set, otherwise gross - tare
+ * when both are recorded, otherwise null. The server value comes first because
+ * a one-weight vehicle is finalized with tare = null and net = gross.
+ *
+ * @param {Object|null} vehicle
+ * @returns {number|null}
+ */
+export function vehicleNetWeight(vehicle) {
+    if (!vehicle) return null;
+    if (vehicle.net != null) return vehicle.net;
+    return (vehicle.tare != null && vehicle.gross != null)
+        ? vehicle.gross - vehicle.tare
+        : null;
+}
+
 /**
  * Shapes a vehicle for the report preview/design/print machinery.
  *
@@ -26,13 +42,10 @@ export function buildVehicleReportData(vehicle, definitions, entries) {
             extra[def.name] = value ?? '';
         }
     }
-    const netWeight = (vehicle.tare != null && vehicle.gross != null)
-        ? vehicle.gross - vehicle.tare
-        : null;
     return {
         vehicle: {
             ...vehicle,
-            net: vehicle.net ?? netWeight,
+            net: vehicleNetWeight(vehicle),
             extra,
         }
     };

frontend/src/styles/tokens.css

@@ -1,5 +1,6 @@
 /**
- * Design tokens — the single place every colour, radius and shadow is defined.
+ * Design tokens — the single place every colour, radius, shadow, font size
+ * and spacing step is defined.
  *
  * Two themes today: `classic` (the app's original light look) and `cockpit`
  * (dark, derived from the weigh-station reference image). A third theme is one
@@ -64,6 +65,13 @@
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.12);
   --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.18);
+  /* The dim behind a modal */
+  --backdrop: rgba(0, 0, 0, 0.5);
+
+  /* The desk the A4 designer's white page sits on, and the page-break label
+     drawn on it. Mid-grey, as in a word processor, so the page edge reads. */
+  --desk: #8a8a8a;
+  --desk-text: #e8e8e8;
 
   /* The header is its own surface: a saturated bar with white chrome on it,
      so it cannot borrow --surface/--text without losing that contrast. */
@@ -74,6 +82,9 @@
   --header-chrome-border: rgba(255, 255, 255, 0.3);
   --header-avatar-bg: #ffffff;
   --header-avatar-text: #667eea;
+  /* Active-item edge and focus ring on the rail. Not --accent: the accent is
+     the gradient's own start colour, so it would vanish on this bar. */
+  --header-active: #ffffff;
 
   /* Cockpit-only chrome, neutralised here so shared rules need no theme test */
   --hero-image: none;
@@ -127,6 +138,13 @@
   --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                    0 6px 18px rgba(0, 0, 0, 0.6);
   --shadow-overlay: 0 12px 48px rgba(0, 0, 0, 0.7);
+  /* Tinted with --bg rather than pure black, so the page behind a modal
+     sinks into the theme instead of turning grey. */
+  --backdrop: rgba(2, 10, 18, 0.75);
+
+  /* Darker than --bg so the white page is the brightest thing on screen */
+  --desk: #01070d;
+  --desk-text: #6e9caf;
 
   --header-bg: linear-gradient(180deg, #0a2336 0%, #04121e 100%);
   --header-text: #d9f6ff;
@@ -135,6 +153,7 @@
   --header-chrome-border: rgba(0, 217, 255, 0.34);
   --header-avatar-bg: #00d9ff;
   --header-avatar-text: #00232e;
+  --header-active: var(--accent);
 
   /* Wide crop of the reference photograph, shown beside the vehicle title in
      .vehicle-hero-photo, scaled proportionally (background-size: contain)
@@ -152,6 +171,45 @@
   --hazard: repeating-linear-gradient(-45deg, var(--warning) 0 7px, transparent 7px 15px);
 }
 
+/* Type and spacing are shared by every theme, so they live in a plain :root
+   block rather than being repeated per theme. A theme that wants a different
+   value (say a larger --fs-display for cockpit) overrides just that token in
+   its own block, whose attribute selector outranks this one. */
+:root {
+  /* Type */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Courier New', Consolas, monospace;
+
+  --fs-xs: 11px;
+  --fs-sm: 12px;
+  --fs-base: 13px;
+  --fs-md: 14px;
+  --fs-lg: 16px;
+  --fs-xl: 18px;
+  --fs-2xl: 22px;
+  --fs-3xl: 28px;
+  --fs-display: 32px; /* big figures: the weight reading etc. */
+
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+
+  /* Spacing — a 4px grid plus the half-steps (6, 10) this UI leans on too
+     often to snap away. Off-scale values snap to the nearest step. */
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-2-5: 10px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+}
+
 /* Native form controls and scrollbars follow the theme, so a dark theme does
    not get a white dropdown or a light scrollbar track. */
 :root[data-theme="cockpit"] {

serial_bridge/requirements.txt

@@ -2,6 +2,7 @@ Pillow==12.1.0
 pyserial==3.5
 python-dotenv==1.0.0
 flask==3.1.0
+flask-cors==5.0.0
 requests==2.32.5
 urllib3==2.6.3
 pystray==0.19.5