/* DiarioNav — la mappa è il contenuto, la chrome sparisce.
   Palette scura perché il satellite è scuro: una UI chiara sopra le immagini
   satellitari abbaglia e fa perdere il tracciato. Font e accento restano quelli
   di mahawattage.com. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` deve vincere SEMPRE: gli elementi qui sotto hanno `display:flex` da
   classe, che per specificità batte il `[hidden]{display:none}` del browser —
   e i pannelli si aprivano da soli al caricamento. */
[hidden] { display: none !important; }

:root {
  --bg:        #0d1117;
  --bg-2:      #161b22;
  --bg-3:      #21262d;
  --fg:        #e6edf3;
  --fg-2:      #9198a1;
  /* 5.07 di contrasto sul fondo: #6e7681 stava a 4.12, sotto la soglia AA di 4,5
     per il testo piccolo — ed è proprio il colore delle etichette più piccole */
  --fg-3:      #7d8590;
  --accent:    #6366f1;
  --accent-2:  #818cf8;
  --reale:     #2f81f7;   /* blu: dove sono passato davvero */
  --pianificato:#8b949e;  /* grigio: dove ho previsto di passare */
  --fuori:     #f0a020;   /* ambra: fuori dal piano */
  --carica:    #2ea043;
  --tesla:     #e82127;
  --bordo:     rgba(255,255,255,.10);
  --bordo-2:   rgba(255,255,255,.18);
  --ombra:     0 8px 32px rgba(0,0,0,.55);
  --r:         14px;
  --barra-h:   58px;
  --pannello-w: 372px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
}

html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg); color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

#app { position: fixed; inset: 0; }
#mappa { position: absolute; inset: 0; background: #0b1622; }

/* la mappa disegna in WebGL: si toglie il tap-highlight e la selezione, che su
   mobile fanno sembrare l'interazione "appiccicosa" */
#mappa, #mappa * { -webkit-tap-highlight-color: transparent; user-select: none; }

/* ── Barra ────────────────────────────────────────────────────────────────── */
.barra {
  position: absolute; top: 0; left: 0; right: 0; height: var(--barra-h);
  display: flex; align-items: center; gap: .6rem; padding: 0 .8rem;
  background: linear-gradient(180deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.72) 60%, transparent 100%);
  z-index: 20; pointer-events: none;
}
.barra > * { pointer-events: auto; }
.marchio { text-decoration: none; color: var(--fg); flex: 0 0 auto; }
.marchio-n { font-weight: 800; letter-spacing: -.03em; font-size: 1.02rem; }
.marchio-dot { color: var(--accent-2); }
.barra-centro { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: .5rem; min-width: 0; }
.barra-destra { flex: 0 0 auto; display: flex; gap: .4rem; }

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  max-width: min(64vw, 420px);
  padding: .46rem .8rem; border-radius: 999px;
  background: rgba(33,38,45,.85); border: 1px solid var(--bordo-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .84rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden;
  transition: background .15s, border-color .15s;
}
.pill:hover { background: rgba(48,54,61,.9); border-color: var(--accent); }
.pill-ico { opacity: .75; }
.pill-freccia { opacity: .5; font-size: .7rem; }
#etichetta-periodo { overflow: hidden; text-overflow: ellipsis; }

.tondo {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  background: rgba(33,38,45,.85); border: 1px solid var(--bordo-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .15s, border-color .15s;
}
.tondo:hover { background: rgba(48,54,61,.9); border-color: var(--accent); }
.tondo.piccolo { width: 30px; height: 30px; font-size: .78rem; }
a.tondo { text-decoration: none; }
a.tondo.dentro { border-color: rgba(46,160,67,.55); background: rgba(46,160,67,.16); }

.badge-live {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(46,160,67,.16); border: 1px solid rgba(46,160,67,.5);
  color: #56d364; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
}
.badge-live { cursor: pointer; }
.badge-live i { width: 7px; height: 7px; border-radius: 50%; background: #2ea043; animation: pulsa 1.8s infinite; }
/* seguimento spento (hai spostato la mappa): il badge si smorza e invita a rientrare */
.badge-live.libero { background: rgba(46,160,67,.08); color: #7d8590; border-color: rgba(46,160,67,.25); }
.badge-live.libero i { animation: none; background: #57606a; }
.badge-live.libero::after { content: '↻'; margin-left: .1rem; font-weight: 700; }
@keyframes pulsa { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

/* ── Foglio periodo ───────────────────────────────────────────────────────── */
.foglio {
  position: absolute; top: calc(var(--barra-h) + 6px); left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 1.6rem)); max-height: calc(100vh - var(--barra-h) - 24px);
  overflow: auto; z-index: 40;
  background: rgba(22,27,34,.97); border: 1px solid var(--bordo-2);
  border-radius: var(--r); box-shadow: var(--ombra);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: .9rem; display: flex; flex-direction: column; gap: .85rem;
  animation: entra .16s ease-out;
}
@keyframes entra { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.foglio-testa { display: flex; align-items: center; justify-content: space-between; }
.foglio-testa strong { font-size: .95rem; letter-spacing: -.01em; }
.chiudi { width: 28px; height: 28px; border-radius: 8px; color: var(--fg-2); }
.chiudi:hover { background: var(--bg-3); color: var(--fg); }

.rapidi, .chip-riga { display: flex; flex-wrap: wrap; gap: .38rem; }
.chip {
  padding: .38rem .68rem; border-radius: 9px; font-size: .78rem; font-weight: 600;
  background: var(--bg-3); border: 1px solid var(--bordo);
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.futuro { border-style: dashed; color: var(--fg-2); }
.chip.oggi { box-shadow: 0 0 0 1px var(--carica) inset; }

.riga-campi { display: flex; gap: .55rem; }
.riga-campi label { flex: 1; display: flex; flex-direction: column; gap: .28rem; font-size: .7rem; color: var(--fg-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.riga-campi input {
  background: var(--bg); border: 1px solid var(--bordo-2); border-radius: 9px;
  padding: .48rem .6rem; font-size: .84rem; color-scheme: dark; width: 100%;
}
.riga-campi input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.sotto-titolo { font-size: .74rem; color: var(--fg-2); margin-bottom: .45rem; font-weight: 600; }
.nota-mini { color: var(--fg-3); font-weight: 500; }

.riga-toggle { display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding-top: .2rem; border-top: 1px solid var(--bordo); }
.sw { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--fg-2); cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw span { width: 32px; height: 18px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--bordo-2); position: relative; transition: background .15s; flex: 0 0 auto; }
.sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg-3); transition: transform .15s, background .15s; }
.sw input:checked + span { background: var(--accent); border-color: var(--accent); }
.sw input:checked + span::after { transform: translateX(14px); background: #fff; }
.sw input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ── Menu vista ───────────────────────────────────────────────────────────── */
.menu-vista {
  position: absolute; top: calc(var(--barra-h) + 6px); right: .8rem; z-index: 40;
  background: rgba(22,27,34,.97); border: 1px solid var(--bordo-2);
  border-radius: var(--r); box-shadow: var(--ombra); padding: .35rem;
  display: flex; flex-direction: column; gap: .12rem; min-width: 180px;
  backdrop-filter: blur(20px); animation: entra .16s ease-out;
}
.menu-vista button {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .6rem; border-radius: 9px; font-size: .82rem; font-weight: 500; text-align: left;
}
.menu-vista button:hover { background: var(--bg-3); }
.menu-vista button[aria-current="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.menu-vista .mv-ico { font-size: .95rem; }

/* ── Pannello ─────────────────────────────────────────────────────────────── */
.pannello {
  position: absolute; top: var(--barra-h); bottom: 0; left: 0; width: var(--pannello-w);
  z-index: 15; display: flex; flex-direction: column;
  background: linear-gradient(90deg, rgba(13,17,23,.97) 0%, rgba(13,17,23,.93) 78%, rgba(13,17,23,.86) 100%);
  border-right: 1px solid var(--bordo);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.pannello.chiuso { transform: translateX(-100%); }
.maniglia { display: none; }
.pannello-scroll { overflow-y: auto; overscroll-behavior: contain; padding: .9rem .9rem calc(1rem + var(--safe-b)); display: flex; flex-direction: column; gap: .9rem; }

.stat-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.stat {
  background: var(--bg-2); border: 1px solid var(--bordo); border-radius: 11px;
  padding: .6rem .55rem; display: flex; flex-direction: column; gap: .12rem;
}
.stat b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat small { font-size: .62rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.stat.largo { grid-column: span 3; flex-direction: row; align-items: baseline; justify-content: space-between; }

.riepilogo-piano {
  background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.32);
  border-radius: 11px; padding: .65rem .7rem; font-size: .78rem; line-height: 1.5; color: var(--fg-2);
}
.riepilogo-piano b { color: var(--fg); }

/* profilo velocità/batteria — l'equivalente del grafico di Garmin */
.profilo { background: var(--bg-2); border: 1px solid var(--bordo); border-radius: 11px; padding: .55rem .6rem .3rem; }
.profilo-testa { display: flex; justify-content: space-between; align-items: baseline; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); font-weight: 700; margin-bottom: .3rem; }
#profilo-eti { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
#profilo-c { width: 100%; height: 120px; display: block; cursor: crosshair; touch-action: none; }

/* lista tratte/soste */
.lista { display: flex; flex-direction: column; gap: .3rem; }
.lista-titolo { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); font-weight: 700; margin: .55rem 0 .15rem; line-height: 1.5; }
.lt-dett { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--fg-2); font-size: .95em; }
.voce {
  display: grid; grid-template-columns: 30px 1fr auto; gap: .55rem; align-items: center;
  padding: .5rem .55rem; border-radius: 10px; border: 1px solid transparent;
  background: var(--bg-2); text-align: left; width: 100%;
  transition: background .12s, border-color .12s;
}
.voce:hover { background: var(--bg-3); border-color: var(--bordo-2); }
.voce[aria-current="true"] { border-color: var(--accent); background: rgba(99,102,241,.14); }
.voce-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; background: var(--bg-3); }
.voce-ico.t-supercharger { background: rgba(232,33,39,.18); }
.voce-ico.t-ricarica     { background: rgba(46,160,67,.18); }
.voce-ico.t-casa         { background: rgba(99,102,241,.18); }
.voce-ico.t-arrivo       { background: rgba(240,160,32,.18); }
.voce-t { min-width: 0; }
.voce-t b { display: block; font-size: .81rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-t small { display: block; font-size: .69rem; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-d { font-size: .72rem; color: var(--fg-2); font-weight: 600; text-align: right; white-space: nowrap; }
.voce-d em { display: block; font-style: normal; font-size: .64rem; color: var(--fg-3); font-weight: 500; }

.vuoto { padding: 1.4rem .8rem; text-align: center; color: var(--fg-3); font-size: .8rem; line-height: 1.6; }
.vuoto b { color: var(--fg-2); display: block; margin-bottom: .25rem; }

.pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .64rem; color: var(--fg-3); padding-top: .5rem; border-top: 1px solid var(--bordo); }
.pie-link { color: var(--fg-3); text-decoration: none; }
.pie-link:hover { color: var(--accent-2); }

/* ── Lettore ──────────────────────────────────────────────────────────────── */
.lettore {
  /* centrato sull'AREA MAPPA, non sulla finestra: col pannello aperto un
     `left:50%` lo faceva finire sopra la legenda e mezzo sotto il pannello */
  position: absolute; left: calc(var(--pannello-w) + (100vw - var(--pannello-w)) / 2);
  transform: translateX(-50%);
  bottom: calc(1rem + var(--safe-b)); z-index: 25;
  width: min(620px, calc(100vw - var(--pannello-w) - 1.6rem));
  transition: left .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem;
  background: rgba(22,27,34,.94); border: 1px solid var(--bordo-2);
  border-radius: 999px; box-shadow: var(--ombra);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.play { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .8rem; flex: 0 0 auto; }
.play:hover { background: var(--accent-2); }
#scrub { flex: 1 1 auto; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: var(--bg-3); min-width: 60px; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--reale); border: 2px solid #fff; cursor: pointer; }
#scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--reale); border: 2px solid #fff; cursor: pointer; border-width: 2px; }
.lettore-info { display: flex; gap: .35rem; align-items: baseline; font-size: .73rem; font-variant-numeric: tabular-nums; color: var(--fg-2); white-space: nowrap; }
.lettore-info .sep { color: var(--fg-3); }
#lettore-ora { color: var(--fg); font-weight: 700; }

/* ── Velo, avvisi ─────────────────────────────────────────────────────────── */
.velo {
  position: absolute; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: .8rem;
  background: rgba(13,17,23,.86); backdrop-filter: blur(6px); font-size: .84rem; color: var(--fg-2);
  transition: opacity .25s;
}
.velo.via { opacity: 0; pointer-events: none; }
.spinner { width: 30px; height: 30px; border: 2.5px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.avviso {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--barra-h) + 10px); z-index: 50;
  max-width: min(520px, calc(100vw - 2rem)); padding: .6rem .85rem; border-radius: 11px;
  background: rgba(240,160,32,.14); border: 1px solid rgba(240,160,32,.45); color: #f0c674;
  font-size: .78rem; line-height: 1.5; box-shadow: var(--ombra);
}
.avviso b { color: #ffd88a; }
/* conferma breve (link copiato, aiuto): verde, non ambra — non è un problema */
.avviso.ok { background: rgba(46,160,67,.15); border-color: rgba(46,160,67,.45); color: #7ee787; text-align: center; }

/* ── Popup MapLibre, ricuciti sul tema ───────────────────────────────────── */
.maplibregl-popup-content {
  background: rgba(22,27,34,.97) !important; color: var(--fg) !important;
  border: 1px solid var(--bordo-2); border-radius: 11px !important;
  box-shadow: var(--ombra) !important; padding: .65rem .75rem !important;
  font-size: .78rem; line-height: 1.5; max-width: 270px;
  backdrop-filter: blur(18px);
}
.maplibregl-popup-tip { border-top-color: rgba(22,27,34,.97) !important; border-bottom-color: rgba(22,27,34,.97) !important; }
.maplibregl-popup-close-button { color: var(--fg-2) !important; font-size: 1.1rem !important; padding: .1rem .35rem !important; }
.pop-t { font-weight: 700; margin-bottom: .25rem; letter-spacing: -.01em; }
.pop-r { color: var(--fg-2); display: flex; gap: .4rem; }
.pop-r b { color: var(--fg); font-weight: 600; }
.pop-nota { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--bordo); color: var(--fg-3); font-size: .72rem; max-height: 9rem; overflow: auto; }
.maplibregl-ctrl-group { background: rgba(22,27,34,.9) !important; border: 1px solid var(--bordo-2) !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--bordo) !important; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(.85); }
.maplibregl-ctrl-attrib { background: rgba(13,17,23,.7) !important; }
.maplibregl-ctrl-attrib a { color: var(--fg-3) !important; }

/* ── Legenda ──────────────────────────────────────────────────────────────── */
.legenda {
  position: absolute; left: calc(var(--pannello-w) + .8rem);
  bottom: calc(4.6rem + var(--safe-b)); z-index: 14;
  display: flex; flex-direction: column; gap: .3rem; padding: .55rem .7rem;
  background: rgba(22,27,34,.88); border: 1px solid var(--bordo); border-radius: 11px;
  font-size: .7rem; color: var(--fg-2); backdrop-filter: blur(14px);
  transition: left .26s cubic-bezier(.4,0,.2,1);
}
.pannello.chiuso ~ .legenda { left: .8rem; }
.pannello.chiuso ~ .lettore { left: 50%; width: min(620px, calc(100vw - 1.6rem)); }
.legenda div { display: flex; align-items: center; gap: .45rem; }
.legenda i { width: 16px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.lg-reale { background: var(--reale); }
.lg-piano { background: var(--pianificato); }
.lg-fuori { background: var(--fuori); }

/* ── Mobile: il pannello diventa un foglio dal basso ──────────────────────── */
@media (max-width: 820px) {
  :root { --barra-h: 52px; }
  .pannello {
    top: auto; left: 0; right: 0; width: auto; height: 62vh;
    border-right: 0; border-top: 1px solid var(--bordo-2);
    border-radius: 18px 18px 0 0;
    background: rgba(13,17,23,.97);
    transform: translateY(calc(62vh - 92px));
  }
  .pannello.aperto { transform: translateY(0); }
  .pannello.chiuso { transform: translateY(100%); }
  .maniglia { display: block; width: 38px; height: 4px; border-radius: 999px; background: var(--bordo-2); margin: .5rem auto .1rem; flex: 0 0 auto; }
  .pannello-scroll { padding-top: .35rem; }
  .legenda { display: none; }
  .lettore { left: 50%; bottom: calc(96px + var(--safe-b)); width: calc(100vw - 1.2rem);
             padding: .5rem .55rem; gap: .5rem; }
  /* col foglio aperto il lettore finirebbe IN MEZZO alla lista: si toglie */
  .pannello.aperto ~ .lettore { display: none !important; }
  .pannello.chiuso ~ .lettore { left: 50%; width: calc(100vw - 1.2rem); bottom: calc(1rem + var(--safe-b)); }
  .lettore-info { font-size: .68rem; }
  .lettore-info .sep:last-of-type, #lettore-bat { display: none; }
  .stat-griglia { grid-template-columns: repeat(3, 1fr); }
  .foglio { width: calc(100vw - 1rem); }
  .pill { max-width: 62vw; padding: .42rem .7rem; }
}
@media (max-width: 420px) {
  .marchio-n { font-size: .92rem; }
  .lettore-info #lettore-v { display: none; }
  .lettore-info .sep { display: none; }
}

/* rispetta chi ha chiesto meno movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}