ui: redesign brand icon and fix clipped wordmark

- new mark: measurement-span glyph on rounded brand-gradient badge
  (favicon, inline logo, standalone tmflow-logo.svg)
- wordmark moved from SVG <text> with hardcoded x offsets (clipped
  "Flow" past the 260px viewBox, font-dependent overlap) to plain HTML
  spans — never clips, natural kerning, theme-adaptive
- _app_logo.html params: logo_class, wordmark_class, logo_id (unique
  gradient id when logo appears twice per page)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

CLAUDE.md

@@ -123,7 +123,7 @@ uv lock                                     # rigenera uv.lock
 ### i18n (Traduzioni)
 ```bash
 # Estrai stringhe
-cd src/frontend/flask_app && uv run pybabel extract -F babel.cfg -k _ -o translations/messages.pot .
+cd src/frontend/flask_app && uv run pybabel extract -F translations/babel.cfg -k _ -o translations/messages.pot .
 
 # Aggiorna catalogo
 cd src/frontend/flask_app && uv run pybabel update -i translations/messages.pot -d translations

src/backend/api/routers/files.py

@@ -1,5 +1,5 @@
 """File upload/download/delete router for images and PDFs."""
-import os
+import logging
 import re
 from pathlib import Path
 
@@ -11,6 +11,8 @@ from src.backend.config import settings
 from src.backend.api.middleware.api_key import get_current_user, require_maker
 from src.backend.models.orm.user import User
 
+logger = logging.getLogger(__name__)
+
 router = APIRouter(prefix="/api/files", tags=["files"])
 
 # Allowed MIME types
@@ -65,6 +67,37 @@ def sanitize_filename(filename: str) -> str:
     return filename
 
 
+def resolve_upload_path(file_path: str) -> Path:
+    """Resolve a user-supplied relative path inside the uploads directory.
+
+    Raises:
+        HTTPException: 404 if the path escapes the uploads directory,
+            cannot be resolved, or does not point to an existing file.
+    """
+    try:
+        full_path = (settings.upload_path / file_path).resolve()
+        if not full_path.is_relative_to(settings.upload_path.resolve()):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Access denied",
+            )
+    except HTTPException:
+        raise
+    except (OSError, RuntimeError, ValueError):
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="File not found",
+        )
+
+    if not full_path.exists() or not full_path.is_file():
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="File not found",
+        )
+
+    return full_path
+
+
 def generate_thumbnail(image_path: Path, thumbnail_path: Path, max_size: tuple[int, int] = (200, 200)):
     """Generate a thumbnail for an image."""
     try:
@@ -73,7 +106,7 @@ def generate_thumbnail(image_path: Path, thumbnail_path: Path, max_size: tuple[i
             img.save(thumbnail_path, quality=85)
     except Exception as e:
         # If thumbnail generation fails, we continue without it
-        print(f"Thumbnail generation failed: {e}")
+        logger.warning("Thumbnail generation failed for %s: %s", image_path, e)
 
 
 @router.post("/upload")
@@ -164,30 +197,7 @@ async def get_file(
 
     Requires authentication but no specific role.
     """
-    # Construct full path
+    full_path = resolve_upload_path(file_path)
-    full_path = settings.upload_path / file_path
-
-    # Security: ensure path is within uploads directory
-    try:
-        full_path = full_path.resolve()
-        if not str(full_path).startswith(str(settings.upload_path.resolve())):
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Access denied",
-            )
-    except Exception:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail="File not found",
-        )
-
-    # Check if file exists
-    if not full_path.exists() or not full_path.is_file():
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail="File not found",
-        )
-
     return FileResponse(full_path)
 
 
@@ -200,29 +210,7 @@ async def delete_file(
 
     Also deletes associated thumbnail if it exists.
     """
-    # Construct full path
+    full_path = resolve_upload_path(file_path)
-    full_path = settings.upload_path / file_path
-
-    # Security: ensure path is within uploads directory
-    try:
-        full_path = full_path.resolve()
-        if not str(full_path).startswith(str(settings.upload_path.resolve())):
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Access denied",
-            )
-    except Exception:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail="File not found",
-        )
-
-    # Check if file exists
-    if not full_path.exists() or not full_path.is_file():
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail="File not found",
-        )
 
     # Delete thumbnail if it exists
     if full_path.parent.name != "thumbnails":

src/backend/api/routers/measurements.py

@@ -84,6 +84,44 @@ async def create_measurement_batch(
         )
 
 
+def _build_measurement_filters(
+    recipe_id: int | None,
+    version_id: int | None,
+    subtask_id: int | None,
+    measured_by: int | None,
+    lot_number: str | None,
+    serial_number: str | None,
+    date_from: datetime | None,
+    date_to: datetime | None,
+    pass_fail: str | None,
+) -> list:
+    """Build SQLAlchemy filter conditions shared by list and CSV export."""
+    filters = []
+    if recipe_id is not None:
+        # Filter by recipe via subquery on RecipeVersion
+        version_ids = select(RecipeVersion.id).where(
+            RecipeVersion.recipe_id == recipe_id
+        )
+        filters.append(Measurement.version_id.in_(version_ids))
+    if version_id is not None:
+        filters.append(Measurement.version_id == version_id)
+    if subtask_id is not None:
+        filters.append(Measurement.subtask_id == subtask_id)
+    if measured_by is not None:
+        filters.append(Measurement.measured_by == measured_by)
+    if lot_number is not None:
+        filters.append(Measurement.lot_number == lot_number)
+    if serial_number is not None:
+        filters.append(Measurement.serial_number == serial_number)
+    if date_from is not None:
+        filters.append(Measurement.measured_at >= date_from)
+    if date_to is not None:
+        filters.append(Measurement.measured_at <= date_to)
+    if pass_fail is not None:
+        filters.append(Measurement.pass_fail == pass_fail)
+    return filters
+
+
 @router.get("/", response_model=MeasurementListResponse)
 async def get_measurements(
     recipe_id: int | None = Query(None),
@@ -108,30 +146,10 @@ async def get_measurements(
     filters. Measurements carry no PII beyond numeric values + a recipe
     reference, so role-gating beyond authentication isn't justified.
     """
-    # Build filter conditions
+    filters = _build_measurement_filters(
-    filters = []
+        recipe_id, version_id, subtask_id, measured_by, lot_number,
-    if recipe_id is not None:
+        serial_number, date_from, date_to, pass_fail,
-        # Filter by recipe via subquery on RecipeVersion
-        version_ids = select(RecipeVersion.id).where(
-            RecipeVersion.recipe_id == recipe_id
     )
-        filters.append(Measurement.version_id.in_(version_ids))
-    if version_id is not None:
-        filters.append(Measurement.version_id == version_id)
-    if subtask_id is not None:
-        filters.append(Measurement.subtask_id == subtask_id)
-    if measured_by is not None:
-        filters.append(Measurement.measured_by == measured_by)
-    if lot_number is not None:
-        filters.append(Measurement.lot_number == lot_number)
-    if serial_number is not None:
-        filters.append(Measurement.serial_number == serial_number)
-    if date_from is not None:
-        filters.append(Measurement.measured_at >= date_from)
-    if date_to is not None:
-        filters.append(Measurement.measured_at <= date_to)
-    if pass_fail is not None:
-        filters.append(Measurement.pass_fail == pass_fail)
 
     # Build query
     query = select(Measurement).where(and_(*filters) if filters else True)
@@ -196,29 +214,10 @@ async def export_measurements_csv(
     decimal_setting = decimal_result.scalar_one_or_none()
     decimal_separator = decimal_setting.setting_value if decimal_setting else "."
 
-    # Build filter conditions (same as get_measurements)
+    filters = _build_measurement_filters(
-    filters = []
+        recipe_id, version_id, subtask_id, measured_by, lot_number,
-    if recipe_id is not None:
+        serial_number, date_from, date_to, pass_fail,
-        version_ids = select(RecipeVersion.id).where(
-            RecipeVersion.recipe_id == recipe_id
     )
-        filters.append(Measurement.version_id.in_(version_ids))
-    if version_id is not None:
-        filters.append(Measurement.version_id == version_id)
-    if subtask_id is not None:
-        filters.append(Measurement.subtask_id == subtask_id)
-    if measured_by is not None:
-        filters.append(Measurement.measured_by == measured_by)
-    if lot_number is not None:
-        filters.append(Measurement.lot_number == lot_number)
-    if serial_number is not None:
-        filters.append(Measurement.serial_number == serial_number)
-    if date_from is not None:
-        filters.append(Measurement.measured_at >= date_from)
-    if date_to is not None:
-        filters.append(Measurement.measured_at <= date_to)
-    if pass_fail is not None:
-        filters.append(Measurement.pass_fail == pass_fail)
 
     # Query all matching measurements
     query = select(Measurement).where(and_(*filters) if filters else True)

src/backend/api/routers/setup.py

@@ -15,6 +15,7 @@ from pydantic import BaseModel
 from sqlalchemy import inspect as sa_inspect, select
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from src.backend.api.routers.users import VALID_ROLES
 from src.backend.config import settings
 from src.backend.database import Base, engine, async_session_factory
 from src.backend.models.orm import (
@@ -544,7 +545,6 @@ async def manage_user(body: ManageUserBody):
     """Create or update a user. user_id=null creates new, user_id=int updates."""
     _check_password(body.password)
 
-    VALID_ROLES = {"Maker", "MeasurementTec", "Metrologist"}
     invalid = set(body.roles) - VALID_ROLES
     if invalid:
         raise HTTPException(

src/frontend/flask_app/app.py

@@ -1,6 +1,8 @@
 """TieMeasureFlow Client - Flask Entry Point."""
 import json
 import os
+from datetime import date
+from urllib.parse import urlparse
 
 from flask import Flask, redirect, url_for, session, request
 from flask_babel import Babel
@@ -63,7 +65,14 @@ def create_app() -> Flask:
         """Set user's preferred language and store in session."""
         if lang in Config.LANGUAGES:
             session["language"] = lang
-        return redirect(request.referrer or url_for("auth.login"))
+        # Only follow the referrer if it points back to this host
+        # (prevents open redirect via a forged Referer header).
+        referrer = request.referrer
+        if referrer:
+            parsed = urlparse(referrer)
+            if parsed.netloc and parsed.netloc != request.host:
+                referrer = None
+        return redirect(referrer or url_for("auth.login"))
 
     @app.template_filter("tojson_attr")
     def tojson_attr_filter(value):
@@ -93,6 +102,7 @@ def create_app() -> Flask:
             "languages": Config.LANGUAGES,
             "company_logo": session.get("company_logo"),
             "auto_logout_minutes": session.get("auto_logout_minutes"),
+            "current_year": date.today().year,
         }
 
     return app

src/frontend/flask_app/blueprints/maker.py

@@ -1,12 +1,13 @@
 """Maker blueprint - recipe creation and editing."""
 import requests as http_requests
 
-from flask import Blueprint, Response, flash, jsonify, redirect, render_template, request, session, url_for
+from flask import Blueprint, flash, jsonify, redirect, render_template, request, session, url_for
 from flask_babel import gettext as _
 
 from blueprints.auth import login_required, role_required
 from config import Config
 from services.api_client import api_client
+from services.file_proxy import proxy_file
 
 maker_bp = Blueprint("maker", __name__, url_prefix="/maker")
 
@@ -380,19 +381,7 @@ def api_upload_file():
 @login_required
 def api_get_file(file_path: str):
     """Proxy: Serve file from API server (browser can't send X-API-Key)."""
-    api_key = session.get("api_key", "")
+    return proxy_file(file_path)
-    base_url = Config.API_SERVER_URL.rstrip("/")
-    resp = http_requests.get(
-        f"{base_url}/api/files/{file_path}",
-        headers={"X-API-Key": api_key},
-        timeout=30,
-    )
-    if resp.status_code != 200:
-        return Response(resp.text, status=resp.status_code)
-    return Response(
-        resp.content,
-        content_type=resp.headers.get("content-type", "application/octet-stream"),
-    )
 
 
 @maker_bp.route("/api/files/<path:file_path>", methods=["DELETE"])
@@ -444,4 +433,11 @@ def api_parse_technical_sheet(recipe_id: int):
         timeout=90,
     )
 
-    return jsonify(resp.json()), resp.status_code
+    try:
+        payload = resp.json()
+    except ValueError:
+        payload = {
+            "error": True,
+            "detail": resp.text or f"HTTP {resp.status_code}",
+        }
+    return jsonify(payload), resp.status_code

src/frontend/flask_app/blueprints/measure.py

@@ -1,8 +1,6 @@
 """MeasurementTec blueprint - recipe selection and measurement execution."""
-import requests as http_requests
-
 from flask import (
-    Blueprint, Response, flash, jsonify, redirect, render_template,
+    Blueprint, flash, jsonify, redirect, render_template,
     request, session, url_for,
 )
 from flask_babel import gettext as _
@@ -10,6 +8,7 @@ from flask_babel import gettext as _
 from blueprints.auth import login_required, role_required
 from config import Config
 from services.api_client import api_client
+from services.file_proxy import proxy_file
 
 measure_bp = Blueprint("measure", __name__)
 
@@ -339,17 +338,17 @@ def validate_supervisor():
     password = data.get("password", "")
 
     if not username or not password:
-        return jsonify({"error": True, "detail": "Username e password richiesti"}), 400
+        return jsonify({"error": True, "detail": _("Username e password richiesti")}), 400
 
     resp = api_client.post("/api/auth/login", data={"username": username, "password": password})
 
     if resp.get("error"):
-        return jsonify({"error": True, "detail": "Credenziali non valide"}), 401
+        return jsonify({"error": True, "detail": _("Credenziali non valide")}), 401
 
     user = resp.get("user", {})
     is_supervisor = "Supervisor" in (user.get("roles") or [])
     if not (is_supervisor or user.get("is_admin")):
-        return jsonify({"error": True, "detail": "Utente non autorizzato (richiesto capoturno)"}), 403
+        return jsonify({"error": True, "detail": _("Utente non autorizzato (richiesto capoturno)")}), 403
 
     return jsonify({"authorized": True, "supervisor": user.get("display_name", username)}), 200
 
@@ -361,16 +360,4 @@ def validate_supervisor():
 @login_required
 def api_get_file(file_path: str):
     """Proxy: Serve file from API server (browser can't send X-API-Key)."""
-    api_key = session.get("api_key", "")
+    return proxy_file(file_path)
-    base_url = Config.API_SERVER_URL.rstrip("/")
-    resp = http_requests.get(
-        f"{base_url}/api/files/{file_path}",
-        headers={"X-API-Key": api_key},
-        timeout=30,
-    )
-    if resp.status_code != 200:
-        return Response(resp.text, status=resp.status_code)
-    return Response(
-        resp.content,
-        content_type=resp.headers.get("content-type", "application/octet-stream"),
-    )

src/frontend/flask_app/services/file_proxy.py

@@ -0,0 +1,25 @@
+"""Shared file proxy: relay uploads from the FastAPI server to the browser.
+
+The browser can't send the X-API-Key header directly, so blueprints expose
+a proxy route and delegate here.
+"""
+import requests as http_requests
+from flask import Response, session
+
+from config import Config
+
+
+def proxy_file(file_path: str) -> Response:
+    """Fetch a file from the API server and relay it with its content type."""
+    base_url = Config.API_SERVER_URL.rstrip("/")
+    resp = http_requests.get(
+        f"{base_url}/api/files/{file_path}",
+        headers={"X-API-Key": session.get("api_key", "")},
+        timeout=30,
+    )
+    if resp.status_code != 200:
+        return Response(resp.text, status=resp.status_code)
+    return Response(
+        resp.content,
+        content_type=resp.headers.get("content-type", "application/octet-stream"),
+    )

src/frontend/flask_app/static/css/themes.css

@@ -69,6 +69,23 @@
 }
 
 
+/* ============================================================
+   Brand details
+   ============================================================ */
+
+:root {
+  accent-color: var(--color-primary);
+}
+
+::selection {
+  background: rgba(37, 99, 235, 0.2);
+}
+
+.dark ::selection {
+  background: rgba(96, 165, 250, 0.3);
+}
+
+
 /* ============================================================
    Global Transitions
    ============================================================ */
@@ -151,6 +168,7 @@ textarea:focus-visible {
 
 .tmf-card:hover {
   box-shadow: var(--shadow-md);
+  border-color: var(--scrollbar-thumb);
 }
 
 .tmf-card-header {
@@ -250,11 +268,21 @@ textarea:focus-visible {
   border: 1px solid transparent;
 }
 
+.btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 .btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+.btn-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 0.625rem;
+}
+
 .btn-primary {
   background: var(--color-primary);
   color: #FFFFFF;

src/frontend/flask_app/static/img/tmflow-icon.svg

@@ -1,27 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <!-- Stylized Caliper Icon for Favicon -->
+  <!-- TieMeasureFlow brand mark: measurement span glyph on brand-blue badge -->
+  <defs>
+    <linearGradient id="tmfBadge" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3B82F6"/>
+      <stop offset="1" stop-color="#1D4ED8"/>
+    </linearGradient>
+  </defs>
 
-  <!-- Caliper outer frame -->
+  <!-- Badge -->
-  <rect x="2" y="3" width="5" height="26" rx="1.5" fill="#2563EB"/>
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadge)"/>
-  <rect x="2" y="3" width="19" height="5" rx="1.5" fill="#2563EB"/>
-  <rect x="2" y="24" width="19" height="5" rx="1.5" fill="#2563EB"/>
 
-  <!-- Sliding jaw -->
+  <!-- Measurement end bars -->
-  <rect x="12" y="8" width="4.5" height="6.5" rx="1" fill="#1E40AF"/>
+  <rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
-  <rect x="12" y="17.5" width="4.5" height="6.5" rx="1" fill="#1E40AF"/>
+  <rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
 
-  <!-- Depth rod -->
+  <!-- Double-headed arrow (measured span) -->
-  <rect x="4" y="14" width="12" height="3.5" rx="1" fill="#3B82F6" opacity="0.55"/>
+  <path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
-
+  <path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <!-- Scale markings -->
+  <path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <rect x="8" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-  <rect x="11" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-  <rect x="14" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-  <rect x="17" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-
-  <!-- Flow arrow -->
-  <path d="M22 16 C25 16, 26.5 11, 29 11"
-        stroke="#3B82F6" stroke-width="2.2" stroke-linecap="round" fill="none"/>
-  <path d="M27 8.5 L29.5 11 L27 13.5"
-        stroke="#3B82F6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
 </svg>

src/frontend/flask_app/static/img/tmflow-logo.svg

@@ -1,41 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 44" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 64" fill="none">
-  <!-- Stylized Caliper Icon -->
+  <!-- TieMeasureFlow full logo: brand badge + wordmark (standalone asset) -->
-  <g transform="translate(2, 2)">
+  <defs>
-    <!-- Caliper outer frame -->
+    <linearGradient id="tmfBadgeFull" x1="0" y1="0" x2="1" y2="1">
-    <rect x="0" y="4" width="6" height="32" rx="1.5" fill="#2563EB"/>
+      <stop offset="0" stop-color="#3B82F6"/>
-    <rect x="0" y="4" width="24" height="6" rx="1.5" fill="#2563EB"/>
+      <stop offset="1" stop-color="#1D4ED8"/>
-    <rect x="0" y="30" width="24" height="6" rx="1.5" fill="#2563EB"/>
+    </linearGradient>
+  </defs>
 
-    <!-- Caliper sliding jaw -->
+  <!-- Badge -->
-    <rect x="14" y="10" width="5" height="8" rx="1" fill="#1E40AF"/>
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadgeFull)"/>
-    <rect x="14" y="22" width="5" height="8" rx="1" fill="#1E40AF"/>
+  <rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
+  <rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
+  <path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+  <path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 
-    <!-- Caliper depth rod -->
+  <!-- Wordmark: single text element with flowing tspans (cannot be clipped/overlap) -->
-    <rect x="2" y="18" width="16" height="4" rx="1" fill="#3B82F6" opacity="0.6"/>
+  <text x="76" y="42" font-family="Inter, system-ui, -apple-system, sans-serif"
-
+        font-size="30" letter-spacing="-0.5" fill="#0F172A">
-    <!-- Scale markings -->
+    <tspan font-weight="700">Tie</tspan><tspan font-weight="600" fill="#2563EB">Measure</tspan><tspan font-weight="700">Flow</tspan>
-    <rect x="7" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
+  </text>
-    <rect x="10" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="13" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="16" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="19" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-
-    <!-- Flow arrow (smooth curve) -->
-    <path d="M26 20 C30 20, 32 14, 36 14 C40 14, 40 20, 36 20"
-          stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" fill="none"/>
-    <path d="M34 17 L37 20 L34 23" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-  </g>
-
-  <!-- Text: TieMeasureFlow -->
-  <g transform="translate(48, 0)">
-    <!-- "Tie" in bold primary -->
-    <text x="0" y="28" font-family="Inter, system-ui, sans-serif" font-size="20" font-weight="700" fill="#2563EB"
-          letter-spacing="-0.5">Tie</text>
-    <!-- "Measure" in medium dark -->
-    <text x="32" y="28" font-family="Inter, system-ui, sans-serif" font-size="20" font-weight="500" fill="#1E40AF"
-          letter-spacing="-0.5">Measure</text>
-    <!-- "Flow" in bold primary -->
-    <text x="120" y="28" font-family="Inter, system-ui, sans-serif" font-size="20" font-weight="700" fill="#2563EB"
-          letter-spacing="-0.5">Flow</text>
-  </g>
 </svg>

src/frontend/flask_app/static/js/annotation-editor.js

@@ -956,7 +956,7 @@ function annotationEditor() {
     setupKeyboard() {
       var self = this;
 
-      document.addEventListener('keydown', function (e) {
+      this._onKeyDown = function (e) {
         // Skip when typing in form fields
         var tag = e.target.tagName;
         if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
@@ -970,7 +970,8 @@ function annotationEditor() {
           self.canvas.discardActiveObject();
           self.canvas.renderAll();
         }
-      });
+      };
+      document.addEventListener('keydown', this._onKeyDown);
     },
 
     // ----------------------------------------------------------------
@@ -1289,6 +1290,9 @@ function annotationEditor() {
       if (this._onImageLoaded) {
         window.removeEventListener('image-loaded', this._onImageLoaded);
       }
+      if (this._onKeyDown) {
+        document.removeEventListener('keydown', this._onKeyDown);
+      }
       if (this.canvas) {
         this.canvas.dispose();
         this.canvas = null;

src/frontend/flask_app/templates/auth/login.html

@@ -2,17 +2,26 @@
 {% block title %}Login — TieMeasureFlow{% endblock %}
 
 {% block content %}
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 sm:px-6 lg:px-8">
+<div class="relative min-h-screen flex items-center justify-center overflow-hidden bg-[var(--bg-primary)] px-4 sm:px-6 lg:px-8">
-  <div class="max-w-md w-full space-y-8">
+
+  <!-- Decorative brand background -->
+  <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+    <div class="absolute -top-32 -left-32 w-96 h-96 rounded-full bg-primary-500/10 dark:bg-primary-400/10 blur-3xl"></div>
+    <div class="absolute -bottom-40 -right-24 w-[28rem] h-[28rem] rounded-full bg-primary-600/10 dark:bg-primary-500/10 blur-3xl"></div>
+  </div>
+
+  <div class="relative max-w-md w-full space-y-6">
     <!-- Card -->
-    <div class="bg-white dark:bg-slate-800 shadow-lg rounded-xl p-8">
+    <div class="bg-[var(--bg-card)] border border-[var(--border-color)] shadow-lg rounded-2xl p-8">
       <!-- Logo -->
       <div class="text-center mb-8">
         <div class="mx-auto mb-4 inline-flex justify-center text-slate-900 dark:text-white">
-          {% set logo_class = 'h-16 w-auto' %}
+          {% set logo_class = 'h-14 w-14' %}
+          {% set wordmark_class = 'text-3xl' %}
+          {% set logo_id = 'login' %}
           {% include 'components/_app_logo.html' %}
         </div>
-        <p class="text-sm text-slate-600 dark:text-slate-400">
+        <p class="text-sm text-[var(--text-secondary)]">
           {{ _('Accedi al sistema') }}
         </p>
       </div>
@@ -22,12 +31,12 @@
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- Username -->
         <div>
-          <label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+          <label for="username" class="tmf-label">
             {{ _('Username') }}
           </label>
           <div class="relative">
             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="h-5 w-5 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
               </svg>
             </div>
@@ -36,36 +45,52 @@
                    name="username"
                    required
                    autofocus
+                   autocomplete="username"
                    placeholder="{{ _('Username') }}"
-                   class="block w-full pl-10 pr-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 transition-colors">
+                   class="tmf-input !pl-10 !py-2.5">
           </div>
         </div>
 
         <!-- Password -->
-        <div>
+        <div x-data="{ show: false }">
-          <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+          <label for="password" class="tmf-label">
             {{ _('Password') }}
           </label>
           <div class="relative">
             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="h-5 w-5 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
               </svg>
             </div>
-            <input type="password"
+            <input :type="show ? 'text' : 'password'"
+                   type="password"
                    id="password"
                    name="password"
                    required
+                   autocomplete="current-password"
                    placeholder="{{ _('Password') }}"
-                   class="block w-full pl-10 pr-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 transition-colors">
+                   class="tmf-input !pl-10 !pr-12 !py-2.5">
+            <button type="button"
+                    @click="show = !show"
+                    :aria-label="show ? {{ _('Nascondi password')|tojson_attr }} : {{ _('Mostra password')|tojson_attr }}"
+                    class="absolute inset-y-0 right-0 px-3 flex items-center text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors">
+              <!-- Eye (password hidden, click to show) -->
+              <svg x-show="!show" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+              <!-- Eye slash (password visible, click to hide) -->
+              <svg x-show="show" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12c1.292 4.338 5.31 7.5 10.066 7.5.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
+              </svg>
+            </button>
           </div>
         </div>
 
         <!-- Submit Button -->
         <div>
-          <button type="submit"
+          <button type="submit" class="btn btn-primary btn-lg w-full shadow-sm">
-                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
             </svg>
             {{ _('Accedi') }}
@@ -75,7 +100,7 @@
 
       <!-- Help Text -->
       <div class="mt-6 text-center">
-        <p class="text-xs text-slate-500 dark:text-slate-400">
+        <p class="text-xs text-[var(--text-muted)]">
           {{ _('Hai dimenticato la password?') }}
           <br>
           {{ _('Contatta l\'amministratore') }}
@@ -84,8 +109,8 @@
     </div>
 
     <!-- Footer -->
-    <div class="text-center text-xs text-slate-500 dark:text-slate-400">
+    <div class="text-center text-xs text-[var(--text-muted)]">
-      <p>TieMeasureFlow &copy; 2025 - {{ _('Sistema di misurazione industriale') }}</p>
+      <p>TieMeasureFlow &copy; {{ current_year }} - {{ _('Sistema di misurazione industriale') }}</p>
     </div>
   </div>
 </div>

src/frontend/flask_app/templates/components/_app_logo.html

@@ -1,35 +1,33 @@
 <!--
-Inline TieMeasureFlow logo. Text fills use `currentColor`, so wrap with a
+TieMeasureFlow logo: brand badge (SVG) + HTML wordmark.
-parent that sets `color` (e.g. `text-slate-900 dark:text-white`) to make the
+The wordmark inherits `color` from the parent (set e.g. `text-slate-900
-wordmark adapt to the active theme. The caliper/flow icon keeps its brand
+dark:text-white`); "Measure" keeps the brand blue.
-blue regardless of theme.
--->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48" fill="none"
-     class="{{ logo_class|default('h-10 w-auto') }}"
-     aria-label="TieMeasureFlow">
-  <!-- Caliper + flow icon (always brand color) -->
-  <g transform="translate(2, 6)">
-    <rect x="0" y="4" width="6" height="32" rx="1.5" fill="#2563EB"/>
-    <rect x="0" y="4" width="24" height="6" rx="1.5" fill="#2563EB"/>
-    <rect x="0" y="30" width="24" height="6" rx="1.5" fill="#2563EB"/>
-    <rect x="14" y="10" width="5" height="8" rx="1" fill="#1E40AF"/>
-    <rect x="14" y="22" width="5" height="8" rx="1" fill="#1E40AF"/>
-    <rect x="2" y="18" width="16" height="4" rx="1" fill="#3B82F6" opacity="0.6"/>
-    <rect x="7" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="10" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="13" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="16" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="19" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <path d="M26 20 C30 20, 32 14, 36 14 C40 14, 40 20, 36 20"
-          stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" fill="none"/>
-    <path d="M34 17 L37 20 L34 23"
-          stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-  </g>
 
-  <!-- Wordmark: themed via currentColor; "Measure" stays brand-tinted -->
+Parameters (set before include):
-  <g transform="translate(52, 0)" font-family="Inter, system-ui, sans-serif" letter-spacing="-0.5">
+  logo_class     — badge size, default 'h-10 w-10'
-    <text x="0"   y="34" font-size="28" font-weight="700" fill="currentColor">Tie</text>
+  wordmark_class — wordmark text size, default 'text-xl'; '' hides the text
-    <text x="44"  y="34" font-size="28" font-weight="500" fill="#2563EB">Measure</text>
+  logo_id        — unique suffix for the SVG gradient id when the logo
-    <text x="166" y="34" font-size="28" font-weight="700" fill="currentColor">Flow</text>
+                   appears more than once per page (default 'tmf')
-  </g>
+-->
-</svg>
+{% set _logo_id = logo_id|default('tmf') %}
+<span class="inline-flex items-center gap-2.5 select-none whitespace-nowrap">
+  <svg class="{{ logo_class|default('h-10 w-10') }} shrink-0" viewBox="0 0 64 64" fill="none"
+       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <defs>
+      <linearGradient id="tmfBadge-{{ _logo_id }}" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0" stop-color="#3B82F6"/>
+        <stop offset="1" stop-color="#1D4ED8"/>
+      </linearGradient>
+    </defs>
+    <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadge-{{ _logo_id }})"/>
+    <rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
+    <rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
+    <path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+    <path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  {% if wordmark_class is not defined or wordmark_class %}
+  <span class="{{ wordmark_class|default('text-xl') }} font-bold tracking-tight leading-none"
+        aria-label="TieMeasureFlow">Tie<span class="text-primary-600 dark:text-primary-400">Measure</span>Flow</span>
+  {% endif %}
+</span>

src/frontend/flask_app/templates/components/navbar.html

@@ -1,6 +1,45 @@
 <!-- TieMeasureFlow Navbar -->
+
+{# SVG path data for nav icons, shared between desktop and mobile menus #}
+{% set icon_measure %}<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>{% endset %}
+{% set icon_recipes %}<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>{% endset %}
+{% set icon_stats %}<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>{% endset %}
+{% set icon_users %}<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>{% endset %}
+{% set icon_stations %}<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>{% endset %}
+{% set icon_settings %}<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.78.929l-.15.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>{% endset %}
+
+{# Single nav link, desktop or mobile variant. `icon` is SVG path markup. #}
+{% macro nav_link(href, label, icon, active=false, mobile=false) -%}
+<a href="{{ href }}"
+   {% if active %}aria-current="page"{% endif %}
+   class="flex items-center {{ 'gap-3 px-3 py-2.5' if mobile else 'gap-2 px-3 py-2' }} rounded-lg text-sm font-medium transition-colors duration-200
+          {% if active %}text-primary bg-primary-50 dark:bg-primary-900/20{% else %}text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20{% endif %}">
+  <svg class="{{ 'w-5 h-5' if mobile else 'w-[18px] h-[18px]' }} shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">{{ icon }}</svg>
+  <span>{{ label }}</span>
+</a>
+{%- endmacro %}
+
+{# Render all role-gated nav links for the current user #}
+{% macro nav_links(mobile=false) -%}
+  {% set ep = request.endpoint or '' %}
+  {% if current_user.get('roles') and 'MeasurementTec' in current_user.roles %}
+    {{ nav_link(url_for('measure.select_recipe'), _('Misure'), icon_measure, ep.startswith('measure.'), mobile) }}
+  {% endif %}
+  {% if current_user.get('roles') and 'Maker' in current_user.roles %}
+    {{ nav_link(url_for('maker.recipe_list'), _('Ricette'), icon_recipes, ep.startswith('maker.'), mobile) }}
+  {% endif %}
+  {% if current_user.get('roles') and 'Metrologist' in current_user.roles %}
+    {{ nav_link(url_for('statistics.dashboard'), _('Statistiche'), icon_stats, ep.startswith('statistics.'), mobile) }}
+  {% endif %}
+  {% if current_user.get('is_admin') %}
+    {{ nav_link(url_for('admin.user_list'), _('Utenti'), icon_users, ep == 'admin.user_list', mobile) }}
+    {{ nav_link(url_for('admin.station_list'), _('Stazioni'), icon_stations, ep == 'admin.station_list', mobile) }}
+    {{ nav_link(url_for('admin.settings_page'), _('Impostazioni'), icon_settings, ep == 'admin.settings_page', mobile) }}
+  {% endif %}
+{%- endmacro %}
+
 <nav class="sticky top-0 z-40 bg-[var(--bg-card)] border-b border-[var(--border-color)] shadow-sm transition-colors duration-300"
-     x-data="{ mobileOpen: false, userDropdown: false }">
+     x-data="{ mobileOpen: false }">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex items-center justify-between h-14">
 
@@ -12,7 +51,9 @@
             <img src="{{ url_for('static', filename='img/' ~ company_logo) }}" alt="Logo" class="h-10 w-auto"
                  onerror="this.style.display='none'">
           {% else %}
-            {% set logo_class = 'h-10 w-auto' %}
+            {% set logo_class = 'h-9 w-9' %}
+            {% set wordmark_class = 'text-xl' %}
+            {% set logo_id = 'nav' %}
             {% include 'components/_app_logo.html' %}
           {% endif %}
         </a>
@@ -21,103 +62,7 @@
       <!-- Center: Navigation Links (Desktop) -->
       {% if current_user %}
       <div class="hidden md:flex items-center gap-1">
-
+        {{ nav_links() }}
-        {# MeasurementTec: Misure #}
-        {% if current_user.get('roles') and 'MeasurementTec' in current_user.roles %}
-        <a href="{{ url_for('measure.select_recipe') }}"
-           class="nav-link group flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
-                  text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                  transition-colors duration-200
-                  {% if request.endpoint and request.endpoint.startswith('measure.') %}
-                    text-primary bg-primary-50 dark:bg-primary-900/20
-                  {% endif %}">
-          <!-- Clipboard Icon -->
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
-          </svg>
-          <span>{{ _('Misure') }}</span>
-        </a>
-        {% endif %}
-
-        {# Maker: Ricette #}
-        {% if current_user.get('roles') and 'Maker' in current_user.roles %}
-        <a href="{{ url_for('maker.recipe_list') }}"
-           class="nav-link group flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
-                  text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                  transition-colors duration-200
-                  {% if request.endpoint and request.endpoint.startswith('maker.') %}
-                    text-primary bg-primary-50 dark:bg-primary-900/20
-                  {% endif %}">
-          <!-- Edit/Pencil Icon -->
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-          </svg>
-          <span>{{ _('Ricette') }}</span>
-        </a>
-        {% endif %}
-
-        {# Metrologist: Statistiche #}
-        {% if current_user.get('roles') and 'Metrologist' in current_user.roles %}
-        <a href="{{ url_for('statistics.dashboard') }}"
-           class="nav-link group flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
-                  text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                  transition-colors duration-200
-                  {% if request.endpoint and request.endpoint.startswith('statistics.') %}
-                    text-primary bg-primary-50 dark:bg-primary-900/20
-                  {% endif %}">
-          <!-- Chart Icon -->
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-          </svg>
-          <span>{{ _('Statistiche') }}</span>
-        </a>
-        {% endif %}
-
-        {# Admin: Utenti #}
-        {% if current_user.get('is_admin') %}
-        <a href="{{ url_for('admin.user_list') }}"
-           class="nav-link group flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
-                  text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                  transition-colors duration-200
-                  {% if request.endpoint == 'admin.user_list' %}
-                    text-primary bg-primary-50 dark:bg-primary-900/20
-                  {% endif %}">
-          <!-- Users Icon -->
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
-          </svg>
-          <span>{{ _('Utenti') }}</span>
-        </a>
-
-        <a href="{{ url_for('admin.station_list') }}"
-           class="nav-link group flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
-                  text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                  transition-colors duration-200
-                  {% if request.endpoint == 'admin.station_list' %}
-                    text-primary bg-primary-50 dark:bg-primary-900/20
-                  {% endif %}">
-          <!-- Station / Workstation Icon -->
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>
-          </svg>
-          <span>{{ _('Stazioni') }}</span>
-        </a>
-
-        <a href="{{ url_for('admin.settings_page') }}"
-           class="nav-link group flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
-                  text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                  transition-colors duration-200
-                  {% if request.endpoint == 'admin.settings_page' %}
-                    text-primary bg-primary-50 dark:bg-primary-900/20
-                  {% endif %}">
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.78.929l-.15.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"/>
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-          </svg>
-          <span>{{ _('Impostazioni') }}</span>
-        </a>
-        {% endif %}
-
       </div>
       {% endif %}
 
@@ -126,24 +71,17 @@
 
         <!-- Language Toggle -->
         <div class="flex items-center border border-[var(--border-color)] rounded-lg overflow-hidden">
-          <a href="{{ url_for('set_language', lang='it') }}"
+          {% for lang_code in ['it', 'en'] %}
+          <a href="{{ url_for('set_language', lang=lang_code) }}"
              class="px-2 py-1.5 text-xs font-semibold transition-colors duration-200
-                    {% if current_language == 'it' %}
+                    {% if current_language == lang_code %}
                       bg-primary text-white
                     {% else %}
                       text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)]
                     {% endif %}">
-            IT
+            {{ lang_code|upper }}
-          </a>
-          <a href="{{ url_for('set_language', lang='en') }}"
-             class="px-2 py-1.5 text-xs font-semibold transition-colors duration-200
-                    {% if current_language == 'en' %}
-                      bg-primary text-white
-                    {% else %}
-                      text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)]
-                    {% endif %}">
-            EN
           </a>
+          {% endfor %}
         </div>
 
         <!-- Theme Toggle -->
@@ -265,77 +203,7 @@
        x-cloak
        class="md:hidden border-t border-[var(--border-color)] bg-[var(--bg-card)]">
     <div class="px-4 py-3 space-y-1">
-
+      {{ nav_links(mobile=true) }}
-      {% if current_user.get('roles') and 'MeasurementTec' in current_user.roles %}
-      <a href="{{ url_for('measure.select_recipe') }}"
-         class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
-                text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
-        </svg>
-        {{ _('Misure') }}
-      </a>
-      {% endif %}
-
-      {% if current_user.get('roles') and 'Maker' in current_user.roles %}
-      <a href="{{ url_for('maker.recipe_list') }}"
-         class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
-                text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-        </svg>
-        {{ _('Ricette') }}
-      </a>
-      {% endif %}
-
-      {% if current_user.get('roles') and 'Metrologist' in current_user.roles %}
-      <a href="{{ url_for('statistics.dashboard') }}"
-         class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
-                text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-        </svg>
-        {{ _('Statistiche') }}
-      </a>
-      {% endif %}
-
-      {# Admin: Utenti + Stazioni #}
-      {% if current_user.get('is_admin') %}
-      <a href="{{ url_for('admin.user_list') }}"
-         class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
-                text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
-        </svg>
-        {{ _('Utenti') }}
-      </a>
-
-      <a href="{{ url_for('admin.station_list') }}"
-         class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
-                text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>
-        </svg>
-        {{ _('Stazioni') }}
-      </a>
-
-      <a href="{{ url_for('admin.settings_page') }}"
-         class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
-                text-[var(--text-secondary)] hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20
-                transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.78.929l-.15.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"/>
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-        </svg>
-        {{ _('Impostazioni') }}
-      </a>
-      {% endif %}
-
     </div>
   </div>
   {% endif %}

src/frontend/flask_app/templates/maker/recipe_list.html

@@ -120,7 +120,7 @@
             </div>
             <input type="text"
                    x-model="search"
-                   class="tmf-input pl-10"
+                   class="tmf-input !pl-10"
                    :placeholder="'{{ _('Cerca per nome, codice o descrizione...') }}'">
           </div>
         </div>

src/frontend/flask_app/templates/measure/task_list.html

@@ -153,13 +153,12 @@
           <div class="flex-1 min-w-0">
             <!-- Task Title -->
             <h3 class="text-base font-semibold text-[var(--text-primary)] leading-tight truncate">
-              <span class="text-xs font-medium text-[var(--text-muted)] mr-1.5">{{ loop.index }}/{{ tasks|length }}</span>
               {{ task.title or task.name or (_('Task') ~ ' ' ~ loop.index) }}
             </h3>
 
             <!-- Directive -->
             {% if task.directive or task.description %}
-            <p class="text-xs text-[var(--text-secondary)] leading-snug mt-0.5 line-clamp-1 whitespace-pre-wrap">
+            <p class="text-xs text-[var(--text-secondary)] leading-snug mt-0.5 line-clamp-2">
               {{ task.directive or task.description }}
             </p>
             {% endif %}