/* Adattamenti per telefoni e tablet (iOS e Android). Si somma agli altri stili: per toglierlo basta togliere il <link> da index.html. */

/* Su touch i campi di testo a 16px evitano lo zoom automatico di iPhone/iPad quando ci si scrive */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  button, .button, .icon-button, a.button { min-height: 44px; }
  html body .xf-list button { width: 38px; height: 38px; }
  html body .xf-toggle { width: 44px; height: 44px; }
  .atlas-map-navigation button { width: 48px; height: 48px; }
  html body .xf-seg button, html body .xf-seg2 button, html body .xf-tabs button { min-height: 44px; }
  html, body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
  .leaflet-container { touch-action: none; }
}

/* Aree sicure (notch di iPhone, barra di Android) */
.map-topbar { top: max(18px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
html body .xf-cats { top: calc(max(12px, env(safe-area-inset-top)) + 72px); left: max(12px, env(safe-area-inset-left)); }

/* Tablet e telefoni: pannello Strumenti come foglio dal basso */
@media (width <= 900px) {
  html body .xf-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    max-height: 70dvh; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html body .xf-toast { bottom: calc(env(safe-area-inset-bottom) + 90px); max-width: calc(100% - 32px); text-align: center; }
  .sidebar { background: rgba(14, 10, 26, 0.94); }
  .guida-dialog { max-height: 92dvh !important; }
  .scheda-lightbox { padding: 10px; }
  .scheda-lightbox .scheda-grandi { max-height: calc(100dvh - 120px); }
}

/* Telefoni: barra in alto solo con le icone */
@media (width <= 599px) {
  .map-actions { gap: 6px; }
  .map-actions .button > span { display: none; }
  .map-actions .button { width: 44px; min-width: 44px; padding: 0; }
  .map-actions .icon-button { width: 44px; min-width: 44px; }
  .map-topbar .sidebar-toggle span { display: inline; }
  .atlas-map-navigation { right: 10px; bottom: calc(env(safe-area-inset-bottom) + 76px); }
  .atlas-map-caption { left: 10px; bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .brand-header h1 { font-size: 30px; }
}

/* Telefono in orizzontale: poco spazio in altezza */
@media (height <= 480px) and (orientation: landscape) {
  html body .xf-panel { max-height: 78dvh; }
  html body .xf-cats { top: 64px; bottom: 12px; }
  .detail-panel { max-height: 80dvh; }
}