/* ===========================================================================
   LocaRide - rifinitura grafica e adattamento a smartphone
   ---------------------------------------------------------------------------
   Caricato per ULTIMO: sovrascrive lo stile incorporato in index.html senza
   modificarne una riga. Per annullare tutto basta togliere il <link>.

   Filosofia: nessun restyling arbitrario. Si interviene dove c'e' un problema
   reale d'uso - troppi pulsanti in una barra stretta, aree da toccare piccole
   per un dito, pannelli che coprono la mappa sul telefono, contrasto debole.
   =========================================================================== */

:root {
  --shadow-s: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-m: 0 4px 12px rgba(15, 23, 42, .10);
  --shadow-l: 0 12px 34px rgba(15, 23, 42, .16);
  --ring: 0 0 0 3px rgba(37, 99, 235, .35);
}

/* ------------------------------ intestazione ------------------------------ */
#hdr {
  gap: 10px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  box-shadow: var(--shadow-s);
  border-bottom: 1px solid var(--bdr);
}
#hdr h1 { flex: none; }
.wordmark { letter-spacing: -.3px; }

/* I pulsanti non devono mai andare a capo o essere schiacciati: la barra
   scorre in orizzontale, come nelle app native. */
#hdr > .btn { flex: 0 0 auto; }
#hdr {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#hdr::-webkit-scrollbar { display: none; }

.btn {
  border-radius: 12px;
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, background .15s, box-shadow .15s, border-color .15s;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible, .rb-btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* --------------------------------- pannelli -------------------------------- */
#rb, #be-panel, #fp { box-shadow: var(--shadow-l); }
#dp { box-shadow: -6px 0 34px rgba(15, 23, 42, .16); }
.dp-hdr {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #7c3aed 100%);
  padding-top: max(20px, env(safe-area-inset-top));
}
.section-title { letter-spacing: .1px; }

/* Pulsanti d'azione: piu' respiro e area di tocco adeguata */
.rb-btn {
  border-radius: 10px;
  padding: 9px 14px;
  min-height: 38px;
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, filter .15s;
}
.rb-btn:hover:not(:disabled) { filter: brightness(1.07); }
.rb-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.rb-actions { gap: 7px; }

/* Righe delle liste: separatori piu' leggeri, evidenza al passaggio */
.rstop, .stop-row { border-radius: 8px; }
.rstop:hover, .stop-row:hover { background: var(--bg); }

/* Campi di testo coerenti tra loro */
input[type=text], input[type=email], input[type=password], textarea, select {
  border-radius: 10px;
}

/* --------------------------- risultati di ricerca -------------------------- */
#sresults { border-radius: 12px; box-shadow: var(--shadow-l); }
.sr-item { padding: 10px 13px; }

/* --------------------------------- mappa ----------------------------------- */
.leaflet-control-zoom a {
  border-radius: 10px !important;
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  font-size: 19px !important;
}
.leaflet-bar { border: none !important; box-shadow: var(--shadow-m) !important; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow-l); }

/* ============================ SMARTPHONE ================================== */
@media (max-width: 760px) {
  :root { --hdr: 62px; }

  /* Barra superiore compatta e scorrevole */
  #hdr { gap: 7px; padding: 0 10px; }
  #hdr h1 svg { width: 30px; height: 30px; }
  .wordmark { font-size: 1.12rem; }
  #hdr h1 .tag { display: none; }
  #search-wrap { min-width: 130px; }
  #search { padding: 9px 14px; font-size: .95rem; }

  /* Area di tocco: sotto i 44 px un dito sbaglia bersaglio */
  #hdr .btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 12px; }
  .rb-btn { min-height: 44px; padding: 10px 15px; font-size: .86rem; }

  /* Il pannello del percorso occupa la larghezza piena, in basso: il pollice
     ci arriva e la mappa resta visibile sopra. */
  #rb {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%;
    max-height: 62vh;
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform: translateY(105%);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  #rb.open { transform: translateY(0); }
  /* la maniglia suggerisce che si trascina/chiude */
  #rb::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 3px;
    background: var(--bdr); margin: -4px auto 10px;
  }

  /* Scheda di dettaglio e filtri a tutto schermo */
  #dp { width: 100%; }
  #fp { width: 82%; max-width: 320px; }

  /* Pulsanti fluttuanti sopra il pannello, non sotto */
  #be-btn {
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 12px; padding: 12px 18px; font-size: .88rem;
  }
  body.rb-open #be-btn { display: none; }
  #traf-leg { right: 10px; bottom: max(16px, env(safe-area-inset-bottom)); font-size: .72rem; }
  #fount-hint { bottom: max(14px, env(safe-area-inset-bottom)); }

  /* Tabelle e griglie meteo piu' leggibili in verticale */
  .wgrid { grid-template-columns: repeat(4, 1fr); }
  .rw-sum { grid-template-columns: repeat(2, 1fr); }
  .vtable th, .vtable td { padding: 8px 4px; font-size: .8rem; }

  .modal-box, #shareModal > div, #cardModal > div, #acctModal > div {
    border-radius: 16px 16px 0 0 !important;
  }
}

/* Schermi molto stretti: si tengono solo le icone */
@media (max-width: 420px) {
  .wordmark { font-size: 1rem; }
  #hdr h1 svg { width: 26px; height: 26px; }
  #search::placeholder { font-size: .88rem; }
}

/* --------------------------- modalita' installata -------------------------- */
/* Quando l'app e' aperta dall'icona in home non c'e' la barra del browser:
   si recupera lo spazio del notch. */
@media (display-mode: standalone) {
  #hdr { padding-top: env(safe-area-inset-top); height: calc(var(--hdr) + env(safe-area-inset-top)); }
  #map { top: calc(var(--hdr) + env(safe-area-inset-top)); }
}

/* ------------------------------- tema scuro -------------------------------- */
.dark .btn { box-shadow: none; }
.dark #sresults, .dark #rb, .dark #fp, .dark #be-panel { box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.dark .leaflet-popup-content-wrapper, .dark .leaflet-popup-tip { background: var(--bg2); color: var(--txt); }
.dark .rw-hint { background: #422006; border-color: #78350f; color: #fde68a; }
.dark .stop-row .tag.ok { background: #052e16; color: #86efac; }
.dark .stop-row .tag.no { background: #450a0a; color: #fca5a5; }

/* --------------------------- rispetto delle preferenze --------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}