@sailingrotevista/rotevista-dash 4.0.15 → 4.0.17

package/app.js

@@ -12,21 +12,21 @@
 // 1. CONFIGURAZIONE E DEFAULT
 // ==========================================================================
 let CONFIG = {
-    alarms: { depthDanger: 2.5, depthWarning: 5.0 },
+    alarms: { depthDanger: 2.5, depthWarning: 3.5 },
     averaging: {
         smoothWindow: 2000,
         longWindow: 30000,
         stabilityTolerance: 2000,
         stabilityThreshold: 0.85,
-        minSpeed: 0.5,
+        minSpeed: 0,
         stabilityBreakout: 15
     },
-    graphs: { reef1: 15.0, reef2: 20.0, historyMinutes: 5, samples: 60 },
+    graphs: { reef1: 8, reef2: 10.0, historyMinutes: 30, samples: 60 },
     scales: {
-        stw: { stdMax: 12, hercSpan: 4, step: 2 },
-        sog: { stdMax: 12, hercSpan: 4, step: 2 },
-        tws: { stdMax: 25, hercSpan: 10, step: 5 },
-        depth: { stdMax: 20, hercSpan: 10, step: 10 }
+        stw: { stdMax: 8, hercSpan: 4, step: 2 },
+        sog: { stdMax: 8, hercSpan: 4, step: 2 },
+        tws: { stdMax: 15, hercSpan: 10, step: 5 },
+        depth: { stdMax: 8, hercSpan: 5, step: 5 }
     },
     server: { fallbackIp: "192.168.111.240:3000" }
 };
@@ -241,9 +241,16 @@ function playGybeAlarm() {
 }
 
 function checkDepthAlarm(m) {
-    ui.depth.classList.remove('alarm-warning', 'alarm-danger');
-    if (m < CONFIG.alarms.depthDanger) { ui.depth.classList.add('alarm-danger'); playBingBing(); }
-    else if (m < CONFIG.alarms.depthWarning) ui.depth.classList.add('alarm-warning');
+    // Rimuoviamo sempre le classi prima di riapplicarle
+    ui.depth.classList.remove('alarm-warning', 'alarm-danger', 'blink-alarm');
+    
+    // Logica di confronto dinamica
+    if (m < CONFIG.alarms.depthDanger) {
+        ui.depth.classList.add('alarm-danger', 'blink-alarm');
+        playBingBing(); // Il tuo suono di allarme
+    } else if (m < CONFIG.alarms.depthWarning) {
+        ui.depth.classList.add('alarm-warning');
+    }
 }
 
 function updateLeewayDisplay(deg) {
@@ -430,19 +437,21 @@ function startDisplayLoop() {
             const labelEl = document.getElementById('sog-vmg-label');
             if (displayModeSog === 'VMG') {
                 ui.sog.innerText = vmg.toFixed(1);
-                ui.sog.style.setProperty('color', '#16a085', 'important'); // Verde Petrolio
+                // AGGIORNATO AL NUOVO COLORE CYAN VIBRANTE (#00b8d4)
+                ui.sog.style.setProperty('color', '#00b8d4', 'important');
                 if (labelEl) labelEl.textContent = 'VMG';
             } else {
                 ui.sog.innerText = sogKts.toFixed(1);
                 if (labelEl) labelEl.textContent = 'SOG';
                 
-                // Colore Corrente: se neutro usiamo "", così il CSS Night Mode può agire
-                if (sogKts - stwKts > 0.3) ui.sog.style.setProperty('color', '#27ae60', 'important');
-                else if (sogKts - stwKts < -0.3) ui.sog.style.setProperty('color', '#c0392b', 'important');
-                else ui.sog.style.color = "";
+                // Colore Corrente: Giallo Caldo per corrente a favore, Rosso per corrente contraria
+                // (Allineiamo il colore della corrente a favore con il #ffbb33 usato nei grafici)
+                if (sogKts - stwKts > 0.3) ui.sog.style.setProperty('color', '#ffbb33', 'important');
+                else if (sogKts - stwKts < -0.3) ui.sog.style.setProperty('color', '#ff3b30', 'important'); // Rosso vivido
+                else ui.sog.style.color = ""; // Torna normale
             }
         }
-        
+
         if (store.raw["environment.depth.belowTransducer"] !== undefined) {
             ui.depth.innerText = store.raw["environment.depth.belowTransducer"].toFixed(1);
             checkDepthAlarm(store.raw["environment.depth.belowTransducer"]);
@@ -552,41 +561,25 @@ function startDisplayLoop() {
 async function fetchServerConfig() {
     try {
         const response = await fetch('/rotevista-config');
-        if (!response.ok) throw new Error(`Server offline o rotta non trovata`);
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
         const data = await response.json();
 
-        // 1. Funzione di pulizia: trasforma stringhe in numeri
-        const parse = (obj) => {
-            for (let k in obj) {
-                if (typeof obj[k] === 'object' && obj[k] !== null) parse(obj[k]);
-                else if (!isNaN(obj[k]) && typeof obj[k] === 'string' && obj[k] !== "")
-                    obj[k] = parseFloat(obj[k]);
-            }
-            return obj;
-        };
-        const actual = parse(data);
+        // Stampa di debug per verificare cosa riceve il client
+        console.log("🔍 Configurazione ricevuta dal Server:", data);
 
-        // 2. Mappatura Forzata (Deep Merge)
-        if (actual.alarms) Object.assign(CONFIG.alarms, actual.alarms);
+        // Merge intelligente dei dati ricevuti nel CONFIG esistente
+        Object.assign(CONFIG.alarms, data.alarms || {});
+        Object.assign(CONFIG.graphs, data.graphs || {});
+        Object.assign(CONFIG.averaging, data.averaging || {});
         
-        if (actual.graphs) {
-            Object.assign(CONFIG.graphs, actual.graphs);
-            console.log(`📈 GRAFICI: Durata ${CONFIG.graphs.historyMinutes}m | Reef1: ${CONFIG.graphs.reef1}kts | Reef2: ${CONFIG.graphs.reef2}kts`);
-        }
-        
-        if (actual.averaging) {
-            Object.assign(CONFIG.averaging, actual.averaging);
-            console.log(`⏱️ STABILITÀ: MinSpeed ${CONFIG.averaging.minSpeed}kts | Breakout: ${CONFIG.averaging.stabilityBreakout}°`);
-        }
-        
-        if (actual.scales) {
-            // Per le scale facciamo un merge profondo per ogni box
-            for (let key in actual.scales) {
-                if (CONFIG.scales[key]) Object.assign(CONFIG.scales[key], actual.scales[key]);
+        // Per le scale, siccome sono nidificate, facciamo un loop
+        if (data.scales) {
+            for (let key in data.scales) {
+                if (CONFIG.scales[key]) Object.assign(CONFIG.scales[key], data.scales[key]);
             }
         }
 
-        console.log("✅ Configurazione sincronizzata con successo.");
+        console.log("✅ Configurazione applicata. Alarmi attivi:", CONFIG.alarms);
     } catch (err) {
         console.warn("⚠️ Utilizzo default locali. Motivo:", err.message);
     }
@@ -621,46 +614,108 @@ function updateScaleLabels(t, min, max) {
 
 /**
  * drawGraph: Disegna i grafici con griglia temporale intelligente
+ * Usa un Gradiente Lineare SVG dinamico per eliminare le giunzioni dei poligoni.
  */
 function drawGraph(d, id, min, max, isTws, isHercules) {
-    const svg = document.getElementById(id); if (!svg || d.length < 2) return;
-    const w = 200, h = 40, range = max - min || 1;
-    
-    // Griglia orizzontale
+    const svg = document.getElementById(id);
+    if (!svg || d.length < 2) return;
+
+    const w = 200, h = 40;
+    const range = max - min || 1;
+    const isDepth = (id === 'depth-graph');
+    const samples = CONFIG.graphs.samples;
+
+    // 1. Griglia
     let grids = "";
     [0.25, 0.5, 0.75].forEach(p => {
         grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(0,0,0,0.12)" stroke-width="0.5" />`;
     });
-
-    /**
-     * Griglia Temporale Intelligente:
-     * - Storia <= 15 min: linee ogni 1 minuto.
-     * - Storia > 15 min: linee ogni 5 minuti.
-     */
     const gridInterval = (CONFIG.graphs.historyMinutes <= 15) ? 1 : 5;
-
     for (let m = gridInterval; m < CONFIG.graphs.historyMinutes; m += gridInterval) {
         const x = w - (m / CONFIG.graphs.historyMinutes) * w;
         grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(0,0,0,0.08)" stroke-width="0.5" />`;
     }
 
-    let pD = ""; let cS = "";
-    d.forEach((v, i) => {
-        const x = (i/(CONFIG.graphs.samples-1))*w, y = h-(Math.max(0,Math.min(1,(v-min)/range))*h); pD += `${i===0?'M':'L'} ${x} ${y} `;
-        if (isTws && i > 0) {
-            const px = ((i-1)/(CONFIG.graphs.samples-1))*w, py = h-(Math.max(0,Math.min(1,(d[i-1]-min)/range))*h);
-            let c = (v >= CONFIG.graphs.reef2) ? "#e74c3c" : (v >= CONFIG.graphs.reef1 ? "#e67e22" : "#000");
-            // Aggiunta della classe 'tws-reef-line' per la gestione Night Mode
-            cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="tws-reef-line ${isHercules?'line-hercules':''}" />`;
+    // 2. Colori (Tavolozza Vivida)
+    const baseColorTws = "#2c3e50";
+    const baseColorDepth = "#0088cc";
+
+    const getColor = (val) => {
+        if (isTws) return (val >= CONFIG.graphs.reef2) ? "#ff3b30" : (val >= CONFIG.graphs.reef1 ? "#ff9800" : baseColorTws);
+        if (isDepth) return (val < CONFIG.alarms.depthDanger) ? "#ff3b30" : (val < CONFIG.alarms.depthWarning ? "#ff9800" : baseColorDepth);
+        switch(id) {
+            case 'stw-graph': return "#00C851";
+            case 'sog-graph': return (displayModeSog === 'VMG') ? "#00b8d4" : "#ffbb33";
+            default: return baseColorTws;
         }
-    });
+    };
+
+    // 3. Creazione Gradiente e Linee
+    let gradientStops = "";
+    let lines = "";
+    let areaPath = `M 0 ${h} `;
+
+    for (let i = 1; i < d.length; i++) {
+        // Calcolo Percentuali per il gradiente
+        const percentPrev = ((i - 1) / (samples - 1)) * 100;
+        const percentCurr = (i / (samples - 1)) * 100;
+
+        // Coordinate geometriche
+        const x1 = ((i - 1) / (samples - 1)) * w;
+        const y1 = h - (Math.max(0, Math.min(1, (d[i - 1] - min) / range)) * h);
+        const x2 = (i / (samples - 1)) * w;
+        const y2 = h - (Math.max(0, Math.min(1, (d[i] - min) / range)) * h);
+        
+        const color = getColor(d[i]);
+                
+                // Assegnazione specifica di Opacità e Spessore Linea
+                let fillOpacity = "0.15"; // Default per valori base
+                let strokeWidth = "1.5";
+
+                if (color === "#ff3b30") {
+                    // ROSSO (Danger / Reef 2): Molto solido
+                    fillOpacity = "0.85";
+                    strokeWidth = "2.5";
+                } else if (color === "#ff9800") {
+                    // ARANCIONE (Warning / Reef 1): Più trasparente (Velo)
+                    fillOpacity = "0.45";
+                    strokeWidth = "2.5"; // Manteniamo la linea spessa per leggerla bene
+                }
 
-    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#000' };
-    const colorKey = id === 'sog-graph' && displayModeSog === 'VMG' ? '#16a085' : clrs[id];
+        // GRADIENTE: Due stop alla stessa percentuale per creare uno stacco di colore netto (no sfumature)
+        gradientStops += `<stop offset="${percentPrev}%" stop-color="${color}" stop-opacity="${fillOpacity}" />`;
+        gradientStops += `<stop offset="${percentCurr}%" stop-color="${color}" stop-opacity="${fillOpacity}" />`;
+
+        // LINEE: Disegnate normalmente sopra l'area
+        lines += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" 
+                 style="stroke: ${color}; stroke-width: ${strokeWidth}; stroke-linecap: round;" />`;
+                 
+        // AGGIORNAMENTO PATH UNICO
+        if (i === 1) areaPath += `L ${x1} ${y1} `;
+        areaPath += `L ${x2} ${y2} `;
+    }
     
-    svg.innerHTML = isTws ?
-        `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(0,0,0,0.05)" stroke="none" />${cS}` :
-        `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${colorKey}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${colorKey}" />`;
+    // Chiusura del path dell'area
+    areaPath += `L ${w} ${h} Z`;
+
+    // 4. Iniezione del <defs> (Gradiente) nell'SVG
+    const gradId = `grad-${id}`;
+    const defs = `
+        <defs>
+            <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%">
+                ${gradientStops}
+            </linearGradient>
+        </defs>
+    `;
+
+    // 5. Render Finale
+    // Se è Depth o Tws applichiamo il gradiente, altrimenti colore standard fisso (per SOG/STW)
+    if (isTws || isDepth) {
+        svg.innerHTML = `${defs}${grids}<path d="${areaPath}" fill="url(#${gradId})" stroke="none" />${lines}`;
+    } else {
+        const standardColor = getColor(d[d.length - 1]);
+        svg.innerHTML = `${grids}<path d="${areaPath}" fill="${standardColor}" fill-opacity="0.15" stroke="none" />${lines}`;
+    }
 }
 
 // ==========================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailingrotevista/rotevista-dash",
-  "version": "4.0.15",
+  "version": "4.0.17",
   "description": "Public Wind Dashboard with navigation and course aids",
   "main": "index.js",
   "publishConfig": {

package/style.css

@@ -112,7 +112,7 @@ body {
 /* --- BOX TWD (Bussola Meteo) --- */
 .value-with-compass {
     display: flex; flex-direction: row; justify-content: space-between;
-    align-items: center; width: 100%; height: 85%; 
+    align-items: center; width: 100%; height: 85%;
 }
 .box-twd .mini-compass {
     height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0;
@@ -134,6 +134,33 @@ body {
     .box-tack .value.dual-val { font-size: clamp(0.9rem, 28cqh, 10cqw) !important; }
 }
 
+/* ==========================================================================
+   AGGIUNTA: Gestione Allarmi Profondità
+   ========================================================================== */
+.alarm-warning {
+    color: #e67e22 !important; /* Arancione per Warning */
+}
+
+.alarm-danger {
+    color: #c0392b !important; /* Rosso per Danger */
+}
+
+.blink-alarm {
+    animation: blink-depth 0.8s infinite alternate;
+}
+
+@keyframes blink-depth {
+    from { opacity: 1; }
+    to { opacity: 0.3; }
+}
+
+/* Override per la Night Mode: se siamo in modalità notte,
+   il rosso deve restare ben visibile o diventare più acceso */
+body.night-mode .alarm-danger {
+    color: #ff0000 !important;
+    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8) !important;
+}
+
 /* ==========================================================================
    5. TACTICAL FOCUS MODE
    ========================================================================== */
@@ -142,7 +169,7 @@ body {
 
 .focus-active .is-focused .sparkline path,
 .focus-active .is-focused .sparkline line {
-    stroke-width: 1.5px !important; /* Un briciolo più spessa per la stabilità visiva su schermi grandi */
+    stroke-width: 1.5px !important;
 }
 
 .focus-active.focus-side-left {
@@ -208,42 +235,38 @@ body {
     }
 
     /* --- TACK: Impilamento Verticale Rigido in U-Shape --- */
-        .box-tack .dual-value-container {
-            flex-direction: column !important; /* Forza HDG sopra COG */
-            justify-content: center !important;
-            align-items: flex-start !important; /* Tutto a sinistra */
-            gap: 8px !important; /* Spazio tra i due blocchi */
-        }
-        
-        .box-tack .dual-value-col {
-            display: flex !important;
-            flex-direction: column !important; /* Forza Titolo sopra Numero */
-            align-items: flex-start !important;
-            text-align: left !important;
-            width: 100% !important;
-        }
-
-        /* Font calibrato per non uscire dal box stretto */
-        .box-tack .value.dual-val {
-            font-size: clamp(1rem, 30cqh, 15cqw) !important;
-            line-height: 1 !important;
-        }
-        
-        .box-tack .dual-label {
-            margin-bottom: 0px !important;
-        }
+    .box-tack .dual-value-container {
+        flex-direction: column !important;
+        justify-content: center !important;
+        align-items: flex-start !important;
+        gap: 8px !important;
+    }
+    
+    .box-tack .dual-value-col {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        text-align: left !important;
+        width: 100% !important;
+    }
+
+    .box-tack .value.dual-val {
+        font-size: clamp(1rem, 30cqh, 15cqw) !important;
+        line-height: 1 !important;
+    }
+    
+    .box-tack .dual-label {
+        margin-bottom: 0px !important;
+    }
 
     /* --- TWD: Calibrazione per box stretto --- */
     .box-twd .value-with-compass { justify-content: center; gap: 5px; }
     .box-twd .mini-compass { height: 60cqh !important; }
     .box-twd #twd-avg { font-size: clamp(1.2rem, 50cqh, 20cqw) !important; }
-
-    /* NOTA: COG e AWA non vengono toccati qui, così restano massivi
-       ereditando la regola generale della Sezione 4 */
 }
 
 /* ==========================================================================
-   7. GRAFICI, SCALE E TAG HERCULES
+   7. GRAFICI, SCALE E STILE DINAMICO
    ========================================================================== */
 .graph-wrapper {
     position: relative;
@@ -252,7 +275,7 @@ body {
     min-height: 0;
     margin-top: 5px;
     display: flex;
-    flex-direction: row; /* Forza l'allineamento orizzontale dei componenti */
+    flex-direction: row;
     align-items: stretch;
     background: rgba(0, 0, 0, 0.04);
     border-radius: 4px;
@@ -265,15 +288,15 @@ body {
     background: transparent !important;
 }
 
-/* Forza tutte le linee dei grafici (linee dati e griglie) a 1px per un look chirurgico */
-.sparkline path,
-.sparkline line {
-    stroke-width: 1px !important;
+/* I componenti interni dell'SVG gestiscono autonomamente spessori e colori via JS */
+.graph-wrapper polygon,
+.graph-wrapper line {
     transition: all 0.3s ease;
-    /* --- FIX LINEE SPEZZATE --- */
-    stroke-linecap: round;    /* Arrotonda le estremità dei segmenti */
-    stroke-linejoin: round;   /* Arrotonda le giunture tra i segmenti */
-    shape-rendering: geometricPrecision; /* Forza il browser a calcolare la linea con precisione sub-pixel */
+    shape-rendering: geometricPrecision;
+}
+
+.graph-wrapper polygon {
+    filter: drop-shadow(0 0 2px rgba(0,0,0,0.05));
 }
 
 .scale-labels {
@@ -290,26 +313,12 @@ body {
 }
 
 /* --- COLONNA SINISTRA (STW, SOG) --- */
-/* Ordine desiderato: [Grafico] [Scala] -> Scala verso il centro schermo */
-.box-stw .sparkline, .box-sog .sparkline {
-    order: 1;
-}
-.box-stw .scale-labels, .box-sog .scale-labels {
-    order: 2;
-    text-align: left;
-    padding-left: 4px;
-}
+.box-stw .sparkline, .box-sog .sparkline { order: 1; }
+.box-stw .scale-labels, .box-sog .scale-labels { order: 2; text-align: left; padding-left: 4px; }
 
 /* --- COLONNA DESTRA (DEPTH, TWS) --- */
-/* Ordine desiderato: [Scala] [Grafico] -> Scala verso il centro schermo */
-.box-depth .scale-labels, .box-tws .scale-labels {
-    order: 1;
-    text-align: right;
-    padding-right: 4px;
-}
-.box-depth .sparkline, .box-tws .sparkline {
-    order: 2;
-}
+.box-depth .scale-labels, .box-tws .scale-labels { order: 1; text-align: right; padding-right: 4px; }
+.box-depth .sparkline, .box-tws .sparkline { order: 2; }
 
 /* --- REGOLE HERCULES (Zoom) --- */
 .box-hercules { background: rgba(255, 0, 0, 0.05) !important; }
@@ -319,10 +328,8 @@ body {
     letter-spacing: 1px; text-transform: uppercase; content: "HERCULES ";
 }
 
-/* Anche in modalità Hercules manteniamo 1px per coerenza, affidandoci al filtro per lo stacco visivo */
 .line-hercules {
     filter: drop-shadow(0 0 5px #ff0000);
-    stroke-width: 1px !important;
 }
 
 /* ==========================================================================
@@ -337,44 +344,24 @@ body {
 
     .data-box { height: auto !important; }
 
-    /* --- OTTIMIZZAZIONE COMPATTA PER I BOX CON GRAFICO --- */
-    .box-stw, .box-sog, .box-depth, .box-tws {
-        justify-content: flex-start !important;
-        /* Ridotto lo spazio superiore per avvicinare il valore al titolo */
-        padding-top: 1.2rem !important;
-    }
+    .box-stw, .box-sog, .box-depth, .box-tws { justify-content: flex-start !important; padding-top: 1.2rem !important; }
 
-    /* --- OTTIMIZZAZIONE FONT VALORI CON GRAFICO IN VERTICALE --- */
-    .box-stw .value,
-    .box-sog .value,
-    .box-depth .value,
-    .box-tws .value {
-        /* Aumentato a 30cqh per pareggiare il peso visivo di HEADING */
-        /* Alzato anche il limite cqw a 35 per permettere al numero di allargarsi */
+    .box-stw .value, .box-sog .value, .box-depth .value, .box-tws .value {
         font-size: clamp(1.2rem, 30cqh, 35cqw) !important;
         line-height: 0.8 !important;
-        margin-top: -4px !important; /* Saliamo ancora un briciolo verso il titolo */
+        margin-top: -4px !important;
         margin-bottom: 4px !important;
         padding-bottom: 0 !important;
-        font-weight: 700; /* Leggermente più marcato */
+        font-weight: 700;
     }
 
-    /* Espansione del grafico per occupare tutto il resto del box */
-    .box-stw .graph-wrapper,
-    .box-sog .graph-wrapper,
-    .box-depth .graph-wrapper,
-    .box-tws .graph-wrapper {
+    .box-stw .graph-wrapper, .box-sog .graph-wrapper, .box-depth .graph-wrapper, .box-tws .graph-wrapper {
         margin-top: 0 !important;
         flex-grow: 1 !important;
     }
 
-    /* --- ALTRI BOX (HEADING, COG, ecc.) RESTANO CENTRATI --- */
-    .box-hdg, .box-cog, .box-twa, .box-awa, .box-twd, .box-tack {
-        justify-content: center !important;
-        padding-top: 1.2rem !important;
-    }
+    .box-hdg, .box-cog, .box-twa, .box-awa, .box-twd, .box-tack { justify-content: center !important; padding-top: 1.2rem !important; }
 
-    /* --- FOCUS MODE IN VERTICALE --- */
     .main-container.focus-active {
         grid-template-columns: 1fr !important;
         grid-template-rows: 65vh 35vh !important;
@@ -384,7 +371,6 @@ body {
     .focus-active .is-focused .value { font-size: clamp(4rem, 20cqh, 15rem) !important; margin-top: 20px !important; }
     .focus-active .box-gauge { height: 35vh !important; width: 100vw !important; display: flex !important; align-items: center; justify-content: center; }
 
-    /* --- TACK IN VERTICALE --- */
     .box-tack .dual-value-container { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
     .box-tack .dual-value-col { display: flex !important; flex-direction: column !important; justify-content: center; }
     .box-tack .dual-value-col:first-child { align-items: flex-start !important; text-align: left !important; }
@@ -397,18 +383,11 @@ body {
    ========================================================================== */
 #status {
     position: absolute;
-    /* Posizionato con un po' di margine dal bordo del riquadro bussola */
-    top: 15px;
-    right: 15px;
-    font-size: 0.6rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    z-index: 1000;
-    /* Sfondo leggermente più marcato per leggerlo sopra il quadrante */
+    top: 15px; right: 15px;
+    font-size: 0.6rem; font-weight: 900;
+    text-transform: uppercase; z-index: 1000;
     background: rgba(0,0,0,0.08);
-    padding: 3px 8px;
-    border-radius: 4px;
-    letter-spacing: 1px;
+    padding: 3px 8px; border-radius: 4px; letter-spacing: 1px;
 }
 .online { color: #27ae60; opacity: 0.8; }
 .offline { color: #c0392b; font-weight: bold; }
@@ -435,11 +414,7 @@ rect[fill="#222"] { fill: #eee !important; }
 
 /* ==========================================================================
    10. NIGHT MODE (TACTICAL RED - ARCHITETTURA INTEGRALE)
-   ==========================================================================
-   Questa sezione sovrascrive interamente lo schema Day Mode.
-   Obiettivo: Massima leggibilità, zero abbagliamento, preservazione visione notturna.
    ========================================================================== */
-
 body.night-mode {
     background-color: #000 !important;
     color: #ff3333 !important;
@@ -448,130 +423,62 @@ body.night-mode {
 /* --- 10.1 STRUTTURA DEI CONTENITORI --- */
 .night-mode .data-box {
     background: rgba(20, 0, 0, 0.4) !important;
-    border-color: #440000 !important; /* Confini rossi cupi per orientamento spaziale */
+    border-color: #440000 !important;
     box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.05) !important;
 }
 
 /* --- 10.2 TIPOGRAFIA E TESTI --- */
-/* Etichette primarie (Titoli dei box) */
-.night-mode .label,
-.night-mode .unit,
-.night-mode .dual-label {
-    color: #800000 !important; /* Rosso sangue scuro per non distrarre */
-}
+.night-mode .label, .night-mode .unit, .night-mode .dual-label { color: #800000 !important; }
+.night-mode .value-large { color: #ff3333 !important; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4) !important; }
+.night-mode .value { color: #ff3333; text-shadow: 0 0 8px rgba(255, 0, 0, 0.3); }
+.night-mode #status { background: rgba(255, 0, 0, 0.1) !important; color: #ff3333 !important; }
 
-/* Valori digitali primari (Heading, Cog, Awa, Twa) */
-.night-mode .value-large {
-    color: #ff3333 !important;
-    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4) !important;
-}
-
-/* Valori dinamici (SOG, TWS, STW):
-   Non usiamo !important per permettere al JavaScript di iniettare i colori dei Reef/Corrente */
-.night-mode .value {
-    color: #ff3333;
-    text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
-}
-
-/* Widget di Stato */
-.night-mode #status {
-    background: rgba(255, 0, 0, 0.1) !important;
-    color: #ff3333 !important;
-}
-
-/* --- 10.3 GRAFICI (STILE CHIRURGICO 1PX) --- */
+/* --- 10.3 GRAFICI (STILE DINAMICO NIGHT MODE) --- */
 .night-mode .graph-wrapper {
-    background: rgba(0, 0, 0, 0.6) !important;
+    background: rgba(10, 0, 0, 0.8) !important;
     border: 1px solid #330000;
 }
 
-/* Rimuove l'area di riempimento per evitare luce diffusa sul display */
-.night-mode .sparkline path:first-of-type {
-    display: none !important;
+.night-mode .sparkline line[stroke="rgba(0,0,0,0.12)"],
+.night-mode .sparkline line[stroke="rgba(0,0,0,0.08)"] {
+    stroke: rgba(255, 0, 0, 0.1) !important; /* Griglia temporale rossa soffusa */
 }
 
-/* Linea dati: rossa, sottile e nitida */
-.night-mode .sparkline path {
-    fill: none !important;
-    stroke: #ff3333 !important;
-    stroke-width: 1px !important;
-    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4));
+/* Regolazione della luminosità notturna per preservare i gradienti e i colori del JS */
+.night-mode .graph-wrapper svg {
+    filter: brightness(0.6) contrast(1.2);
 }
 
-/* Griglia temporale (minuti e livelli): quasi impercettibile */
-.night-mode .sparkline line {
-    stroke: rgba(150, 0, 0, 0.15) !important;
+.night-mode .graph-wrapper line[style] {
+    stroke-width: 1px !important;
+    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
 }
 
-/* LOGICA REEF TWS: Mantiene i colori degli allarmi sul grafico */
-.night-mode .tws-reef-line { stroke-width: 1px !important; opacity: 0.9 !important; }
-.night-mode .tws-reef-line[stroke="#000000"],
-.night-mode .tws-reef-line[stroke="#000"] { stroke: #440000 !important; } /* Vento basso */
-.night-mode .tws-reef-line[stroke="#e67e22"] { stroke: #b35500 !important; } /* 1° Reef */
-.night-mode .tws-reef-line[stroke="#e74c3c"] {
-    stroke: #ff0000 !important;
-    filter: drop-shadow(0 0 2px #ff0000);
-} /* 2° Reef */
-
-/* Scale graduate dei grafici */
 .night-mode .scale-labels { color: #800000 !important; }
 .night-mode .is-focused .scale-labels { color: #ff3333 !important; }
 
 /* --- 10.4 WIND GAUGE (STRUMENTO CENTRALE) --- */
-/* Oscuramento cerchi concentrici per eliminare bagliori bianchi */
-.night-mode #wind-gauge circle {
-    fill: #000 !important;
-    stroke: #220000 !important;
-}
-
-/* Cerchio interno e hotspot centrale (nero profondo) */
-.night-mode #wind-gauge circle:nth-of-type(2),
-.night-mode #fullscreen-hotspot {
-    fill: #050000 !important;
-    stroke: #330000 !important;
-}
-
-/* Effetto Glow e Logo Barca */
+.night-mode #wind-gauge circle { fill: #000 !important; stroke: #220000 !important; }
+.night-mode #wind-gauge circle:nth-of-type(2), .night-mode #fullscreen-hotspot { fill: #050000 !important; stroke: #330000 !important; }
 .night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
-/* ICONA BARCA NIGHT: Definizione migliorata con bordo rosso */
-.night-mode #boat-icon {
-    fill: #220000 !important;      /* Rosso scurissimo per il corpo della barca */
-    stroke: #ff0000 !important;    /* Bordo rosso vivo per definire la sagoma */
-    stroke-width: 0.8px !important; /* Spessore sottile ma netto */
-    opacity: 1 !important;         /* Piena opacità per far risaltare il bordo */
-}
-/* Valori interni (AWS) */
+.night-mode #boat-icon { fill: #220000 !important; stroke: #ff0000 !important; stroke-width: 0.8px !important; opacity: 1 !important; }
 .night-mode #aws-display-group text { fill: #800000 !important; }
 .night-mode #aws-val-svg { fill: #ff3333 !important; }
-
-/* Tacche e Numeri Gradi della Bussola */
 .night-mode #ticks line { stroke: #550000 !important; }
 .night-mode #tick-labels { fill: #800000 !important; }
-
-/* SETTORI VENTO: Conversione sicura per la notte */
 .night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #800000 !important; opacity: 0.8; }
-.night-mode #wind-gauge path[stroke="#00ff00"] {
-    stroke: #440000 !important;
-    stroke-dasharray: 5, 4 !important;
-    opacity: 0.7;
-} /* Verde Starboard -> Rosso tratteggiato */
+.night-mode #wind-gauge path[stroke="#00ff00"] { stroke: #440000 !important; stroke-dasharray: 5, 4 !important; opacity: 0.7; }
 .night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; opacity: 0.6; }
-
-/* Lancette AWA/TWA e COG */
 .night-mode #awa-pointer path { fill: #ff0000 !important; stroke: #000 !important; }
 .night-mode #twa-pointer path { fill: #800000 !important; stroke: #000 !important; }
 .night-mode #track-pointer path { fill: #ff3333 !important; stroke: none !important; }
 
 /* --- 10.5 WIDGETS ACCESSORI --- */
-/* Barra Leeway */
 .night-mode #leeway-val { fill: #ff3333 !important; color: #ff3333 !important; }
 .night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
-.night-mode rect[fill="#eee"],
-.night-mode rect[fill="#222"] { fill: #0a0000 !important; stroke: #330000 !important; }
+.night-mode rect[fill="#eee"], .night-mode rect[fill="#222"] { fill: #0a0000 !important; stroke: #330000 !important; }
 .night-mode g[stroke="#555"] line { stroke: #440000 !important; }
 .night-mode g[fill="#555"] text { fill: #800000 !important; }
-
-/* Mini Bussola TWD */
 .night-mode .mini-compass { border-color: #330000 !important; background: #000 !important; }
 .night-mode .mini-compass text { fill: #800000 !important; }
 .night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; }
@@ -579,10 +486,9 @@ body.night-mode {
 .night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; }
 
 /* --- 10.6 LOGICA RED-SHIFT TREND --- */
-/* Converte i colori generati dal JS per i pallini di trend */
-.night-mode circle[fill="#bbb"], .night-mode circle[fill="#bbbbbb"] { fill: #440000 !important; } /* Neutro */
-.night-mode circle[fill="#27ae60"] { fill: #ff0000 !important; } /* Lift */
-.night-mode circle[fill="#c0392b"] { fill: #800000 !important; } /* Header */
+.night-mode circle[fill="#bbb"], .night-mode circle[fill="#bbbbbb"] { fill: #440000 !important; }
+.night-mode circle[fill="#27ae60"] { fill: #ff0000 !important; }
+.night-mode circle[fill="#c0392b"] { fill: #800000 !important; }
 
 /* ==========================================================================
    11. TREND E ANIMAZIONI
@@ -592,3 +498,20 @@ body.night-mode {
 .is-trending { opacity: 1 !important; animation: blink-trend 1s infinite !important; }
 .is-gybing { opacity: 1 !important; animation: none !important; filter: drop-shadow(0 0 8px #ff0000) !important; }
 .unstable-data { animation: blink-trend 1.5s infinite ease-in-out; color: #e67e22 !important; }
+
+/* --- CORREZIONE VISIBILITÀ COLORI BASE SCURI IN NIGHT MODE --- */
+/* Il Navy Slate (#2c3e50) diventa nero con il filtro notturno. Lo schiariamo a un Grigio-Azzurro. */
+.night-mode .graph-wrapper line[style*="#2c3e50"] {
+    stroke: #6c8ea0 !important;
+}
+.night-mode .graph-wrapper polygon[style*="#2c3e50"] {
+    fill: #6c8ea0 !important;
+}
+
+/* Opzionale: Diamo una piccola "spinta" anche all'azzurro della Depth per bilanciarlo */
+.night-mode .graph-wrapper line[style*="#0088cc"] {
+    stroke: #33aadd !important;
+}
+.night-mode .graph-wrapper polygon[style*="#0088cc"] {
+    fill: #33aadd !important;
+}