/* ============================================
   NAVIMATE v1.0 - Navigate Together
   ============================================ */
:root {
    --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono:'JetBrains Mono','Fira Code',monospace;
    --safe-bottom:env(safe-area-inset-bottom,0px);
    /* ================================================================
       ORDINE: DALL'ALTO VERSO IL BASSO, COME LI VEDI SULLO SCHERMO
       ================================================================ */

    /* ================================================================
       1. BARRA SUPERIORE "Navimate" (la riga fissa in cima con logo e nome)
       ================================================================ */
    --header-bar-h:54px;            /* altezza della barra */

    /* ================================================================
       2. PANNELLO — il riquadro scuro che si apre dal basso
       (contiene tutto: rotte, barche, GPS, guida, ecc.)
       ================================================================ */
    --view-radius:14px;             /* quanto sono arrotondati gli angoli in alto */
    --view-padding-top:0;            /* spazio interno SOPRA (tra maniglia e contenuto) */
    --view-padding-right:14px;       /* spazio interno DESTRA */
    --view-padding-bottom:14px;      /* spazio interno SOTTO */
    --view-padding-left:14px;        /* spazio interno SINISTRA */
    --view-height:50vh;             /* altezza quando è chiuso (metà schermo) */
    --view-bottom:52px;             /* distanza dal fondo schermo (sopra la barra 5 tab) */

    /* ================================================================
       3. MANIGLIA — la barretta grigia in cima al pannello per trascinarlo
       ================================================================ */
    --handle-pad-top:8px;           /* spazio vuoto SOPRA la barretta */
    --handle-pad-bottom:4px;        /* spazio vuoto SOTTO la barretta */
    --handle-pill-w:40px;           /* quanto è larga la barretta */
    --handle-pill-h:5px;            /* quanto è alta/spessa la barretta */
--handle-pill-color:var(--col-maniglia-pillola); /* colore della barretta (modo scuro) */

    /* ================================================================
       4. BARRA TITOLO — es. "Le mie barche", "Rotte"
       (sotto la maniglia, resta ferma quando scorri)
       ================================================================ */
    --header-pad-top:8px;           /* spazio sopra il titolo */
    --header-pad-bottom:8px;        /* spazio sotto il titolo */
    --header-margin-bottom:10px;    /* distanza tra il titolo e il contenuto sotto */
    --header-shadow:0 2px 0 var(--col-titolo-ombra); /* linea ombra sotto il titolo */

    /* ================================================================
       5. LINGUETTE — es. "Rotte | Waypoint", "Amici | Gruppi"
       (sotto il titolo, restano ferme quando scorri)
       ================================================================ */
    --subtabs-top:0;                /* a quanti pixel dal bordo superiore si fermano */
    --subtabs-pad-top:14px;         /* spazio sopra le linguette */
    --subtabs-pad-sides:14px;       /* spazio a destra e sinistra */
    --subtabs-margin-top:-14px;     /* spostamento verso l'alto (negativo = sale) */
    --subtabs-margin-sides:-14px;   /* allargamento laterale (negativo = si allarga) */
    --subtabs-margin-bottom:10px;   /* distanza tra le linguette e il contenuto sotto */

    /* ================================================================
       6. RIGA BOTTONI SOTTO LE LINGUETTE
       es. "Schermo intero | IMPORTA GPX" oppure "Mappa | Dist | A-Z | GPX"
       (resta ferma sotto le linguette quando scorri)
       ================================================================ */
    --toolbar-top:50px;             /* a quanti pixel dal bordo superiore si ferma */
    --toolbar-pad-top:4px;          /* spazio sopra la riga bottoni */
    --toolbar-pad-bottom:6px;       /* spazio sotto la riga bottoni */
    --toolbar-margin-bottom:6px;    /* distanza tra la riga bottoni e il contenuto sotto */
    --toolbar-min-h:38px;           /* altezza minima della riga bottoni */
    --toolbar-notabs-top:-14px;     /* posizione quando NON ci sono linguette sopra */

    /* ================================================================
       7. TASTO "← Indietro" / TORNA
       (quando entri in una sotto-pagina, resta fermo in cima)
       ================================================================ */
    --back-pad-top:8px;             /* spazio sopra il tasto */
    --back-pad-bottom:8px;          /* spazio sotto il tasto */
    --back-margin-bottom:10px;      /* distanza tra il tasto e il contenuto sotto */

    /* ================================================================
       8. TASTI TORNA / STOP (appaiono durante la navigazione nella lista rotte)
       Restano fermi sotto le linguette e la riga bottoni
       ================================================================ */
    --navbtns-top:90px;             /* a quanti pixel dal bordo superiore si fermano */
    --navbtns-pad:8px;              /* spazio sopra e sotto i tasti */
    --navbtns-gap:6px;              /* distanza tra TORNA e STOP */
    --navbtns-margin-bottom:8px;    /* distanza tra i tasti e le rotte sotto */

    /* ================================================================
       9. BARRA DI SCORRIMENTO LATERALE
       ================================================================ */
    --scrollbar-w:3px;              /* spessore */

    /* ================================================================
       NAVIGAZIONE — posizione pulsanti e offset centro mappa
       (in nav-mode: cruscotto in alto, badge in basso)
       ================================================================ */
    /* Pulsanti sinistri (cerca, fullscreen, indietro, center, N/prua) */
    --nav-ctrls-left:8px;
    --nav-ctrls-bottom:78px;
    /* Scala mappa in nav-mode (barra separata) */
    --nav-scale-left:65px;
    --nav-scale-bottom:105px;
    /* Distanza testo scala dalla linea (vale per tutte le scale, tutti i tab) */
    --scale-padding-bottom:3px;
    --scale-height:10px;

    /* ================================================================
       DESKTOP — DIMENSIONI DI OGNI SINGOLO PANNELLO
       (si applicano solo su schermi larghi, da PC/tablet orizzontale)

       Ordinati come li incontra l'utente:
       prima il login, poi i 5 tab, poi le voci del menu laterale

       -w     = larghezza fissa
       -h     = altezza quando è chiuso
       -h-exp = altezza quando è aperto tutto (trascinato su)
       -left  = distanza dal bordo sinistro dello schermo
       -bottom = distanza dal fondo dello schermo
       -radius = quanto sono arrotondati gli angoli
       ================================================================ */

    /* ── PRIMA COSA: Login / Registrazione ── */
    --desk-auth-w:390px;
    --desk-auth-h:calc(100vh - 74px); /* quasi tutto lo schermo */
    --desk-auth-left:10px;
    --desk-auth-bottom:10px;
    --desk-auth-radius:10px;

    /* ── Barra 5 tab in basso (Rotte, Nuovo, Nav, GPS, Barche) ── */
    --desk-nav-w:390px;             /* larghezza */
    --desk-nav-left:10px;           /* distanza da sinistra */
    --desk-nav-bottom:10px;         /* distanza dal fondo */
    --desk-nav-radius:10px;         /* angoli arrotondati */
    --desk-nav-pad:3px;             /* spazio interno */

    /* ── TAB 1: Rotte / Waypoint (lista percorsi e punti) ── */
    --desk-routes-w:390px;
    --desk-routes-h:50vh;
    --desk-routes-h-exp:calc(100vh - 140px);
    --desk-routes-left:10px;
    --desk-routes-bottom:72px;
    --desk-routes-radius:10px;

    /* ── TAB 2: Nuovo (Crea rotta, waypoint, importa GPX) ── */
    --desk-create-w:390px;
    --desk-create-h:50vh;
    --desk-create-h-exp:calc(100vh - 140px);
    --desk-create-left:10px;
    --desk-create-bottom:72px;
    --desk-create-radius:10px;

    /* ── TAB 3: Navigazione / Cruscotto (durante la navigazione) ── */
    --desk-navigate-w:390px;
    --desk-navigate-h:50vh;
    --desk-navigate-h-exp:calc(100vh - 140px);
    --desk-navigate-left:10px;
    --desk-navigate-bottom:72px;
    --desk-navigate-radius:10px;

    /* ── TAB 4: GPS / Bussola (coordinate, velocità, precisione) ── */
    --desk-gps-w:390px;
    --desk-gps-h:50vh;
    --desk-gps-h-exp:calc(100vh - 140px);
    --desk-gps-left:10px;
    --desk-gps-bottom:72px;
    --desk-gps-radius:10px;

    /* ── TAB 5: Barche (lista imbarcazioni, attiva, modifica) ── */
    --desk-barche-w:390px;
    --desk-barche-h:50vh;
    --desk-barche-h-exp:calc(100vh - 140px);
    --desk-barche-left:10px;
    --desk-barche-bottom:72px;
    --desk-barche-radius:10px;

    /* ── MENU ☰: Profilo (il tuo profilo, foto, bio, porto) ── */
    --desk-profilo-w:390px;
    --desk-profilo-h:50vh;
    --desk-profilo-h-exp:calc(100vh - 140px);
    --desk-profilo-left:10px;
    --desk-profilo-bottom:72px;
    --desk-profilo-radius:10px;

    /* ── MENU ☰: Community / Amici (lista amici e gruppi) ── */
    --desk-community-w:390px;
    --desk-community-h:50vh;
    --desk-community-h-exp:calc(100vh - 140px);
    --desk-community-left:10px;
    --desk-community-bottom:72px;
    --desk-community-radius:10px;

    /* ── MENU ☰: Tracce GPS (diario di bordo, registrazioni viaggio) ── */
    --desk-tracce-w:390px;
    --desk-tracce-h:50vh;
    --desk-tracce-h-exp:calc(100vh - 140px);
    --desk-tracce-left:10px;
    --desk-tracce-bottom:72px;
    --desk-tracce-radius:10px;

    /* ── MENU ☰: Impostazioni (preferenze, unità, tema, notifiche) ── */
    --desk-settings-w:390px;
    --desk-settings-h:50vh;
    --desk-settings-h-exp:calc(100vh - 140px);
    --desk-settings-left:10px;
    --desk-settings-bottom:72px;
    --desk-settings-radius:10px;

    /* ── MENU ☰: Guida (manuale utente con ricerca) ── */
    --desk-guida-w:390px;
    --desk-guida-h:50vh;
    --desk-guida-h-exp:calc(100vh - 140px);
    --desk-guida-left:10px;
    --desk-guida-bottom:72px;
    --desk-guida-radius:10px;

    /* ── MENU ☰: Privacy (informativa privacy) ── */
    --desk-privacy-w:390px;
    --desk-privacy-h:50vh;
    --desk-privacy-h-exp:calc(100vh - 140px);
    --desk-privacy-left:10px;
    --desk-privacy-bottom:72px;
    --desk-privacy-radius:10px;

    /* ── MENU ☰: Meteo Marittimo ── */
    --desk-meteo-w:390px;
    --desk-meteo-h:50vh;
    --desk-meteo-h-exp:calc(100vh - 140px);
    --desk-meteo-left:10px;
    --desk-meteo-bottom:72px;
    --desk-meteo-radius:10px;

    /* ── MENU ☰: Stato del Mare ── */
    --desk-mare-w:390px;
    --desk-mare-h:50vh;
    --desk-mare-h-exp:calc(100vh - 140px);
    --desk-mare-left:10px;
    --desk-mare-bottom:72px;
    --desk-mare-radius:10px;

    /* ── MENU ☰: FAQ / Helpdesk (domande frequenti e ticket) ── */
    --desk-helpdesk-w:390px;
    --desk-helpdesk-h:50vh;
    --desk-helpdesk-h-exp:calc(100vh - 140px);
    --desk-helpdesk-left:10px;
    --desk-helpdesk-bottom:72px;
    --desk-helpdesk-radius:10px;

    /* ── MENU ☰: Admin (pannello amministrazione) ── */
    --desk-admin-w:390px;
    --desk-admin-h:50vh;
    --desk-admin-h-exp:calc(100vh - 140px);
    --desk-admin-left:10px;
    --desk-admin-bottom:72px;
    --desk-admin-radius:10px;

    /* ── SOTTO-PANNELLI (si aprono da dentro altri pannelli) ── */

    /* Dettaglio gruppo (si apre da Community) */
    --desk-group-w:390px;
    --desk-group-h:50vh;
    --desk-group-h-exp:calc(100vh - 140px);
    --desk-group-left:10px;
    --desk-group-bottom:72px;
    --desk-group-radius:10px;

    /* Chat (si apre da Community o da un gruppo) */
    --desk-chat-w:390px;
    --desk-chat-h:55vh;             /* un po' più alto per leggere i messaggi */
    --desk-chat-h-exp:calc(100vh - 140px);
    --desk-chat-left:10px;
    --desk-chat-bottom:72px;
    --desk-chat-radius:10px;

--badge-bg:var(--col-badge-nav-sfondo);--badge-border:var(--col-badge-nav-bordo);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--col-pannello-sfondo);color:var(--col-card-titolo);}
input::placeholder,textarea::placeholder{color:var(--col-testo-hint)!important;opacity:1;}

/* LAYOUT */
#app{display:flex;flex-direction:column;height:100dvh;}
#map-wrapper{flex:1;position:relative;overflow:hidden;z-index:1;}
#map{width:100%;height:100%;transition:transform 0.3s;transform-origin:center center;}
/* Attribution bar — positioned per-tab */
#map-attrib-bar{position:fixed;height:18px;display:flex;align-items:center;justify-content:space-between;background:transparent;z-index:500;padding:0 6px;font-size:10px;color:#202020;pointer-events:auto;}
#map-attrib-bar a{color:#202020;text-decoration:none;}
#map-scale-slot{display:flex;align-items:center;}
#map-scale-slot .leaflet-control-scale{margin:0!important;}
#map-scale-slot .leaflet-control-scale-line{box-sizing:content-box!important;height:var(--scale-height)!important;border-color:#202020!important;color:#202020!important;font-size:9px!important;line-height:1!important;padding:0 4px var(--scale-padding-bottom)!important;background:none!important;border-width:0 1px 1px 1px!important;margin:0!important;text-shadow:none!important;}
#map-attrib-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Satellite: testo bianco */
#map-attrib-bar.map-sat-mode{color:rgba(255,255,255,0.6);}
#map-attrib-bar.map-sat-mode a{color:rgba(255,255,255,0.7);}
#map-attrib-bar.map-sat-mode .leaflet-control-scale-line{border-color:rgba(255,255,255,0.5)!important;color:rgba(255,255,255,0.6)!important;}
/* --- POSIZIONE MOBILE PER OGNI TAB (left, right, bottom in px) --- */
#map-attrib-bar.attrib-routes  {left:0px; right:0px; bottom:426px;}
#map-attrib-bar.attrib-create  {left:0px; right:0px; bottom:426px;}
#map-attrib-bar.attrib-nav     {left:65px; right:65px; bottom:75px;}
#map-attrib-bar.attrib-gps     {left:0px; right:0px; bottom:426px;}
#map-attrib-bar.attrib-barche  {left:0px; right:0px; bottom:426px;}
/* Nav mode: hide scale (bar too narrow), show only credits */
#map-attrib-bar.attrib-nav #map-scale-slot{display:none;}
/* course-up handled by leaflet-rotate plugin */

/* HEADER */
.header{display:flex;align-items:center;justify-content:space-between;padding:2px 12px;margin-top:var(--notch,0px);background:var(--col-header-sfondo);border-bottom:1px solid var(--col-header-bordo);z-index:1000;min-height:var(--header-bar-h);}
.header-brand{display:flex;align-items:center;gap:8px;}
.header-brand svg{width:26px;height:26px;}
.header-brand img{height:50px;}
.header-right{display:flex;align-items:center;gap:10px;}
#user-display{font-size:14px;color:var(--col-header-nome);font-weight:600;}
.btn-header{background:none;border:1px solid var(--col-header-bordo);color:var(--col-header-pulsante-testo);padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;}

/* HAMBURGER */
.btn-hamburger{background:none;border:none;color:var(--col-header-nome);cursor:pointer;padding:6px;display:flex;align-items:center;}
.btn-hamburger svg{width:28px;height:28px;}

/* DRAWER */
.drawer-overlay{display:none;position:fixed;inset:0;background:var(--col-menu-overlay);z-index:9998;-webkit-tap-highlight-color:transparent;}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:80vw;background:var(--col-menu-sfondo);z-index:9999;
    transform:translateX(-100%);transition:transform 0.25s ease;display:flex;flex-direction:column;
    box-shadow:4px 0 20px var(--col-menu-ombra);overflow-y:auto;}
.drawer.open{transform:translateX(0);}
.drawer-header{padding:20px 16px 16px;background:var(--col-menu-testata-sfondo);border-bottom:1px solid var(--col-menu-testata-bordo);display:flex;align-items:center;gap:12px;}
.drawer-avatar{width:48px;height:48px;border-radius:50%;background:var(--col-menu-avatar-sfondo);border:2px solid var(--col-menu-avatar-bordo);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.drawer-user{overflow:hidden;}
.drawer-username{font-weight:700;font-size:14px;color:var(--col-menu-nome);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drawer-email{font-size:11px;color:var(--col-menu-email);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drawer-visibility{font-size:10px;color:var(--col-menu-avatar-bordo);margin-top:2px;}
.drawer-body{flex:1;padding:8px 0;}
.drawer-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;background:none;border:none;
    color:var(--col-menu-nome);font-size:16px;font-weight:600;font-family:var(--font);cursor:pointer;text-align:left;transition:background 0.15s;}
.drawer-item:hover,.drawer-item:active{background:var(--col-menu-voce-hover);}
.drawer-badge{background:var(--col-menu-badge-sfondo);color:var(--col-menu-badge-testo);font-size:11px;font-weight:700;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;display:inline-block;margin-left:8px;padding:0 5px;}
.drawer-icon{width:28px;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.drawer-sep{height:1px;background:var(--col-menu-separatore);margin:4px 16px;}
.drawer-logout{color:var(--col-menu-badge-sfondo);}
.drawer-footer{padding:12px 16px;font-size:10px;color:var(--col-menu-footer);border-top:1px solid var(--col-menu-separatore);text-align:center;}

/* BOTTOM NAV */
.bottom-nav{display:flex;background:var(--col-barra-sfondo);border-top:1px solid var(--col-menu-separatore);padding-bottom:var(--safe-bottom);z-index:1000;}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 2px 6px;border:none;background:none;color:var(--col-barra-inattivo);font-size:12px;font-weight:600;cursor:pointer;gap:2px;}
.nav-btn .icon{display:flex;align-items:center;justify-content:center;height:24px;}
.nav-btn.active{color:var(--col-barra-attivo);}

/* NAV MODE */
body.nav-mode .header,body.nav-mode .bottom-nav{display:none!important;}
body.nav-mode #map-wrapper{height:100dvh;}

/* COMPASS STRIP */
.compass-strip{display:none;position:fixed;top:var(--notch,0px);left:0;right:0;z-index:1100;height:40px;background:var(--col-bussola-sfondo);border-bottom:1px solid var(--col-bussola-bordo);overflow:hidden;backdrop-filter:blur(8px);}
body.nav-mode .compass-strip{display:block;}
.compass-strip-inner{position:relative;height:100%;white-space:nowrap;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--col-bussola-testo);transition:transform 0.15s ease-out;}
.cs-tick{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2px;width:1px;}
.cs-tick::before{content:'';display:block;width:1px;height:8px;background:var(--col-bussola-tacca-piccola);margin-bottom:1px;}
.cs-tick.major::before{height:14px;background:var(--col-bussola-tacca-grande);}
.cs-tick.cardinal{color:var(--col-bussola-cardinale);font-weight:700;font-size:14px;}
.cs-tick.cardinal::before{background:var(--col-bussola-cardinale);height:16px;}
.cs-center{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:var(--col-bussola-centro);z-index:2;}
.cs-center::after{content:'';position:absolute;bottom:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid var(--col-bussola-centro);}
.compass-heading-readout{position:absolute;top:2px;left:50%;transform:translateX(-50%);background:var(--col-bussola-lettura-sfondo);border:1px solid var(--col-bussola-lettura-bordo);border-radius:4px;padding:1px 10px;font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--col-bussola-lettura-testo);z-index:3;}
/* Bearing indicator on compass strip */
.cs-brg{position:absolute;top:0;z-index:2;display:none;transition:left 0.2s ease-out;}
body.nav-mode .cs-brg.active{display:block;}
.cs-brg-tri{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--col-bussola-bearing);margin-left:-7px;}
.cs-brg-arrow-l,.cs-brg-arrow-r{display:none;position:absolute;top:4px;}
.cs-brg.off-left .cs-brg-tri{display:none;}
.cs-brg.off-left .cs-brg-arrow-l{display:block;}
.cs-brg.off-right .cs-brg-tri{display:none;}
.cs-brg.off-right .cs-brg-arrow-r{display:block;}

/* ============ BADGE ROWS: 3 top + 3 bottom ============ */
.nav-badges{display:none;position:fixed;z-index:1050;pointer-events:none;left:0;right:0;}
body.nav-mode .nav-badges{display:block;}

.badge-row{
    position:fixed;left:0;right:0;
    display:flex;gap:6px;padding:0 8px;
    pointer-events:none;
}
.badge-row-top{top:calc(44px + var(--notch,0px));}
.badge-row-mid{top:calc(44px + var(--notch,0px) + 62px);}
.badge-row-bottom{bottom:8px;}

.nav-badge{
    flex:1;background:var(--col-badge-nav-sfondo);border:1px solid var(--col-badge-nav-bordo);
    border-radius:8px;padding:4px 8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    pointer-events:auto;min-width:0;
}
.nav-badge .nb-label{font-size:11px;color:var(--col-badge-nav-etichetta);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;line-height:1;}
.nav-badge .nb-value{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--col-badge-nav-valore);line-height:1.1;text-shadow:0 1px 4px var(--col-badge-nav-valore-ombra);white-space:nowrap;overflow:hidden;}
.nav-badge .nb-unit{font-size:14px;color:var(--col-badge-nav-etichetta);font-weight:700;margin-left:2px;}
.nav-badge[data-type="none"]{visibility:hidden;}

/* XTE bar inside badge */
.nb-xte-bar{height:6px;background:var(--col-badge-nav-xte-sfondo);border-radius:3px;margin-top:3px;position:relative;}
.nb-xte-center{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--col-badge-nav-xte-centro);}
.nb-xte-dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--col-badge-nav-xte-ok);transform:translate(-50%,-50%);transition:left 0.3s;}
.nb-xte-dot.warn{background:var(--col-badge-nav-xte-avviso);}.nb-xte-dot.danger{background:var(--col-badge-nav-xte-pericolo);}
/* Progress inside badge */
.nb-prog-bar{height:5px;background:var(--col-badge-nav-xte-sfondo);border-radius:3px;margin-top:3px;}
.nb-prog-fill{height:100%;background:var(--col-badge-nav-progresso);border-radius:3px;transition:width 0.5s;}

/* ============ Si.Sa. (Barcavelox) — lampeggio badge ============ */
@keyframes sisa-flash-day{
    0%,100%{background:var(--col-badge-nav-sfondo);}
    50%{background:#FF2222;}
}
@keyframes sisa-flash-night{
    0%,100%{background:var(--col-badge-nav-sfondo);}
    50%{background:#FFFFFF;}
}
/* Light theme (giorno): lampeggio rosso vivo */
body.light-mode .nav-badge.sisa-flash{animation:sisa-flash-day 0.6s ease-in-out infinite;}
body.light-mode .nav-badge.sisa-flash .nb-value,
body.light-mode .nav-badge.sisa-flash .nb-label{color:#FFFFFF;}
/* Dark theme (notte, default): lampeggio bianco */
.nav-badge.sisa-flash{animation:sisa-flash-night 0.6s ease-in-out infinite;}
.nav-badge.sisa-flash .nb-value,
.nav-badge.sisa-flash .nb-label{color:#000000;}

/* ============ NAV CONTROLS — above bottom badges ============ */
.nav-ctrls{
    display:none;position:fixed;z-index:1200;
    bottom:var(--nav-ctrls-bottom);left:var(--nav-ctrls-left);
    flex-direction:column;gap:6px;
    overflow-y:auto;max-height:calc(100vh - 200px);-webkit-overflow-scrolling:touch;
}
body.nav-mode .nav-ctrls{display:flex;}
.nav-ctrl-btn{
    width:50px;height:50px;border-radius:10px;border:2px solid var(--col-ctrl-nav-bordo);
    background:var(--col-ctrl-nav-sfondo);color:var(--col-ctrl-nav-icona);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 2px 8px var(--col-ctrl-nav-ombra);
}
.nav-ctrl-btn:active{background:var(--col-ctrl-nav-premuto);transform:scale(0.95);}
/* Bold filled arrow icons via SVG */
.nav-ctrl-btn svg{width:28px;height:28px;fill:var(--col-ctrl-nav-icona);}

/* NAV-MODE SCALE BAR — posizionabile separatamente */
#nav-scale-bar{display:none;position:fixed;z-index:1100;left:var(--nav-scale-left);bottom:var(--nav-scale-bottom);}
body.nav-mode #nav-scale-bar{display:block;}
#nav-scale-bar .leaflet-control-scale{margin:0!important;}
#nav-scale-bar .leaflet-control-scale-line{box-sizing:content-box!important;height:var(--scale-height)!important;border-color:#202020!important;color:#202020!important;font-size:9px!important;line-height:1!important;padding:0 4px var(--scale-padding-bottom)!important;background:none!important;border-width:0 1px 1px 1px!important;margin:0!important;text-shadow:none!important;}
#nav-scale-bar.map-sat-mode .leaflet-control-scale-line{border-color:rgba(255,255,255,0.5)!important;color:rgba(255,255,255,0.6)!important;}

/* SEARCH OVERLAY — Vai a / Cerca località */
#nav-search-overlay{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
    background:var(--bg1);
    display:flex;flex-direction:column;
}
.nav-search-box{
    display:flex;align-items:center;gap:8px;padding:12px;
    flex-shrink:0;
}
.nav-search-box input{
    flex:1;height:48px;padding:0 14px;font-size:16px;font-weight:600;
    background:var(--bg2);color:var(--text);border:2px solid var(--col-bordo-gen);
    border-radius:8px;outline:none;
}
.nav-search-box input:focus{border-color:var(--col-accento-brand);}
.nav-search-box input::placeholder{color:var(--col-testo-dim);font-weight:400;}
#nav-search-close{
    width:48px;height:48px;border:none;border-radius:8px;
    background:var(--bg2);color:var(--text);font-size:22px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#nav-search-results{
    flex:1;overflow-y:auto;padding:0 12px 12px;
}
.search-result{
    padding:14px;margin-bottom:6px;border-radius:8px;cursor:pointer;
    background:var(--bg2);border:1px solid var(--col-bordo-gen);
}
.search-result:active{background:var(--col-ctrl-nav-premuto);}
.search-result-name{font-size:16px;font-weight:700;color:var(--text);}
.search-result-detail{font-size:13px;color:var(--col-testo-dim);margin-top:3px;}
.search-result-coord{font-size:12px;color:var(--col-testo-dim);margin-top:3px;font-family:monospace;}
.search-loading,.search-empty{text-align:center;padding:30px;color:var(--col-testo-dim);font-size:15px;}

/* ZOOM — above bottom badges, right side, aligned with right badge */
.nav-zoom{
    display:none;position:fixed;z-index:1200;
    bottom:78px;right:8px;
    flex-direction:column;gap:6px;
    overflow-y:auto;max-height:calc(100vh - 200px);-webkit-overflow-scrolling:touch;
}
body.nav-mode .nav-zoom{display:flex;}
/* zoom always visible in nav mode */
.nav-zoom-btn{
    width:50px;height:50px;border-radius:10px;border:2px solid var(--col-ctrl-nav-bordo);
    background:var(--col-ctrl-nav-sfondo);color:var(--col-ctrl-nav-icona);font-size:28px;font-weight:700;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(8px);box-shadow:0 2px 8px var(--col-ctrl-nav-ombra);
}
.nav-zoom-btn:active{background:var(--col-ctrl-nav-premuto);transform:scale(0.95);}

/* Hide Leaflet default zoom in nav mode */
body.nav-mode .leaflet-control-zoom{display:none!important;}

/* Non-nav map controls */
.map-controls{position:fixed;bottom:80px;left:8px;z-index:800;display:flex;flex-direction:column;gap:5px;}
.map-controls-right{position:fixed;top:calc(56px + var(--notch,0px));right:8px;z-index:800;display:flex;flex-direction:column;gap:5px;}
body.nav-mode .map-controls,body.nav-mode .map-controls-right{display:none!important;}
.map-btn{width:44px;height:44px;border-radius:8px;border:1px solid var(--col-pulsante-mappa-bordo);background:var(--col-pulsante-mappa-sfondo);color:var(--col-pulsante-mappa-icona);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px var(--col-pulsante-mappa-ombra);backdrop-filter:blur(6px);}
.map-btn.active{background:var(--col-pulsante-mappa-attivo);}

/* Leaflet zoom for non-nav */
.leaflet-control-zoom{position:fixed!important;bottom:80px!important;right:8px!important;z-index:800!important;}
.leaflet-control-zoom a{background:var(--col-pulsante-mappa-sfondo)!important;color:var(--col-pulsante-mappa-icona)!important;border-color:var(--col-pulsante-mappa-bordo)!important;width:40px!important;height:40px!important;line-height:40px!important;font-size:22px!important;}
/* Hide default Leaflet attribution — we use #map-attrib-bar instead */
.leaflet-control-attribution.leaflet-control{display:none!important;}

/* POSITION MARKERS */
.position-marker{background:none!important;border:none!important;}
.live-marker{background:none!important;border:none!important;}
.pos-dot-marker{width:22px;height:22px;border-radius:50%;background:var(--col-posizione-sfondo);border:3px solid var(--col-zoom-testo);box-shadow:0 0 8px var(--col-posizione-ombra-1),0 0 16px var(--col-posizione-ombra-2);}
.pos-icon-marker{width:22px;height:22px;font-size:18px;text-align:center;line-height:22px;filter:drop-shadow(0 2px 4px var(--col-posizione-ombra-1));}
.live-dot{border-radius:50%;border:1px solid var(--col-posizione-live-bordo);margin:0 auto;}
.live-label{border-radius:3px;padding:1px 4px;margin-top:1px;display:inline-block;text-align:center;border:1px solid var(--col-posizione-live-bordo);}
.live-name{font-size:11px;font-weight:400;white-space:nowrap;}
.live-time{font-size:9px;font-weight:400;white-space:nowrap;}
.accuracy-circle{fill:var(--col-posizione-cerchio-fill);fill-opacity:0.06;stroke:var(--col-posizione-cerchio-fill);stroke-opacity:0.2;stroke-width:1;}

/* VIEWS */
.view{display:none;position:absolute;left:0;right:0;bottom:var(--view-bottom);height:var(--view-height);background:var(--col-pannello-sfondo);border-top:1px solid var(--col-pannello-bordo);border-radius:var(--view-radius) var(--view-radius) 0 0;overflow:hidden;z-index:900;padding:14px;animation:slideUp 0.2s ease;transition:height 0.2s ease;}
.view.active{display:flex;flex-direction:column;}
.view-scroll{flex:1;overflow-y:auto;padding:var(--view-padding-top) var(--view-padding-right) var(--view-padding-bottom) var(--view-padding-left);}
.view.view-expanded{height:calc(100vh - var(--header-bar-h) - var(--view-bottom));}
/* Auth panel: bottom:0 (no bottom-nav gap), full height by default */
#view-auth{bottom:0;height:calc(100vh - var(--header-bar-h));border-radius:0;overflow-y:auto;padding:var(--view-padding-top) var(--view-padding-right) var(--view-padding-bottom) var(--view-padding-left);}
/* iOS Safari: 100vh include la barra browser, dvh no */
@supports(height:100dvh){
.view.view-expanded{height:calc(100dvh - var(--header-bar-h) - var(--view-bottom));}
#view-auth{height:calc(100dvh - var(--header-bar-h));}
}
#view-navigate{overflow-y:auto;padding:var(--view-padding-top) var(--view-padding-right) var(--view-padding-bottom) var(--view-padding-left);}
#view-settings{overflow-y:auto;}
.view-drag-handle{width:100%;display:flex;justify-content:center;padding:var(--handle-pad-top) 0 var(--handle-pad-bottom);cursor:grab;touch-action:none;flex-shrink:0;background:var(--col-maniglia-sfondo);border-radius:var(--view-radius) var(--view-radius) 0 0;position:relative;}
.view-drag-handle::before{content:'';position:absolute;left:0;right:0;top:50%;bottom:0;background:inherit;z-index:-1;}
.view-drag-handle .handle-pill{width:var(--handle-pill-w);height:var(--handle-pill-h);border-radius:3px;background:var(--col-maniglia-pillola);}
body.nav-mode .view{display:none!important;}
@keyframes slideUp{from{transform:translateY(16px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes liveFlash{0%{opacity:0;}10%{opacity:1;}100%{opacity:1;}}

/* AUTH */
.auth-container{max-width:340px;margin:0 auto;text-align:center;}
.auth-container h2{font-size:18px;margin-bottom:4px;color:var(--col-login-titolo);}
.auth-container p{color:var(--col-login-sottotitolo);font-size:11px;margin-bottom:14px;}
.auth-tabs{display:flex;margin-bottom:14px;border-radius:8px;overflow:hidden;border:1px solid var(--col-tab-bordo);}
.auth-tab{flex:1;padding:10px;border:none;background:var(--col-tab-sfondo);color:var(--col-login-sottotitolo);cursor:pointer;font-size:15px;font-weight:600;}
.auth-tab.active{background:var(--col-tab-attiva-sfondo);color:var(--col-tab-attiva-testo);}
.auth-form{display:none;}.auth-form.active{display:block;}
.form-group{margin-bottom:8px;text-align:left;}
.form-group label{display:block;font-size:13px;color:var(--col-tab-testo);margin-bottom:4px;font-weight:600;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--col-form-input-bordo);border-radius:8px;background:var(--col-tab-sfondo);color:var(--col-form-input-testo);font-size:15px;outline:none;font-family:var(--font);resize:vertical;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--col-tab-attiva-sfondo);box-shadow:0 0 0 3px var(--col-form-focus-glow);}
.checkbox-label{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--col-form-etichetta);line-height:1.4;}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;margin-top:1px;accent-color:var(--col-form-focus-bordo);flex-shrink:0;}
.btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;}
.btn-primary{background:linear-gradient(135deg,var(--col-pulsante-primario-grad-1),var(--col-pulsante-primario-grad-2)) /* GRAD001 */;color:var(--col-pulsante-primario-testo);}
.btn-outline{background:transparent;border:1px solid var(--col-form-input-bordo);color:var(--col-form-input-testo);}
.btn-sm{padding:8px 14px;font-size:13px;font-weight:600;width:auto;}
.btn-danger{background:var(--col-pulsante-pericolo-sfondo);color:var(--col-pulsante-primario-testo);}
.nav-sticky-btns{display:flex;gap:var(--navbtns-gap);position:sticky;top:var(--navbtns-top);z-index:10;padding:var(--navbtns-pad) 0;margin-bottom:var(--navbtns-margin-bottom);background:var(--col-sticky-sfondo);}

/* ROUTES */
.view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--header-margin-bottom);position:sticky;top:0;z-index:10;background:var(--col-titolo-sfondo);padding:var(--header-pad-top) var(--view-padding-right) var(--header-pad-bottom) var(--view-padding-left);margin:calc(-1 * var(--view-padding-top)) calc(-1 * var(--view-padding-right)) var(--header-margin-bottom) calc(-1 * var(--view-padding-left));box-shadow:var(--col-titolo-ombra);}
.view-header h2{font-size:18px;font-weight:700;}
.view-header h3{font-size:16px;font-weight:700;}
/* Collapsible edit body */
.edit-body{transition:max-height 0.3s ease,opacity 0.2s ease;overflow:hidden;}
.edit-body.collapsed{max-height:0!important;opacity:0;padding:0!important;margin:0!important;pointer-events:none;}
.btn-collapse{background:var(--col-pulsante-collassa-sfondo);border:2px solid var(--col-pulsante-collassa-bordo);color:var(--col-pulsante-collassa-testo);font-size:20px;font-weight:900;width:44px;height:44px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.view.edit-collapsed{height:auto!important;min-height:0!important;}
.route-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--col-pulsante-collassa-sfondo);border-radius:10px;margin-bottom:8px;}
.route-color{width:6px;border-radius:3px;align-self:stretch;min-height:40px;flex-shrink:0;}
.route-info{flex:1;min-width:0;}
.route-info h3{font-size:16px;font-weight:700;color:var(--col-pulsante-collassa-testo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.route-meta{font-size:13px;color:var(--col-card-meta);}
.route-actions{display:flex;gap:6px;flex-shrink:0;}
.btn-icon{width:42px;height:42px;border:1px solid var(--col-pulsante-icona-bordo);border-radius:8px;background:var(--col-pulsante-icona-sfondo);color:var(--col-pulsante-icona-testo);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;}
.btn-icon:hover{border-color:var(--col-pulsante-icona-hover-bordo);color:var(--col-pulsante-icona-hover-bordo);}
.btn-icon.btn-nav{border-color:var(--col-pulsante-nav-bordo);color:var(--col-pulsante-nav-bordo);}
.btn-icon.btn-del{border-color:var(--col-pulsante-elimina-bordo);color:var(--col-pulsante-elimina-bordo);}
.btn-icon.btn-pinned{border-color:var(--col-accento-brand);color:var(--col-accento-brand);background:rgba(245,166,35,0.12);}

/* NAV PANEL */
.nav-panel{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.nav-data{background:var(--col-card-sfondo);border-radius:8px;padding:8px;text-align:center;}
.nav-data.wide{grid-column:1/-1;}
.nav-data .label{font-size:11px;color:var(--col-nav-dato-etichetta);text-transform:uppercase;font-weight:600;}
.nav-data .value{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--col-nav-dato-valore);line-height:1.1;}
.nav-data .sub{font-size:11px;color:var(--col-nav-dato-etichetta);}
.xte-bar{position:relative;height:5px;background:var(--col-nav-xte-sfondo);border-radius:3px;margin-top:3px;}
.xte-center{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--col-nav-xte-centro);}
.xte-dot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--col-nav-xte-ok);transform:translate(-50%,-50%);transition:left 0.3s;}
.xte-dot.xte-warn{background:var(--col-nav-xte-avviso);}.xte-dot.xte-danger{background:var(--col-nav-xte-pericolo);}
.progress-track{height:4px;background:var(--col-nav-xte-sfondo);border-radius:2px;margin-top:3px;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--col-nav-progresso-grad-1),var(--col-nav-xte-ok)) /* GRAD002 */;border-radius:2px;transition:width 0.5s;}

/* GPS — Stand-Alone */
#view-gps{background:var(--col-gps-sfondo);padding:0;}
.gps-hdg-block{text-align:center;padding:10px 0 4px;}
.gps-hdg-val{font-family:var(--font-mono);font-size:52px;font-weight:700;color:var(--col-gps-heading);line-height:1;}
/* Compass ribbon */
.gps-compass-ribbon{position:relative;height:48px;background:var(--col-gps-nastro-sfondo);border-top:2px solid var(--col-gps-nastro-bordo);border-bottom:2px solid var(--col-gps-nastro-bordo);overflow:hidden;margin-bottom:10px;}
.gps-ribbon-inner{position:relative;height:100%;white-space:nowrap;font-family:var(--font-mono);font-size:13px;color:var(--col-gps-nastro-testo);transition:transform 0.15s ease-out;}
.gps-ribbon-center{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:0;z-index:2;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--col-gps-nastro-bordo);}
.gps-ribbon-inner .gr-tick{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:3px;}
.gps-ribbon-inner .gr-tick::before{content:'';display:block;width:1px;height:10px;background:var(--col-gps-nastro-tacca);margin-bottom:2px;}
.gps-ribbon-inner .gr-tick.gr-major::before{height:18px;background:var(--col-gps-nastro-tacca-grande);}
.gps-ribbon-inner .gr-tick.gr-cardinal{color:var(--col-gps-nastro-centro);font-weight:700;font-size:16px;}
.gps-ribbon-inner .gr-tick.gr-cardinal::before{background:var(--col-gps-nastro-centro);height:22px;}
/* Coordinate */
.gps-coord-block{text-align:center;padding:8px 12px;}
.gps-coord-label{font-size:11px;color:var(--col-gps-nastro-cardinale);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;}
.gps-coord-val{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--col-gps-coord-valore);}
/* Speed + Accuracy */
.gps-data-row{display:flex;align-items:center;justify-content:center;padding:8px 16px;gap:0;}
.gps-data-cell{flex:1;text-align:center;}
.gps-data-sep{width:1px;height:40px;background:var(--col-gps-dato-separatore);}
.gps-data-label{font-size:10px;color:var(--col-gps-dato-etichetta);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.gps-data-val{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--col-gps-dato-valore);line-height:1;}
.gps-data-row-3 .gps-data-val{font-size:24px;}
.gps-data-extra{font-size:11px;font-weight:700;margin-top:2px;min-height:14px;}

/* CONDIVISI ACCORDION */
.cond-accordion .cond-body{display:none;overflow:hidden;}
.cond-accordion.cond-open>.cond-body{display:block;}
.cond-arrow{font-size:12px;color:var(--col-testo-dim);transition:transform 0.2s;display:inline-block;}
.cond-accordion.cond-open>.cond-arrow,.cond-accordion.cond-open>div>.cond-arrow{transform:rotate(90deg);}

/* EDIT/GPX/WP */
.edit-wp{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--col-pannello-bordo);}
.edit-wp-num{width:26px;height:26px;border-radius:50%;background:var(--col-gps-dato-etichetta);color:var(--col-gps-dato-valore);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.edit-wp input{flex:1;padding:6px 8px;border:1px solid var(--col-pannello-bordo);border-radius:6px;background:var(--col-form-input-sfondo);color:var(--col-form-input-testo);font-size:14px;min-width:0;}
.edit-wp-coord{font-size:11px;color:var(--col-card-meta);font-family:var(--font-mono);flex-shrink:0;}

.wp-marker{background:none!important;border:none!important;}
.wp-dot{width:24px;height:24px;border-radius:50%;background:var(--col-waypoint-pallino-sfondo);border:2px solid var(--col-waypoint-numero-sfondo);color:var(--col-form-input-testo);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;}
.wp-dot.wp-start{background:var(--col-waypoint-inizio-sfondo);border-color:var(--col-waypoint-inizio-sfondo);color:var(--col-waypoint-inizio-testo);}
.wp-dot.wp-end{background:var(--col-waypoint-fine-sfondo);border-color:var(--col-waypoint-fine-sfondo);color:var(--col-waypoint-inizio-testo);}
.wp-dot.wp-edit{background:var(--col-waypoint-modifica);border-color:var(--col-waypoint-modifica);color:var(--col-waypoint-inizio-testo);}

/* TOASTS */
#toasts{position:fixed;bottom:80px;left:0;right:0;z-index:9999;display:flex;flex-direction:column-reverse;align-items:center;gap:6px;pointer-events:none;}
.toast{padding:12px 18px;border-radius:8px;font-size:15px;font-weight:600;color:var(--col-waypoint-fine-testo);opacity:0;transform:translateY(20px);transition:all 0.3s;max-width:300px;box-shadow:0 3px 12px var(--col-toast-ombra);white-space:pre-line;pointer-events:auto;}
.toast.show{opacity:1;transform:translateY(0);}
.toast-success{background:var(--col-toast-successo);}.toast-error{background:var(--col-toast-errore);}.toast-warning{background:var(--col-toast-avviso-sfondo);color:var(--col-toast-avviso-testo);}.toast-info{background:var(--col-toast-info-sfondo);color:var(--col-toast-info-testo);}

/* SETTINGS */
.settings-section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--col-impost-bordo);}
.settings-section:last-child{border-bottom:none;}
.settings-section h3{font-size:14px;color:var(--col-toast-info-sfondo);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;font-weight:700;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:10px;}
.settings-row label{font-size:14px;color:var(--col-impost-etichetta);flex-shrink:0;}
.settings-row select,.settings-row input[type="range"]{flex:0 0 auto;min-width:130px;padding:6px 8px;border:1px solid var(--col-impost-bordo);border-radius:6px;background:var(--col-impost-select-sfondo);color:var(--col-impost-etichetta);font-size:14px;}
.settings-row input[type="color"]{width:40px;height:32px;border:1px solid var(--col-impost-select-bordo);border-radius:6px;background:var(--col-impost-select-sfondo);cursor:pointer;padding:2px;}
.settings-row input[type="checkbox"]{width:22px;height:22px;accent-color:var(--col-impost-titolo);}
.badge-config{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;}
.badge-config-item{display:flex;flex-direction:column;gap:3px;padding:8px;background:var(--col-card-sfondo);border-radius:6px;min-width:0;}
.badge-config-item .bc-label{font-size:12px;color:var(--col-form-checkbox);font-weight:700;text-align:center;}
.badge-config-item select{padding:6px;border:1px solid var(--col-impost-select-bordo);border-radius:5px;background:var(--col-impost-select-sfondo);color:var(--col-impost-select-testo);font-size:13px;width:100%;}
.empty-state{text-align:center;padding:24px;color:var(--col-impost-vuoto);font-size:16px;}

/* SUB-TABS */
/* === STICKY SUB-TABS (Rotte/Waypoint tabs) === */
.sub-tabs{display:flex;gap:0;margin:var(--subtabs-margin-top) var(--subtabs-margin-sides) var(--subtabs-margin-bottom);border-radius:0;overflow:hidden;border:none;border-bottom:1px solid var(--col-pannello-bordo);position:sticky;top:var(--subtabs-top);z-index:11;background:var(--col-toolbar-sfondo);padding:var(--subtabs-pad-top) var(--subtabs-pad-sides) 0;}
.sub-tab{flex:1;padding:10px;border:none;background:var(--col-tab-sfondo);color:var(--col-tab-testo);cursor:pointer;font-size:14px;font-weight:700;text-align:center;}
.sub-tab:first-child{border-radius:8px 0 0 0;}.sub-tab:last-child{border-radius:0 8px 0 0;}
.sub-tab.active{background:var(--col-tab-attiva-sfondo);color:var(--col-tab-attiva-testo);}
/* === STICKY TOOLBAR (azioni sotto sub-tabs o sotto view-header) === */
.sub-toolbar{display:flex;align-items:center;gap:4px;margin-bottom:var(--toolbar-margin-bottom);min-height:var(--toolbar-min-h);position:sticky;top:var(--toolbar-top);z-index:10;background:var(--col-toolbar-sfondo);padding:var(--toolbar-pad-top) 0 var(--toolbar-pad-bottom);}
.sub-toolbar.no-subtabs{top:var(--toolbar-notabs-top);margin:var(--subtabs-margin-top) var(--subtabs-margin-sides) var(--subtabs-margin-bottom);padding:var(--subtabs-pad-top) var(--subtabs-pad-sides) var(--toolbar-pad-bottom);}
/* === STICKY BACK BAR (guida, privacy) === */
.view-back{display:flex;justify-content:flex-start;margin:calc(-1 * var(--view-padding-top)) calc(-1 * var(--view-padding-right)) var(--back-margin-bottom);padding:var(--back-pad-top) var(--view-padding-right) var(--back-pad-bottom);position:sticky;top:0;z-index:11;background:var(--col-indietro-sfondo);box-shadow:var(--col-indietro-ombra);}
.sub-panel{display:none;}.sub-panel.active{display:block;}

/* ADD MENU */
.add-options{display:flex;flex-direction:column;gap:6px;}
.add-option{display:flex;align-items:center;gap:12px;padding:14px 12px;background:var(--col-opzione-sfondo);border:1px solid var(--col-opzione-bordo);border-radius:10px;cursor:pointer;text-align:left;color:var(--col-opzione-testo);font-size:13px;transition:border-color 0.2s;}
.add-option:hover{border-color:var(--col-opzione-hover);}
.add-icon{font-size:28px;flex-shrink:0;}

/* ICON PICKER */
.icon-picker{display:flex;flex-wrap:wrap;gap:5px;max-height:220px;overflow-y:auto;padding:6px 0;}
.icon-pick{width:42px;height:42px;border:2px solid var(--col-icona-bordo);border-radius:8px;background:var(--col-icona-sfondo);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s;flex-shrink:0;}
.icon-pick.active{border-color:var(--col-icona-attiva-sfondo);background:var(--col-icona-attiva-sfondo);filter:none;}
.icon-pick:hover{border-color:var(--col-icona-attiva-sfondo);}

/* WAYPOINT CARD */
.wp-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--col-card-sfondo);border-radius:10px;margin-bottom:8px;flex-wrap:wrap;}
.wp-card-icon{font-size:28px;flex-shrink:0;width:36px;text-align:center;}
.wp-card-info{flex:1;min-width:0;}
.wp-card-name{width:100%;font-size:16px;font-weight:700;color:var(--col-card-titolo);margin:0 0 4px;}
.wp-card-info .wp-coord{font-size:12px;color:var(--col-card-meta);font-family:var(--font-mono);}
.wp-card-info .wp-cat{font-size:12px;color:var(--col-card-meta);}
.wp-card-actions{display:flex;gap:6px;flex-shrink:0;}

/* LEAFLET */
/* Leaflet layer control removed — managed by custom button */

/* LAYER MENU POPUP */
#layer-menu{
    position:fixed;top:100px;right:8px;z-index:1300;
    background:var(--col-layer-sfondo);border:1px solid var(--col-layer-bordo);border-radius:10px;
    padding:12px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    min-width:190px;
}
.lyr-title{font-size:14px;font-weight:700;color:var(--col-layer-titolo);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;}
.lyr-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:15px;color:var(--col-layer-voce);cursor:pointer;}
.lyr-item input[type="radio"],.lyr-item input[type="checkbox"]{width:22px;height:22px;accent-color:var(--col-layer-titolo);}
.lyr-sep{height:1px;background:var(--col-layer-separatore);margin:4px 0;}
.leaflet-popup-content-wrapper{background:var(--col-popup-sfondo)!important;color:var(--col-popup-testo)!important;border-radius:8px!important;}
.leaflet-popup-tip{background:var(--col-popup-sfondo)!important;}
.view-scroll::-webkit-scrollbar{width:var(--scrollbar-w);}.view-scroll::-webkit-scrollbar-thumb{background:var(--col-scrollbar);border-radius:2px;}

@media(min-width:768px){
    /* -- Rotte / Waypoint -- */
    #view-routes{width:var(--desk-routes-w);right:auto;left:var(--desk-routes-left);bottom:var(--desk-routes-bottom);border-radius:var(--desk-routes-radius);height:var(--desk-routes-h);}
    #view-routes.view-expanded{height:var(--desk-routes-h-exp);}
    /* -- Nuovo (Crea) -- */
    #view-create{width:var(--desk-create-w);right:auto;left:var(--desk-create-left);bottom:var(--desk-create-bottom);border-radius:var(--desk-create-radius);height:var(--desk-create-h);}
    #view-create.view-expanded{height:var(--desk-create-h-exp);}
    /* -- Navigazione -- */
    #view-navigate{width:var(--desk-navigate-w);right:auto;left:var(--desk-navigate-left);bottom:var(--desk-navigate-bottom);border-radius:var(--desk-navigate-radius);height:var(--desk-navigate-h);}
    #view-navigate.view-expanded{height:var(--desk-navigate-h-exp);}
    /* -- GPS -- */
    #view-gps{width:var(--desk-gps-w);right:auto;left:var(--desk-gps-left);bottom:var(--desk-gps-bottom);border-radius:var(--desk-gps-radius);height:var(--desk-gps-h);}
    #view-gps.view-expanded{height:var(--desk-gps-h-exp);}
    /* -- Barche -- */
    #view-barche{width:var(--desk-barche-w);right:auto;left:var(--desk-barche-left);bottom:var(--desk-barche-bottom);border-radius:var(--desk-barche-radius);height:var(--desk-barche-h);}
    #view-barche.view-expanded{height:var(--desk-barche-h-exp);}
    /* -- Community -- */
    #view-community{width:var(--desk-community-w);right:auto;left:var(--desk-community-left);bottom:var(--desk-community-bottom);border-radius:var(--desk-community-radius);height:var(--desk-community-h);}
    #view-community.view-expanded{height:var(--desk-community-h-exp);}
    /* -- Dettaglio gruppo -- */
    #view-group-detail{width:var(--desk-group-w);right:auto;left:var(--desk-group-left);bottom:var(--desk-group-bottom);border-radius:var(--desk-group-radius);height:var(--desk-group-h);}
    #view-group-detail.view-expanded{height:var(--desk-group-h-exp);}
    /* -- Chat -- */
    #view-chat{width:var(--desk-chat-w);right:auto;left:var(--desk-chat-left);bottom:var(--desk-chat-bottom);border-radius:var(--desk-chat-radius);height:var(--desk-chat-h);}
    #view-chat.view-expanded{height:var(--desk-chat-h-exp);}
    /* -- Tracce -- */
    #view-tracce{width:var(--desk-tracce-w);right:auto;left:var(--desk-tracce-left);bottom:var(--desk-tracce-bottom);border-radius:var(--desk-tracce-radius);height:var(--desk-tracce-h);}
    #view-tracce.view-expanded{height:var(--desk-tracce-h-exp);}
    /* -- Profilo -- */
    #view-profilo{width:var(--desk-profilo-w);right:auto;left:var(--desk-profilo-left);bottom:var(--desk-profilo-bottom);border-radius:var(--desk-profilo-radius);height:var(--desk-profilo-h);}
    #view-profilo.view-expanded{height:var(--desk-profilo-h-exp);}
    /* -- Impostazioni -- */
    #view-settings{width:var(--desk-settings-w);right:auto;left:var(--desk-settings-left);bottom:var(--desk-settings-bottom);border-radius:var(--desk-settings-radius);height:var(--desk-settings-h);}
    #view-settings.view-expanded{height:var(--desk-settings-h-exp);}
    /* -- Guida -- */
    #view-guida{width:var(--desk-guida-w);right:auto;left:var(--desk-guida-left);bottom:var(--desk-guida-bottom);border-radius:var(--desk-guida-radius);height:var(--desk-guida-h);}
    #view-guida.view-expanded{height:var(--desk-guida-h-exp);}
    /* -- Privacy -- */
    #view-privacy{width:var(--desk-privacy-w);right:auto;left:var(--desk-privacy-left);bottom:var(--desk-privacy-bottom);border-radius:var(--desk-privacy-radius);height:var(--desk-privacy-h);}
    #view-privacy.view-expanded{height:var(--desk-privacy-h-exp);}
    /* -- Meteo Marittimo -- */
    #view-meteo{width:var(--desk-meteo-w);right:auto;left:var(--desk-meteo-left);bottom:var(--desk-meteo-bottom);border-radius:var(--desk-meteo-radius);height:var(--desk-meteo-h);}
    #view-meteo.view-expanded{height:var(--desk-meteo-h-exp);}
    /* -- Stato del Mare -- */
    #view-mare{width:var(--desk-mare-w);right:auto;left:var(--desk-mare-left);bottom:var(--desk-mare-bottom);border-radius:var(--desk-mare-radius);height:var(--desk-mare-h);}
    #view-mare.view-expanded{height:var(--desk-mare-h-exp);}
    /* -- FAQ / Helpdesk -- */
    #view-helpdesk{width:var(--desk-helpdesk-w);right:auto;left:var(--desk-helpdesk-left);bottom:var(--desk-helpdesk-bottom);border-radius:var(--desk-helpdesk-radius);height:var(--desk-helpdesk-h);}
    #view-helpdesk.view-expanded{height:var(--desk-helpdesk-h-exp);}
    /* -- Admin -- */
    #view-admin{width:var(--desk-admin-w);right:auto;left:var(--desk-admin-left);bottom:var(--desk-admin-bottom);border-radius:var(--desk-admin-radius);height:var(--desk-admin-h);}
    #view-admin.view-expanded{height:var(--desk-admin-h-exp);}
    /* -- Auth -- */
    #view-auth{width:var(--desk-auth-w);right:auto;left:var(--desk-auth-left);bottom:var(--desk-auth-bottom);border-radius:var(--desk-auth-radius);height:var(--desk-auth-h);}
    /* -- Bottom nav -- */
    .bottom-nav{position:absolute;bottom:var(--desk-nav-bottom);left:var(--desk-nav-left);width:var(--desk-nav-w);border-radius:var(--desk-nav-radius);border:1px solid var(--col-barra-bordo);padding:var(--desk-nav-pad);}
    /* --- REGOLA POSIZIONE DESKTOP PER OGNI TAB (left, right, bottom in px) --- */
    #map-attrib-bar.attrib-routes  {left:400px; right:0px; bottom:0px;}
    #map-attrib-bar.attrib-create  {left:400px; right:0px; bottom:0px;}
    #map-attrib-bar.attrib-nav     {left:65px; right:65px; bottom:75px;}
    #map-attrib-bar.attrib-gps     {left:400px; right:0px; bottom:0px;}
    #map-attrib-bar.attrib-barche  {left:400px; right:0px; bottom:0px;}
    #map-attrib-bar.attrib-nav #map-scale-slot{display:flex;}
    /* --- NAVIGAZIONE DESKTOP: pulsanti + offset mappa --- */
    :root{
        --nav-ctrls-left:8px;
        --nav-ctrls-bottom:78px;
        --nav-scale-left:65px;
        --nav-scale-bottom:105px;
        --scale-padding-bottom:3px;
        --scale-height:10px;
    }
}


/* ============ TEMA: regole strutturali (non colori) ============ */
body.light-mode .header-brand img{filter:none;}
body.light-mode .nav-badge .nb-value{text-shadow:none;}
body.night-mode .header-brand img{filter:brightness(0.5) sepia(1) hue-rotate(-30deg) saturate(3);}
body.night-mode .nav-badge .nb-value{text-shadow:none;}
/* Night mode: attrib bar + nav scale — rosso tenue per visione notturna */
body.night-mode #map-attrib-bar{color:rgba(180,60,60,0.5);}
body.night-mode #map-attrib-bar a{color:rgba(180,60,60,0.6);}
body.night-mode #map-scale-slot .leaflet-control-scale-line{border-color:rgba(180,60,60,0.4)!important;color:rgba(180,60,60,0.5)!important;}
body.night-mode #nav-scale-bar .leaflet-control-scale-line{border-color:rgba(180,60,60,0.4)!important;color:rgba(180,60,60,0.5)!important;}

/* === GUIDA SEARCH === */
.guida-search{display:flex;align-items:center;gap:4px;margin-left:auto;}
.guida-search input{width:120px;padding:6px 10px;border:2px solid var(--col-guida-search-bordo);border-radius:8px;background:var(--col-guida-search-sfondo);color:var(--col-guida-search-testo);font-size:14px;font-weight:600;outline:none;}
.guida-search input:focus{border-color:var(--col-guida-search-focus);}
.guida-search input::placeholder{color:var(--col-guida-search-placeholder);font-weight:400;}
#guida-search-count{font-size:12px;font-weight:700;color:var(--col-guida-search-testo);white-space:nowrap;min-width:40px;text-align:center;}
.guida-search-btn{width:32px;height:32px;border:2px solid var(--col-guida-search-bordo);border-radius:8px;background:var(--col-guida-search-sfondo);color:var(--col-guida-search-testo);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.guida-search-btn:active{background:var(--col-guida-search-focus);color:var(--col-guida-search-btn-premuto-testo);}
mark.g-hl{background:var(--col-guida-highlight);color:inherit;border-radius:2px;padding:0 1px;}
mark.g-hl-active{background:var(--col-guida-search-btn-premuto);color:var(--col-guida-search-btn-premuto-testo);border-radius:2px;padding:0 1px;}
/* Light mode */
/* Night mode */

/* === TRACK REC INDICATOR === */
.track-rec-btn{color:var(--col-tracce-rec-icona) !important;font-size:12px !important;font-weight:700;display:flex;align-items:center;gap:4px;justify-content:center;}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--col-tracce-rec-icona);animation:rec-blink 5s ease-in-out infinite;}
@keyframes rec-blink{0%,8%{opacity:1;}4%{opacity:0.2;}10%,100%{opacity:1;}}
/* Night mode */

/* === ALERT UNIFICATO - GPS/Rete/Quality/Si.Sa. - posizionato sotto badge via JS === */
.alert-unified{display:none;position:fixed;left:8px;right:8px;z-index:1049;padding:10px 14px;font-size:15px;font-weight:700;text-align:center;letter-spacing:0.3px;border-radius:8px;align-items:center;justify-content:center;gap:8px;}
.alert-unified.alert-active{display:flex;}
.alert-unified.level-gps-lost{background:var(--col-avviso-gps-sfondo);color:var(--col-avviso-gps-testo);border-radius:0;left:0;right:0;}
.alert-unified.level-gps-critical{background:#CC0000;color:#fff;}
.alert-unified.level-gps-alert{background:#D2691E;color:#fff;}
.alert-unified.level-sisa{background:#D2691E;color:#fff;animation:sisaPreavvisoBlink 0.8s ease-in-out infinite;}
.alert-unified.level-gps-warning{background:#B8860B;color:#fff;}
.alert-unified.level-net{background:var(--col-avviso-rete-sfondo);color:var(--col-avviso-rete-testo);}
.alert-unified.level-ais{background:#4A6A8A;color:#fff;}
.alert-unified-ok{padding:4px 16px;font-size:14px;font-weight:700;background:var(--col-avviso-ok-sfondo);color:var(--col-avviso-rete-testo);border:2px solid var(--col-avviso-ok-bordo);border-radius:6px;cursor:pointer;flex-shrink:0;}
@keyframes sisaPreavvisoBlink{0%,100%{opacity:1;}50%{opacity:0.3;}}
/* Light mode */
/* Night mode */

/* === MAREA MODAL === */
/* Marea modal — COCKPIT: testo bianco, barra colore come indicatore, una riga per estremale */
.marea-modal-header{background:var(--col-marea-header-sfondo);border-left:6px solid;border-radius:10px;padding:14px 16px;margin-bottom:16px;}
.marea-mh-station{font-size:14px;font-weight:600;color:var(--col-marea-stazione);margin-bottom:4px;}
.marea-mh-value{font-size:38px;font-weight:700;color:var(--col-marea-stazione);font-family:var(--font-mono);}
.marea-mh-unit{font-size:16px;font-weight:700;color:var(--col-marea-stazione);}
.marea-mh-arrow{font-size:32px;font-weight:900;color:var(--col-marea-stazione);line-height:1;}
.marea-mh-label{font-size:14px;font-weight:700;margin-left:auto;}
#marea-modal .marea-day{margin-bottom:12px;background:var(--col-marea-giorno-sfondo);border-radius:10px;padding:14px;border:1px solid var(--col-marea-giorno-bordo);}
#marea-modal .marea-day-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--col-marea-giorno-header-bordo);}
#marea-modal .marea-day-name{font-size:16px;font-weight:700;color:var(--col-marea-unita);text-transform:capitalize;}
#marea-modal .marea-day-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
#marea-modal .marea-ext-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--col-marea-riga-bordo);}
#marea-modal .marea-ext-row:last-child{border-bottom:none;}
#marea-modal .marea-ext-bar{width:5px;height:28px;border-radius:3px;flex-shrink:0;}
#marea-modal .marea-ext-arrow{font-size:24px;font-weight:900;color:var(--col-marea-giorno-nome);min-width:28px;text-align:center;}
#marea-modal .marea-ext-time{font-size:15px;font-weight:700;color:var(--col-marea-freccia-ext);min-width:50px;}
#marea-modal .marea-ext-val{font-size:20px;font-weight:700;color:var(--col-marea-freccia-ext);font-family:var(--font-mono);margin-left:auto;white-space:nowrap;}
/* Marea badge arrow — COCKPIT: grande, bianca, spessa */
.nb-marea-arrow{font-size:32px;font-weight:900;margin-left:6px;vertical-align:middle;color:var(--col-marea-freccia-ext);text-shadow:0 0 4px var(--col-marea-badge-freccia-ombra);}
.nb-marea-arrow-up{color:var(--col-marea-freccia-ext);}
.nb-marea-arrow-down{color:var(--col-marea-ora);}
/* Light mode */
/* Night mode */

/* === VENTO BADGE ARROW — COCKPIT === */
.nb-vento-arrow{display:inline-block;font-size:28px;font-weight:900;color:var(--col-badge-nav-valore);margin-left:4px;vertical-align:middle;line-height:1;transition:transform 0.3s;}

/* === VENTO MODAL === */
#vento-modal .vento-row{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;margin-bottom:6px;background:var(--col-vento-riga-sfondo);border-radius:8px;border:1px solid var(--col-vento-riga-bordo);position:relative;overflow:hidden;}
#vento-modal .vento-row-active{border-color:var(--col-vento-riga-attiva-bordo);box-shadow:0 0 0 1px var(--col-vento-riga-attiva-bordo);}
#vento-modal .vento-row-arrow{font-size:22px;font-weight:900;color:var(--col-vento-freccia-badge);width:26px;text-align:center;flex-shrink:0;line-height:1;}
#vento-modal .vento-row-left{flex:1;min-width:0;}
#vento-modal .vento-row-name{font-size:14px;font-weight:700;color:var(--col-vento-freccia-riga);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#vento-modal .vento-eye{cursor:pointer;width:20px;height:20px;vertical-align:middle;margin-left:6px;opacity:0.6;fill:none;stroke:var(--col-vento-freccia-riga);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#vento-modal .vento-eye:active{opacity:1;}
#vento-modal .vento-row-dir{font-size:12px;font-weight:600;color:var(--col-vento-direzione);}
#vento-modal .vento-row-right{text-align:center;flex-shrink:0;}
#vento-modal .vento-row-vals{display:flex;gap:12px;}
#vento-modal .vento-row-fisso{font-size:20px;font-weight:700;color:var(--col-vento-eye);font-family:var(--font-mono);min-width:36px;text-align:center;}
#vento-modal .vento-row-raffica{font-size:20px;font-weight:700;font-family:var(--font-mono);min-width:36px;text-align:center;}
#vento-modal .vento-row-labels{display:flex;gap:12px;font-size:10px;color:var(--col-vento-etichette);font-weight:600;}
#vento-modal .vento-row-labels span{min-width:36px;text-align:center;}
#vento-modal .vento-row-unit{font-size:10px;color:var(--col-vento-unita);font-weight:600;margin-top:1px;}
#vento-modal .vento-row-bar{position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px 0 0 3px;}
#vento-modal .vento-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;padding:10px;font-size:12px;font-weight:600;color:var(--col-vento-legenda);}
#vento-modal .vento-leg-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px;vertical-align:middle;}
/* Light mode */
/* Night mode */

/* ============================================
   CHAT — Messaggistica
   ============================================ */
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;-webkit-overflow-scrolling:touch;}
.chat-bubble{max-width:80%;padding:10px 14px;border-radius:12px;font-size:15px;line-height:1.4;word-wrap:break-word;position:relative;}
.chat-bubble.mine{align-self:flex-end;background:var(--col-chat-mio-sfondo);color:var(--col-chat-mio-testo);border-bottom-right-radius:4px;}
.chat-bubble.theirs{align-self:flex-start;background:var(--col-chat-altri-sfondo);color:var(--col-chat-altri-testo);border-bottom-left-radius:4px;border:1px solid var(--col-chat-altri-bordo);}
.chat-bubble .chat-sender{font-size:12px;font-weight:700;color:var(--col-chat-mittente);margin-bottom:4px;}
.chat-bubble .chat-time{font-size:11px;opacity:0.6;margin-top:4px;text-align:right;}
.chat-bubble.mine .chat-time{color:var(--col-chat-mio-ora);}
.chat-bubble .chat-voice-player{display:flex;align-items:center;gap:10px;}
.chat-bubble .chat-voice-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-bubble.mine .chat-voice-btn{background:var(--col-chat-mio-vocale-sfondo);color:var(--col-chat-mio-vocale-icona);}
.chat-bubble.theirs .chat-voice-btn{background:var(--col-chat-altri-vocale-sfondo);color:var(--col-chat-altri-testo);}
.chat-bubble .chat-voice-dur{font-size:13px;font-weight:600;}
.chat-bubble .chat-voice-expired{font-size:13px;font-style:italic;color:var(--col-chat-vocale-scaduto);}
.chat-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--col-chat-altri-vocale-sfondo);border-top:1px solid var(--col-chat-altri-bordo);}
.chat-input-bar input{flex:1;padding:12px 14px;font-size:15px;border:1px solid var(--col-chat-altri-bordo);border-radius:24px;background:var(--col-chat-altri-sfondo);color:var(--col-chat-altri-testo);outline:none;}
.chat-btn-send,.chat-btn-mic{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-btn-send{background:var(--col-chat-invio-sfondo);color:var(--col-chat-invio-icona);}
.chat-btn-mic{background:var(--col-chat-input-sfondo);color:var(--col-chat-input-testo);border:1px solid var(--col-chat-input-barra-bordo);}
.chat-btn-mic.recording{background:var(--col-chat-mic-rec-sfondo);color:var(--col-chat-invio-icona);border-color:var(--col-chat-mic-rec-sfondo);animation:pulse-rec 1s infinite;}
@keyframes pulse-rec{0%,100%{opacity:1;}50%{opacity:0.5;}}
.chat-recording-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--col-chat-mic-rec-sfondo);color:var(--col-chat-invio-icona);font-size:14px;font-weight:700;}
.chat-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--col-chat-invio-icona);animation:pulse-rec 1s infinite;}
.chat-rec-cancel{background:var(--col-chat-rec-annulla-sfondo);color:var(--col-chat-mic-rec-icona);border:none;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;}
.chat-date-sep{text-align:center;font-size:12px;color:var(--col-chat-data-sep);padding:8px 0;font-weight:600;}
.msg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;line-height:20px;padding:0 6px;font-size:12px;font-weight:700;background:var(--col-chat-badge-sfondo);color:var(--col-chat-rec-testo);border-radius:10px;margin-left:8px;}

/* Chat read status dot — semaforo */
.chat-read-dot{display:inline-block;width:7px;height:7px;border-radius:50%;border:1px solid var(--col-chat-read-bordo);background:var(--col-chat-read-non-letto);margin-left:5px;vertical-align:middle;}
.chat-read-dot.read{background:var(--col-chat-read-letto);}
/* Chat disclaimer */
.chat-disclaimer{text-align:center;font-size:12px;color:var(--col-chat-disclaimer);padding:8px 16px;line-height:1.5;margin-bottom:4px;flex-shrink:0;}
/* Chat view — flex column to keep input bar at bottom */
#view-chat.active{display:flex!important;flex-direction:column;z-index:1300;}
body.nav-mode #view-chat.active{display:flex!important;}
#view-chat .chat-messages{flex:1;overflow-y:auto;min-height:0;}
#view-chat .chat-input-bar{flex-shrink:0;}
#view-chat .view-header{flex-shrink:0;}

/* Message notification badge — header + nav mode */
.msg-notify-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;background:var(--col-chat-notifica-sfondo);color:var(--col-chat-notifica-testo);border-radius:9px;line-height:18px;}
.msg-notify-badge-header{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;font-size:14px;font-weight:700;background:var(--col-chat-notifica-sfondo);color:var(--col-chat-notifica-testo);border-radius:13px;line-height:26px;border:none;cursor:pointer;flex-shrink:0;}
#msg-badge-nav{margin-left:0;}

/* Chat delete button on own bubbles */
.chat-del-btn{display:inline-block;margin-left:6px;font-size:11px;color:var(--col-chat-mio-elimina);cursor:pointer;vertical-align:middle;font-weight:700;padding:2px 4px;border-radius:3px;}
.chat-del-btn:hover,.chat-del-btn:active{color:var(--col-chat-notifica-testo);background:var(--col-chat-mio-elimina-hover-sfondo);}
.chat-bubble.theirs .chat-del-btn{color:var(--col-chat-altri-elimina);}
.chat-bubble.theirs .chat-del-btn:hover,.chat-bubble.theirs .chat-del-btn:active{color:var(--col-chat-altri-elimina-hover);background:var(--col-chat-altri-elimina-hover-sfondo);}

/* Pam Pam category buttons */
.pp-cat-btn.active{border-color:var(--col-panpan-cat-bordo)!important;background:var(--col-panpan-cat-sfondo)!important;}

/* PAN PAN category buttons */
.panpan-cat-btn.active{border-color:var(--col-securite-cat-bordo)!important;background:var(--col-securite-cat-sfondo)!important;}

/* Pan Pan category buttons */
.panpan-cat-btn.active{border-color:var(--col-securite-cat-bordo)!important;background:var(--col-securite-cat-sfondo)!important;}

/* ============================== */
/* METEO MARITTIMO               */
/* ============================== */
/* ============ METEO — colori funzionali ============ */
.meteo-section{margin-bottom:16px;}
.meteo-h3{font-size:15px;font-weight:700;color:var(--col-accento-brand);margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--col-bordo-gen);}
.meteo-loading{text-align:center;padding:40px 0;color:var(--col-testo-dim);font-size:14px;}
/* Meteo color vars (functional, not theme) */
:root{--col-meteo-ok:#4ade80;--col-meteo-mid:#facc15;--col-meteo-warn:#f97316;--col-meteo-danger:#ef4444;--col-meteo-rain:#60a5fa;--col-meteo-snow:#c4b5fd;}
/* Coord title */
.meteo-coord-title{font-size:12px;color:var(--col-testo-dim);text-align:center;margin-bottom:10px;font-weight:600;}
.meteo-coord-link{color:var(--col-accento-brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.meteo-coord-change{color:var(--col-accento-brand);cursor:pointer;font-size:14px;margin-left:4px;opacity:0.7;}
.meteo-coord-change:hover{opacity:1;}
/* Current conditions block */
.meteo-now{background:var(--col-card-sfondo);border-radius:10px;padding:12px;margin-bottom:12px;}
.meteo-now-weather{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:16px;font-weight:700;color:#fff;}
.meteo-now-weather svg{flex-shrink:0;}
.meteo-now-row{display:flex;flex-wrap:wrap;gap:6px 12px;}
.meteo-now-cell{display:flex;flex-direction:column;min-width:0;}
.mnl{font-size:10px;font-weight:600;color:var(--col-testo-dim);text-transform:uppercase;letter-spacing:0.3px;}
.mnv{font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:3px;white-space:nowrap;}
.mnv small{font-size:10px;color:var(--col-testo-dim);font-weight:600;margin-left:1px;}
.meteo-sun-row{font-size:13px;color:var(--col-testo-info);text-align:center;margin-top:10px;padding-top:8px;border-top:1px solid var(--col-bordo-gen);}
/* Day tabs */
.meteo-day-tabs{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;margin-bottom:0;border-bottom:2px solid var(--col-bordo-gen);}
.meteo-day-tab{padding:8px 14px;font-size:13px;font-weight:700;color:var(--col-testo-dim);background:none;border:none;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:var(--font);}
.meteo-day-tab.active{color:var(--col-accento-brand);border-bottom-color:var(--col-accento-brand);}
.meteo-day-panel{display:none;}
.meteo-day-panel.active{display:block;}
/* Table */
.meteo-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.meteo-table{width:100%;border-collapse:collapse;font-size:12px;min-width:480px;}
.meteo-table th{text-align:left;padding:6px 6px;color:var(--col-accento-brand);font-weight:700;font-size:11px;border-bottom:2px solid var(--col-bordo-gen);white-space:nowrap;}
.meteo-table td{padding:4px 6px;border-bottom:1px solid var(--col-bordo-gen);color:var(--col-testo-info);white-space:nowrap;vertical-align:middle;}
.meteo-table td svg{vertical-align:middle;}
.meteo-table tbody tr:last-child td{border-bottom:none;}
.meteo-td-time{font-weight:700;color:#fff;}
.meteo-unit{font-size:9px;color:var(--col-testo-dim);margin-left:1px;}
.meteo-table td small{font-size:9px;color:var(--col-testo-dim);margin-left:1px;}
.meteo-footer{text-align:center;font-size:11px;color:var(--col-testo-dim);padding:14px 0 8px;line-height:1.6;}
/* Alert banners */
.meteo-alert{margin-bottom:8px;}
@media(max-width:400px){.meteo-table{min-width:400px;}.meteo-now-row{gap:4px 8px;}.mnv{font-size:13px;}}
/* Schermi stretti: pulsanti rotte/WP piu compatti */
@media(max-width:380px){.btn-icon{width:36px;height:36px;font-size:15px;}}
/* iOS Safari safe area - attivo solo con classe ios-safe su html */
.ios-safe .header{padding-top:calc(2px + env(safe-area-inset-top,0px));}
.ios-safe .compass-strip{top:calc(var(--notch,0px) + env(safe-area-inset-top,0px));}
.ios-safe .badge-row-top{top:calc(44px + var(--notch,0px) + env(safe-area-inset-top,0px));}
.ios-safe .badge-row-mid{top:calc(44px + var(--notch,0px) + 62px + env(safe-area-inset-top,0px));}
.ios-safe .map-controls-right{top:calc(56px + var(--notch,0px) + env(safe-area-inset-top,0px));}
/* Si.Sa. pannello grande - flash rosso */
.sisa-panel-flash{animation:sisaPanelFlash 0.8s ease-in-out infinite;}
@keyframes sisaPanelFlash{0%,100%{background:#000;}50%{background:#330000;}}

/* === AIS Markers === */
.ais-marker{background:transparent!important;border:none!important;}