@sailingrotevista/rotevista-dash 7.0.45 → 8.0.2

package/style.css

@@ -1,640 +0,0 @@
-/* ==========================================================================
-   1. BASE E RESET DI SISTEMA
-   ========================================================================== */
-body {
-    background-color: #fff;
-    color: #000;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-    margin: 0; padding: 0;
-    height: 100vh; width: 100vw;
-    overflow: hidden;
-    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none;
-}
-
-/* ==========================================================================
-   2. LAYOUT PRINCIPALE (GRID AREAS)
-   ========================================================================== */
-.main-container {
-    display: grid;
-    width: 100%; height: 100%;
-    padding: 5px; box-sizing: border-box; gap: 8px;
-    grid-template-areas:
-        "stw   gauge depth"
-        "sog   gauge tws"
-        "hdg   gauge twa"
-        "cog   gauge awa"
-        "tack  gauge twd";
-    grid-template-rows: 1.75fr 1.75fr 0.75fr 0.75fr 1.25fr;
-    grid-template-columns: 1fr 1.5fr 1fr;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.box-stw   { grid-area: stw; }
-.box-sog   { grid-area: sog; }
-.box-hdg   { grid-area: hdg; }
-.box-cog   { grid-area: cog; }
-.box-tack  { grid-area: tack; }
-.box-gauge { grid-area: gauge; display: flex; align-items: center; justify-content: center; position: relative; }
-.box-depth { grid-area: depth; }
-.box-tws   { grid-area: tws; }
-.box-twa   { grid-area: twa; }
-.box-awa   { grid-area: awa; }
-.box-twd   { grid-area: twd; }
-
-/* ==========================================================================
-   3. DATA-BOX: STRUTTURA E ALLINEAMENTO (Bordi Schermo & Display Curvi)
-   ========================================================================== */
-.data-box {
-    position: relative; border-bottom: 1px solid #eee;
-    /* Padding alto (1.2rem) per non far toccare il numero al titolo assoluto */
-    padding: 1.2rem 8px 4px 8px;
-    display: flex; flex-direction: column; width: 100%;
-    box-sizing: border-box; container-type: size;
-    min-height: 0; overflow: hidden;
-    background: rgba(0, 0, 0, 0.03); border-radius: 12px;
-    transition: background-color 0.2s ease;
-    /* Forza la centratura verticale del valore per display curvi */
-    justify-content: center !important;
-}
-
-/* Titoli ancorati sempre in alto */
-.label-row {
-    position: absolute; top: 4px; left: 8px; right: 8px;
-    display: flex; align-items: baseline; z-index: 10;
-}
-
-.label { color: #888; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
-.unit { color: #aaa; font-size: 0.6rem; font-weight: bold; }
-
-/* --- ALLINEAMENTO SPECULARE RIGIDO --- */
-
-/* COLONNA SINISTRA: Titolo a SX (bordo), Unità a DX */
-.box-stw, .box-sog, .box-hdg, .box-cog, .box-tack { align-items: flex-start !important; text-align: left !important; }
-.box-stw .label-row, .box-sog .label-row, .box-hdg .label-row, .box-cog .label-row, .box-tack .label-row {
-    flex-direction: row !important; justify-content: space-between !important;
-}
-
-/* COLONNA DESTRA: Titolo a DX (bordo), Unità a SX */
-.box-depth, .box-tws, .box-twa, .box-awa, .box-twd {
-    align-items: flex-end !important;
-    text-align: right !important;
-    padding-right: 14px !important; /* BUG RISOLTO: Aumenta il padding destro per evitare il clipping dei numeri sul bordo */
-}
-.box-depth .label-row, .box-tws .label-row, .box-twa .label-row, .box-awa .label-row, .box-twd .label-row {
-    flex-direction: row-reverse !important; justify-content: space-between !important;
-}
-
-/* ==========================================================================
-   4. TIPOGRAFIA GERARCHICA (OTTIMIZZATA PER TUTTI I DISPLAY)
-   ========================================================================== */
-
-/* --- VALORI STANDARD (STW, SOG, DEPTH, TWS) --- */
-.value {
-    color: #000;
-    /* Su Tablet: 25% altezza box. Su schermi stretti max 32% larghezza */
-    font-size: clamp(1.1rem, 25cqh, 32cqw);
-    font-weight: 600; line-height: 0.85; letter-spacing: -1.5px;
-    margin-top: auto; margin-bottom: 2px;
-}
-
-/* Protezione iPhone Landscape: Schermi molto bassi */
-@media screen and (max-height: 450px) {
-    .value { font-size: clamp(1rem, 18cqh, 25cqw) !important; }
-}
-
-/* --- VALORI MEDIATI (HEADING, COG, TWA, AWA) --- */
-.value-large {
-    font-weight: 600; line-height: 1; margin: auto 0;
-    /* 55cqh riempie il box verticalmente, 22cqw protegge la larghezza */
-    font-size: clamp(1.5rem, 55cqh, 22cqw) !important;
-}
-
-@media screen and (max-height: 450px) {
-    .value-large { font-size: clamp(1.4rem, 40cqh, 20cqw) !important; }
-}
-
-/* --- BOX TWD (Bussola Meteo) --- */
-.value-with-compass {
-    display: flex; flex-direction: row; justify-content: space-between;
-    align-items: center; width: 100%; height: 85%;
-}
-.box-twd .mini-compass {
-    height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0;
-}
-@media screen and (max-height: 450px) {
-    .box-twd .mini-compass { height: 65cqh !important; }
-    .box-twd #twd-avg { font-size: clamp(1.4rem, 45cqh, 20cqw) !important; }
-}
-
-/* --- OTTIMIZZAZIONE SPECIFICA TWD PER EVITARE ANDATA A CAPO in landscape--- */
-.box-twd .value-large {
-    /* Riduciamo il limite di larghezza (18cqw) per far spazio al simbolo ± rimpicciolendo il testo se serve */
-    font-size: clamp(1.2rem, 55cqh, 18cqw) !important;
-}
-
-/* --- BOX TACK (Mure Opposte) --- */
-.box-tack .dual-value-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
-.box-tack .dual-value-col { display: flex; flex-direction: column; justify-content: center; }
-.box-tack .dual-value-col:first-child { align-items: flex-start; }
-.box-tack .dual-value-col:last-child { align-items: flex-end; }
-.box-tack .dual-label { color: #888; font-size: 0.5rem; font-weight: 800; margin-bottom: -2px; }
-.box-tack .value.dual-val { font-size: clamp(1rem, 32cqh, 10cqw) !important; line-height: 0.9; }
-
-@media screen and (max-height: 450px) {
-    .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
-   ========================================================================== */
-.focus-active .data-box:not(.is-focused),
-.focus-active .box-gauge { display: none !important; }
-
-.focus-active.focus-side-left {
-    grid-template-columns: 3fr 2fr !important;
-    grid-template-areas: "focused gauge" !important;
-    grid-template-rows: 100% !important;
-}
-.focus-active.focus-side-right {
-    grid-template-columns: 2fr 3fr !important;
-    grid-template-areas: "gauge focused" !important;
-    grid-template-rows: 100% !important;
-}
-
-.focus-active .is-focused {
-    grid-area: focused !important;
-    height: 100vh !important;
-    background: rgba(0, 0, 0, 0.02) !important;
-    padding: 2vw 3vw !important;
-    justify-content: center !important;
-}
-
-/* Ingrandimento scale nel Focus Mode */
-.focus-active .is-focused .scale-labels {
-    font-size: clamp(14px, 2vw, 24px) !important;
-    min-width: 60px !important;
-    color: #444 !important;
-}
-
-/* Margine extra per le scale nel Focus */
-.focus-active .is-focused .graph-wrapper { margin-top: 25px !important; }
-
-/* PRIORITÀ COLORE HERCULES IN FOCUS */
-.focus-active .is-focused.box-hercules {
-    background: rgba(255, 0, 0, 0.12) !important;
-    box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.1);
-}
-
-.focus-active .is-focused .value {
-    font-size: clamp(4rem, 25cqh, 15rem) !important;
-    margin-top: 20px !important;
-}
-
-.focus-active .box-gauge { display: flex !important; grid-area: gauge !important; }
-
-/* ==========================================================================
-   6. VIEWPORT QUADRATA (U-SHAPE) - LOGICA ANTI-COLLISIONE
-   ========================================================================== */
-@media screen and (min-aspect-ratio: 0.86/1) and (max-aspect-ratio: 1.25/1) {
-    .main-container {
-        grid-template-columns: 1fr 1fr 1fr 1fr !important;
-        grid-template-areas:
-            "stw   gauge gauge depth"
-            "sog   gauge gauge tws"
-            "hdg   gauge gauge twa"
-            "cog   tack  twd   awa" !important;
-        grid-template-rows: 1.75fr 1.75fr 0.75fr 1.25fr !important;
-    }
-
-    /* Sfondo per distinguere la riga tattica inferiore */
-    .box-cog, .box-tack, .box-twd, .box-awa {
-        border-top: 1px solid #eee;
-        background: rgba(0, 0, 0, 0.04) !important;
-    }
-
-    /* --- TACK: Impilamento Verticale Rigido in U-Shape --- */
-    .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; }
-}
-
-/* ==========================================================================
-   7. GRAFICI, SCALE E STILE DINAMICO
-   ========================================================================== */
-.graph-wrapper {
-    position: relative;
-    width: 100%;
-    flex-grow: 1;
-    min-height: 0;
-    margin-top: 5px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    background: rgba(0, 0, 0, 0.04);
-    border-radius: 4px;
-}
-
-.sparkline {
-    flex-grow: 1;
-    height: 100%;
-    width: 100% !important;
-    background: transparent !important;
-}
-
-/* I componenti interni dell'SVG gestiscono autonomamente spessori e colori via JS */
-.graph-wrapper polygon,
-.graph-wrapper line {
-    transition: all 0.3s ease;
-    shape-rendering: geometricPrecision;
-}
-
-.graph-wrapper polygon {
-    filter: drop-shadow(0 0 2px rgba(0,0,0,0.05));
-}
-
-.scale-labels {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 9px;
-    color: #666;
-    font-weight: 800;
-    min-width: 22px;
-    height: 100%;
-    line-height: 1;
-    z-index: 5;
-}
-
-/* --- COLONNA SINISTRA (STW, SOG) --- */
-.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) --- */
-.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; }
-.box-hercules .scale-labels { color: #ff5555; }
-.box-hercules .unit::before {
-    font-size: 7px; color: #ff4444; font-weight: 900;
-    letter-spacing: 1px; text-transform: uppercase; content: "HERCULES ";
-}
-
-.line-hercules {
-    filter: drop-shadow(0 0 5px #ff0000);
-}
-
-/* ==========================================================================
-   8. RESPONSIVE (PORTRAIT MODE - Rapporto < 0.85)
-   ========================================================================== */
-@media screen and (max-aspect-ratio: 0.85/1) {
-    .main-container {
-        grid-template-areas: "gauge gauge" "stw depth" "sog tws" "hdg twa" "cog awa" "tack twd" !important;
-        grid-template-columns: 1fr 1fr !important;
-        grid-template-rows: 40vh 1.75fr 1.75fr 0.75fr 0.75fr 1.25fr !important;
-    }
-
-    .data-box { height: auto !important; }
-
-    .box-stw, .box-sog, .box-depth, .box-tws { justify-content: flex-start !important; padding-top: 1.2rem !important; }
-
-    .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;
-        margin-bottom: 4px !important;
-        padding-bottom: 0 !important;
-        font-weight: 700;
-    }
-
-    .box-stw .graph-wrapper, .box-sog .graph-wrapper, .box-depth .graph-wrapper, .box-tws .graph-wrapper {
-        margin-top: 0 !important;
-        flex-grow: 1 !important;
-    }
-
-    .box-hdg, .box-cog, .box-twa, .box-awa, .box-twd, .box-tack { justify-content: center !important; padding-top: 1.2rem !important; }
-
-    .main-container.focus-active {
-        grid-template-columns: 1fr !important;
-        grid-template-rows: 65vh 35vh !important;
-        grid-template-areas: "focused" "gauge" !important;
-    }
-    .focus-active .is-focused { height: 65vh !important; width: 100vw !important; padding: 5vh 5vw !important; justify-content: center !important; }
-    .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; }
-
-    .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; }
-    .box-tack .dual-value-col:last-child { align-items: flex-end !important; text-align: right !important; }
-    .box-tack .value.dual-val { font-size: clamp(1rem, 38cqh, 15cqw) !important; }
-}
-
-/* ==========================================================================
-   9. WIDGETS E OVERRIDE SVG (GIORNO)
-   ========================================================================= */
-#status {
-    position: absolute;
-    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;
-}
-.online { color: #27ae60; opacity: 0.8; }
-.offline { color: #c0392b; font-weight: bold; }
-
-.mini-compass { background: #f0f0f0; border-radius: 50%; border: 1.5px solid #ddd; }
-.mini-compass text:last-of-type { fill: #000 !important; opacity: 0.4; }
-#twd-boat-wrap path { fill: #000 !important; opacity: 0.3; }
-#twd-wind-chevron { stroke: #000 !important; }
-
-#wind-gauge circle[fill="#050505"] { fill: #fcfcfc; }
-#wind-gauge circle[fill="#121212"] { fill: #f0f0f0; }
-#boat-icon { fill: #000 !important; opacity: 1; }
-#tick-labels { fill: #444 !important; }
-#aws-val-svg { fill: #000 !important; }
-#aws-display-group text { fill: #333 !important; }
-#fullscreen-hotspot { fill: #eee !important; stroke: #ccc !important; }
-#ticks line[stroke="#fff"] { stroke: #000 !important; }
-#ticks line[stroke="#666"] { stroke: #bbb !important; }
-rect[fill="#222"] { fill: #eee !important; }
-#leeway-val { color: #000 !important; }
-
-#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
-
-/* ==========================================================================
-   10. NIGHT MODE (TACTICAL RED - ARCHITETTURA INTEGRALE)
-   ========================================================================== */
-body.night-mode {
-    background-color: #000 !important;
-    color: #ff3333 !important;
-}
-
-/* --- 10.1 STRUTTURA DEI CONTENITORI --- */
-.night-mode .data-box {
-    background: rgba(20, 0, 0, 0.4) !important;
-    border-color: #440000 !important;
-    box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.05) !important;
-}
-
-/* --- 10.2 TIPOGRAFIA E TESTI --- */
-.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; }
-
-/* --- 10.3 GRAFICI (STILE DINAMICO NIGHT MODE) --- */
-.night-mode .graph-wrapper {
-    background: rgba(10, 0, 0, 0.8) !important; /* Sfondo scurissimo per alto contrasto */
-    border: 1px solid #330000;
-}
-
-/* Griglia temporale (minuti e livelli): quasi impercettibile */
-.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 */
-}
-
-/* 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);
-}
-
-.night-mode .graph-wrapper line[style] {
-    stroke-width: 1px !important;
-    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
-}
-
-.night-mode .scale-labels { color: #800000 !important; }
-.night-mode .is-focused .scale-labels { color: #ff3333 !important; }
-
-/* --- 10.4 WIND GAUGE (STRUMENTO CENTRALE) --- */
-.night-mode #wind-gauge circle:not(#trend-gauge-cw):not(#trend-gauge-ccw) {
-    fill: #000000 !important;
-    stroke: #220000 !important;
-}
-.night-mode #wind-gauge > circle:nth-of-type(2), .night-mode #fullscreen-hotspot {
-    fill: #050000 !important;
-    stroke: #330000 !important;
-}
-
-/* 1. STATO SPENTO/RIPOSO: Attivo solo se l'attributo fill originario è grigio (#bbb o #bbbbbb) */
-.night-mode #trend-gauge-cw[fill="#bbb"],
-.night-mode #trend-gauge-ccw[fill="#bbb"],
-.night-mode #trend-gauge-cw[fill="#bbbbbb"],
-.night-mode #trend-gauge-ccw[fill="#bbbbbb"] {
-    fill: #440000 !important; /* Rosso scurissimo soffuso */
-    stroke: none !important;
-    filter: none !important;
-    opacity: 0.3 !important;
-}
-
-/* 2. STATO ATTIVO VERDE (Buono/Sotto-vento): Attivo solo se JS imposta il colore di lift (#27ae60) */
-.night-mode #trend-gauge-cw[fill="#27ae60"],
-.night-mode #trend-gauge-ccw[fill="#27ae60"] {
-    fill: #00C851 !important; /* Verde smeraldo brillante */
-    stroke: none !important;
-    filter: drop-shadow(0 0 5px #00C851) !important;
-    opacity: 1 !important;
-}
-
-/* 3. STATO ATTIVO ROSSO (Scarso/Sopra-vento o strambata): Attivo se JS imposta il colore di header (#c0392b) o se in allarme strambata */
-.night-mode #trend-gauge-cw[fill="#c0392b"],
-.night-mode #trend-gauge-ccw[fill="#c0392b"],
-.night-mode #trend-gauge-cw.is-gybing,
-.night-mode #trend-gauge-ccw.is-gybing {
-    fill: #ff3b30 !important; /* Rosso brillante */
-    stroke: none !important;
-    filter: drop-shadow(0 0 5px #ff3b30) !important;
-    opacity: 1 !important;
-}
-
-.night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
-.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; }
-.night-mode #ticks line { stroke: #550000 !important; }
-.night-mode #tick-labels { fill: #800000 !important; }
-.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; }
-.night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; opacity: 0.6; }
-.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 --- */
-.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 g[stroke="#555"] line { stroke: #440000 !important; }
-.night-mode g[fill="#555"] text { fill: #800000 !important; }
-.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; }
-.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
-.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; }
-
-/* --- 10.6 LOGICA RED-SHIFT TREND (PULITA) --- */
-.night-mode circle[fill="#bbb"]:not(#trend-gauge-cw):not(#trend-gauge-ccw), .night-mode circle[fill="#bbbbbb"]:not(#trend-gauge-cw):not(#trend-gauge-ccw) {
-    fill: #440000 !important;
-}
-.night-mode circle[fill="#27ae60"]:not(#trend-gauge-cw):not(#trend-gauge-ccw) {
-    fill: #ff0000 !important;
-}
-.night-mode circle[fill="#c0392b"]:not(#trend-gauge-cw):not(#trend-gauge-ccw) {
-    fill: #800000 !important;
-}
-
-/* ==========================================================================
-   11. TREND E ANIMAZIONI
-   ========================================================================== */
-@keyframes blink-trend { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-#trend-dot-cw, #trend-dot-ccw, #trend-gauge-cw, #trend-gauge-ccw { opacity: 0.3; transition: opacity 0.3s ease; }
-.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;
-}
-
-/* ==========================================================================
-   12. INTEGRAZIONE DUAL-SVG COMPASS & RADAR
-   ========================================================================== */
-#wind-gauge, #wind-radar {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    transition: opacity 0.2s ease-in-out;
-}
-
-/* --- OVERRIDE NIGHT MODE PER IL WIND RADAR --- */
-.night-mode #wind-radar circle:not(.is-trending) {
-    fill: #000000 !important;
-    stroke: #220000 !important;
-}
-.night-mode #wind-radar circle:nth-of-type(2):not(.is-trending),
-.night-mode #radar-hotspot {
-    fill: #050000 !important;
-    stroke: #330000 !important;
-}
-.night-mode #radar-tick-labels {
-    fill: #800000 !important;
-}
-.night-mode #radar-boat-icon {
-    fill: #220000 !important;
-    stroke: #ff0000 !important;
-    stroke-width: 0.8px !important;
-    opacity: 1 !important;
-}
-.night-mode #ora-orbit {
-    stroke: #330000 !important;
-}
-.night-mode #wind-radar circle[stroke="#b0bec5"] {
-    stroke: #440000 !important;
-}
-
-/* ==========================================================================
-   13. SMORZAMENTO FLUIDO AGHI A 60FPS (DAMPING HARDWARE) non utilizzato consuma troppa cpu
-   ==========================================================================
-
- Applichiamo la transizione fluida a tutti i puntatori mantenendo i perni nativi dell'SVG
-#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
-    transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-*/
-
-/* ==========================================================================
-   14. POSIZIONAMENTO SOVRAPPOSTO LAYERED COMPASS (0% CARICO CPU)
-   ========================================================================== */
-
-/* Contenitore padre relativo */
-.wind-gauge-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Sovrapposizione assoluta perfetta del livello lancette sopra lo sfondo */
-#wind-gauge-pointers {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    pointer-events: none; /* Permette al tocco del mouse di passare sotto al centro interattivo */
-}