/* Genova mApp: nuova disposizione funzionale dell'interfaccia.
   La rifinitura grafica di colori e icone verrà applicata in un secondo passaggio. */

:root{
  --ui-map-controls-bottom: 12px;
  --ui-map-joystick-size: 72px;
}

/* Toolbar: lingue a sinistra, Genova mApp al centro, ricerca a destra. */
#app > header{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}

#app > header .toolbar-left{
  justify-self:start !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

#app > header .toolbar-center{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
}

#app > header .toolbar-right{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

#app > header #tb-search-btn{
  display:grid !important;
  place-items:center !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:9999px !important;
  background:rgba(11,18,34,.92) !important;
  color:#e5e7eb !important;
  box-shadow:0 3px 12px rgba(0,0,0,.28);
  cursor:pointer;
}

#app > header #tb-search-btn svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  overflow:visible;
}

#app > header #tb-search-btn:hover,
#app > header #tb-search-btn:focus-visible{
  background:rgba(22,32,52,.98) !important;
  border-color:rgba(255,255,255,.8) !important;
}

#app > header #tb-search{
  display:none !important;
  position:absolute !important;
  left:auto !important;
  right:12px !important;
  top:calc(100% + 7px) !important;
  width:min(360px, calc(100vw - 24px)) !important;
  max-width:none !important;
  z-index:8000 !important;
}

#app > header.tb-search-open #tb-search{
  display:block !important;
}

#app > header.tb-search-open #tb-search-input{
  -webkit-appearance:none !important;
  appearance:none !important;
  height:40px !important;
  background:rgba(11,18,34,.96) !important;
  color:#e5e7eb !important;
  -webkit-text-fill-color:#e5e7eb !important;
  caret-color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  font-size:1rem !important;
}

#app > header.tb-search-open #tb-search-input::placeholder{
  color:rgba(229,231,235,.7) !important;
  opacity:1 !important;
}

#app > header .toolbar-right > :not(#tb-search):not(#tb-search-btn):not(#ui-taccuino-button):not(#pwa-install-button){
  display:none !important;
}

#app > header h1{
  margin:0 !important;
  font-size:1.05rem !important;
  white-space:nowrap;
}

#app > header #title-btn{
  white-space:nowrap;
}

/* Il selettore delle lingue non è più ancorato all'angolo inferiore. */
body > #flag-switcher{
  position:fixed !important;
  left:max(12px, env(safe-area-inset-left)) !important;
  right:auto !important;
  top:auto !important;
  bottom:max(12px, env(safe-area-inset-bottom)) !important;
  z-index:8001 !important;
  display:grid !important;
  place-items:center !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  box-sizing:border-box !important;
}

body > #flag-switcher .flag-ico{
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:20px !important;
  margin:0 !important;
  padding:0 !important;
}

body > #flag-switcher .flag-ico svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}

#app > header .sub-wrapper{
  position:relative !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

#app > header .sub-dropdown{
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  top:calc(100% + 8px) !important;
  bottom:auto !important;
  transform:none !important;
  z-index:9000 !important;
}

#app > header #ui-taccuino-button{
  position:static !important;
  display:grid !important;
  place-items:center !important;
  width:36px !important;
  height:40px !important;
  min-width:36px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:9999px !important;
}

#app > header #ui-taccuino-button img,
#app > header #ui-taccuino-button svg{
  width:22px !important;
  height:22px !important;
}

#flag-ribbon,
#flag-rail,
#mh-flags-rail{
  display:none !important;
}

/* Il menu delle lingue viene posizionato via JS sotto il pulsante. */
#flag-menu{
  top:auto !important;
}

/* Eventi resta disponibile nei file ma non compare nella nuova interfaccia. */
#eventsBtn,
#eventsPanel{
  display:none !important;
}

/* La precedente linguetta laterale non viene più usata. */
#ui-taccuino-edge{
  display:none !important;
}

/* Barra inferiore: Aiuto, Impostazioni, GPS, Scanner QR, Home. */
#bottom-bar{
  left:50% !important;
  right:auto !important;
  bottom:max(12px, env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  z-index:7000 !important;
}

#bottom-bar > *{
  flex:0 0 auto;
}

#bottom-bar #help-fab{ order:1 !important; }
#bottom-bar .settings-wrapper{ order:2 !important; }
#bottom-bar #btn-gps{ order:3 !important; }
#bottom-bar #map-qr-fab{ order:4 !important; }
#bottom-bar #btn-home{ order:5 !important; }

#bottom-bar #btn-info{
  display:none !important;
}

#bottom-bar .settings-wrapper{
  position:relative !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

#bottom-bar .settings-dropdown{
  top:auto !important;
  bottom:calc(100% + 10px) !important;
  transform:none !important;
}

#bottom-bar .settings-dropdown{
  left:auto !important;
  right:0 !important;
}

/* Il contatto viene raggiunto dal pannello Aiuto, non da un sesto pulsante. */
#ui-help-info-action{
  display:block;
  width:100%;
  margin:.6rem 0 0;
  padding:.55rem .7rem;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:inherit;
  font:inherit;
  cursor:pointer;
}

#info-legend.open{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:calc(62px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  max-width:min(92vw,420px) !important;
  z-index:10000 !important;
}

/* Gruppo navigazione della mappa nell'angolo inferiore destro. */
#ui-map-controls{
  position:fixed;
  right:max(12px, env(safe-area-inset-right));
  bottom:var(--ui-map-controls-bottom);
  z-index:6900;
  display:flex;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}

#ui-map-controls > *{
  pointer-events:auto;
}

#ui-map-controls .joystick{
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  transform:none !important;
  width:var(--ui-map-joystick-size) !important;
  height:var(--ui-map-joystick-size) !important;
  flex:0 0 auto;
}

#ui-zoom-anchor{
  position:absolute;
  right:0;
  bottom:calc(var(--ui-map-joystick-size) + 5px);
  width:var(--ui-map-joystick-size);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  pointer-events:none;
}

#ui-zoom-anchor .leaflet-control-zoom{
  position:static !important;
  width:30px !important;
  margin:0 !important;
  transform:none !important;
  transform-origin:center !important;
  pointer-events:auto;
}

#ui-zoom-anchor .leaflet-control-zoom a{
  display:block !important;
  width:30px !important;
  height:30px !important;
  line-height:29px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:20px !important;
  box-sizing:border-box !important;
}

/* Sistema grafico uniforme dei controlli principali. */
#app > header #ui-taccuino-button,
#bottom-bar #help-fab,
#bottom-bar #btn-settings,
#bottom-bar #btn-gps,
#bottom-bar #map-qr-fab,
#bottom-bar #btn-home{
  color:#f1f5f9 !important;
  background:rgba(11,18,34,.92) !important;
  border:1px solid rgba(226,232,240,.4) !important;
  border-radius:9999px !important;
  box-shadow:0 5px 15px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#app > header #ui-taccuino-button:hover,
#app > header #ui-taccuino-button:focus-visible,
#bottom-bar #help-fab:hover,
#bottom-bar #btn-settings:hover,
#bottom-bar #btn-gps:hover,
#bottom-bar #map-qr-fab:hover,
#bottom-bar #btn-home:hover,
#bottom-bar #help-fab:focus-visible,
#bottom-bar #btn-settings:focus-visible,
#bottom-bar #btn-gps:focus-visible,
#bottom-bar #map-qr-fab:focus-visible,
#bottom-bar #btn-home:focus-visible{
  background:rgba(24,36,58,.98) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.38), 0 0 0 2px rgba(96,165,250,.16) !important;
}

#app > header #ui-taccuino-button:active,
#bottom-bar #help-fab:active,
#bottom-bar #btn-settings:active,
#bottom-bar #btn-gps:active,
#bottom-bar #map-qr-fab:active,
#bottom-bar #btn-home:active{
  transform:translateY(1px) scale(.97);
}

/* Il Taccuino usa direttamente l'immagine, senza disco o cornice del pulsante. */
#app > header #ui-taccuino-button,
#app > header #ui-taccuino-button:hover,
#app > header #ui-taccuino-button:focus-visible{
  overflow:visible !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#app > header #ui-taccuino-button:focus-visible{
  outline:2px solid rgba(245,158,11,.78) !important;
  outline-offset:2px !important;
}

#app > header #ui-taccuino-button img.taccuino-toolbar-icon{
  display:block !important;
  width:125% !important;
  height:125% !important;
  max-width:none !important;
  object-fit:contain !important;
  pointer-events:none !important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.34));
  transform:translateY(-1px);
  transition:transform .16s ease, filter .16s ease;
}

#app > header #ui-taccuino-button:hover img.taccuino-toolbar-icon,
#app > header #ui-taccuino-button:focus-visible img.taccuino-toolbar-icon{
  transform:translateY(-1px) scale(1.06);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.42)) brightness(1.04);
}

#app > header #ui-taccuino-button [data-ui-icon],
#bottom-bar #help-fab > [data-ui-icon],
#bottom-bar #btn-settings > [data-ui-icon],
#bottom-bar #btn-gps > [data-ui-icon],
#bottom-bar #map-qr-fab > [data-ui-icon],
#bottom-bar #btn-home > [data-ui-icon]{
  display:block !important;
  width:22px !important;
  height:22px !important;
  pointer-events:none;
}

#bottom-bar #help-fab[aria-expanded="true"]{
  color:#fde68a !important;
  background:linear-gradient(180deg,#755018 0%,#59390e 100%) !important;
  border-color:rgba(250,204,21,.72) !important;
}

#bottom-bar .settings-wrapper.open #btn-settings{
  color:#bfdbfe !important;
  border-color:rgba(96,165,250,.75) !important;
}

#bottom-bar #btn-gps.active,
#bottom-bar #btn-gps[aria-busy="true"]{
  color:#dcfce7 !important;
  background:rgba(20,83,45,.94) !important;
  border-color:rgba(74,222,128,.85) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.32), 0 0 0 3px rgba(34,197,94,.18) !important;
}

#bottom-bar #map-qr-fab[aria-expanded="true"],
#bottom-bar #map-qr-fab.active{
  color:#cffafe !important;
  background:rgba(14,78,96,.94) !important;
  border-color:rgba(34,211,238,.82) !important;
}

/* Titolo più sobrio, mantenendo la A arancione del marchio. */
#app > header #title-btn{
  background:linear-gradient(180deg,#2d86bb 0%,#2375a7 100%) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Bandiere più larghe e raccolte in un pannello leggibile. */
#flag-menu{
  gap:7px !important;
  padding:8px !important;
  background:rgba(11,18,34,.94) !important;
  border:1px solid rgba(226,232,240,.22) !important;
  border-radius:12px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.42) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

#flag-menu .mh-flags{
  gap:7px !important;
}

#flag-menu .flag{
  width:40px !important;
  height:26px !important;
  border-radius:5px !important;
  overflow:hidden;
}

#flag-menu .flag.selected{
  box-shadow:0 0 0 2px #f59e0b, 0 0 0 4px rgba(245,158,11,.2) !important;
}

/* Joystick e Zoom nella stessa famiglia visiva dei pulsanti. */
#ui-map-controls .joystick{
  color:rgba(226,232,240,.78) !important;
  background:rgba(11,18,34,.82) !important;
  border:1px solid rgba(226,232,240,.38) !important;
  box-shadow:0 7px 20px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

#ui-map-controls .joystick .thumb{
  background:#3b82f6 !important;
  border:2px solid rgba(219,234,254,.9) !important;
  box-shadow:0 3px 9px rgba(0,0,0,.4), 0 0 0 3px rgba(59,130,246,.16) !important;
}

#ui-map-controls .joystick .cardinal{
  color:rgba(226,232,240,.78) !important;
  font-weight:700 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}

#ui-zoom-anchor .leaflet-control-zoom{
  overflow:hidden;
  border:1px solid rgba(226,232,240,.38) !important;
  border-radius:9px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.34) !important;
}

#ui-zoom-anchor .leaflet-control-zoom a{
  color:#f1f5f9 !important;
  background:rgba(11,18,34,.92) !important;
  border:0 !important;
}

#ui-zoom-anchor .leaflet-control-zoom a + a{
  border-top:1px solid rgba(226,232,240,.22) !important;
}

#ui-zoom-anchor .leaflet-control-zoom a:hover,
#ui-zoom-anchor .leaflet-control-zoom a:focus-visible{
  background:rgba(24,36,58,.98) !important;
}

/* Centratura tipografica indipendente dalla baseline usata da Leaflet. */
html body #ui-map-controls #ui-zoom-anchor .leaflet-control-zoom > a{
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  text-indent:0 !important;
}

html body #ui-map-controls #ui-zoom-anchor .leaflet-control-zoom > a > span{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  font-family:Arial, "Helvetica Neue", sans-serif !important;
  font-size:20px !important;
  font-weight:400 !important;
  transform:translateX(-1px) !important;
}

/* Palette personalizzata dei cinque comandi inferiori (stati inattivi). */
#bottom-bar #help-fab[aria-expanded="false"]{
  background:linear-gradient(180deg,#8a611d 0%,#704813 100%) !important;
  border-color:rgba(251,191,36,.68) !important;
}

#bottom-bar .settings-wrapper:not(.open) #btn-settings{
  background:linear-gradient(180deg,#66507f 0%,#4d3b65 100%) !important;
  border-color:rgba(196,181,253,.62) !important;
}

#bottom-bar #btn-gps:not(.active):not([aria-busy="true"]){
  background:linear-gradient(180deg,#1d7158 0%,#145743 100%) !important;
  border-color:rgba(110,231,183,.66) !important;
}

#bottom-bar #map-qr-fab:not(.active):not([aria-expanded="true"]){
  background:linear-gradient(180deg,#147386 0%,#0d596b 100%) !important;
  border-color:rgba(103,232,249,.66) !important;
}

#bottom-bar #btn-home{
  background:linear-gradient(180deg,#286f9f 0%,#1d5681 100%) !important;
  border-color:rgba(147,197,253,.68) !important;
}

#bottom-bar #help-fab[aria-expanded="false"]:hover,
#bottom-bar .settings-wrapper:not(.open) #btn-settings:hover,
#bottom-bar #btn-gps:not(.active):not([aria-busy="true"]):hover,
#bottom-bar #map-qr-fab:not(.active):not([aria-expanded="true"]):hover,
#bottom-bar #btn-home:hover{
  filter:brightness(1.12) saturate(1.05);
  border-color:rgba(255,255,255,.8) !important;
}

/* Il menu principale segue sempre il titolo centrale. */
#menu-home:not(.hidden){
  left:50% !important;
  transform:translateX(-50%) !important;
}

#menu-home.menu-home .mh-body{
  max-height:var(--ui-home-max-height, calc(100dvh - 130px)) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

@media (max-width:768px){
  :root{
    --ui-map-controls-bottom:max(12px, env(safe-area-inset-bottom));
    --ui-map-joystick-size:60px;
  }

  #app > header{
    padding:.45rem .55rem !important;
    column-gap:.35rem !important;
  }

  #app > header h1,
  #app > header .title-btn{
    font-size:.88rem !important;
  }

  #app > header #tb-search-btn,
  #app > header #btn-sub,
  #app > header #ui-taccuino-button{
    width:34px !important;
    height:38px !important;
    min-width:34px !important;
    min-height:38px !important;
  }

  header.tb-search-open #tb-search{
    left:8px !important;
    right:8px !important;
    top:calc(100% + 7px) !important;
    max-width:none !important;
  }

  #bottom-bar{
    gap:7px !important;
  }

  #bottom-bar #help-fab,
  #bottom-bar #btn-settings,
  #bottom-bar #btn-gps,
  #bottom-bar #map-qr-fab,
  #bottom-bar #btn-home{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}

@media (max-width:360px){
  :root{
    --ui-map-joystick-size:60px;
  }

  #app > header{
    padding:.4rem .35rem !important;
    column-gap:.2rem !important;
  }

  #app > header .toolbar-left,
  #app > header .toolbar-right{
    gap:4px !important;
  }

  #app > header #tb-search-btn,
  #app > header #btn-sub,
  #app > header #ui-taccuino-button{
    width:30px !important;
    height:34px !important;
    min-width:30px !important;
    min-height:34px !important;
  }

  #app > header h1,
  #app > header .title-btn{
    font-size:.78rem !important;
  }

  #bottom-bar{
    gap:4px !important;
  }

  #bottom-bar #help-fab,
  #bottom-bar #btn-settings,
  #bottom-bar #btn-gps,
  #bottom-bar #map-qr-fab,
  #bottom-bar #btn-home{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  #bottom-bar #help-fab > [data-ui-icon],
  #bottom-bar #btn-settings > [data-ui-icon],
  #bottom-bar #btn-gps > [data-ui-icon],
  #bottom-bar #map-qr-fab > [data-ui-icon],
  #bottom-bar #btn-home > [data-ui-icon]{
    width:20px !important;
    height:20px !important;
  }
}

@media (max-height:500px) and (orientation:landscape){
  :root{
    --ui-map-controls-bottom:10px;
    --ui-map-joystick-size:54px;
  }

  /* In orizzontale lascia libera la colonna dei filtri sul bordo destro. */
  #ui-map-controls{
    right:64px;
  }

}

/* Joystick e Zoom: dimensioni fisse su qualsiasi larghezza. */
:root{
  --ui-map-joystick-size:72px;
}

#ui-map-controls .joystick{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
}

#ui-map-controls .joystick .thumb{
  width:28px !important;
  height:28px !important;
}

#ui-map-controls .joystick .cardinal{
  font-size:10px !important;
}

#ui-zoom-anchor{
  width:72px !important;
  bottom:77px !important;
}

#ui-zoom-anchor .leaflet-control-zoom{
  width:30px !important;
  transform:none !important;
}

#ui-zoom-anchor .leaflet-control-zoom a{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  font-size:20px !important;
  line-height:1 !important;
}