/* Ritocchi per iPhone e iPad (touch, Safari). Si somma a mobile.css e agli altri stili.
   Vale solo sotto i 1000px oppure con il dito (pointer: coarse): la vista PC (desktop.css) non cambia.
   Lavora insieme a telefono-tablet.js. Per toglierlo basta togliere i due tag da index.html. */

/* ---------- Barra in alto: una riga che scorre col dito, mai pulsanti fuori schermo ---------- */
@media (width <= 999px), (pointer: coarse) {
  .map-topbar {
    top: max(12px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    gap: 8px;
  }
  .map-topbar .sidebar-toggle { flex-shrink: 0; }
  .map-actions {
    flex: 0 1 auto; min-width: 0; margin-left: auto;
    gap: 6px; padding: 3px 2px; margin-top: -3px; margin-bottom: -3px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    pointer-events: auto;
  }
  .map-actions::-webkit-scrollbar { display: none; }
  .map-actions > * { flex-shrink: 0; white-space: nowrap; }
  /* Sfumatura sul bordo quando ci sono altri pulsanti da scoprire (classi messe da telefono-tablet.js) */
  .map-actions.tt-dopo { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .map-actions.tt-prima { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
  .map-actions.tt-prima.tt-dopo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}

/* Telefono e iPad (anche in orizzontale, 1000px e più, ma solo con il dito): solo icone, pulsanti quadrati da 44px (il contatore degli obiettivi resta) */
@media (width <= 999px), (hover: none) and (pointer: coarse) {
  .map-actions .button > span { display: none; }
  .map-actions .button, .map-actions .icon-button { width: auto; min-width: 44px; height: 44px; min-height: 44px; padding: 0 11px; justify-content: center; }
  .map-actions .button:not(:has(> em)), .map-actions .icon-button { width: 44px; padding: 0; }
  .map-topbar .sidebar-toggle { min-height: 44px; padding: 0 14px; font-size: 13px; }
}

/* ---------- Pannello Esplora ---------- */
@media (width <= 999px) {
  .sidebar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
  .sidebar-footer { padding-bottom: max(15px, env(safe-area-inset-bottom)); }
  .sidebar-content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* Col pannello aperto i pulsanti tondi, il conto alla rovescia e le categorie non ci finiscono sopra */
  body:has(.sidebar[data-open=true]) :is(.fl-fab, .pk-fab, .rc-fab, .tp-badge, .xf-cats) { visibility: hidden; }
}
@media (width <= 599px) {
  .sidebar { width: 100vw; }
}
@media (pointer: coarse) {
  .sidebar-tabs button { min-height: 48px; font-size: 13px; }
  .place-result { min-height: 52px; }
  .brand-header .icon-button { width: 44px; height: 44px; }
}

/* ---------- Scheda del luogo sul telefono: foglio dal basso con maniglia ---------- */
@media (width <= 599px) {
  .detail-panel {
    height: 55dvh;
    border-radius: 18px 18px 0 0;
    background: rgba(14, 10, 26, 0.9);
  }
  .detail-panel::before {
    content: ""; display: block; flex: none;
    width: 40px; height: 5px; margin: 8px auto 0; border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
  }
  .detail-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .detail-panel .description { font-size: 15px; line-height: 1.6; }
  .atlas-app[data-details=true] .atlas-map-navigation { bottom: calc(55dvh + 16px); }
  /* Con la scheda aperta conta solo la scheda: via i pulsanti tondi e il conto alla rovescia che la coprivano */
  body:has(.atlas-app[data-details=true]) :is(.fl-fab, .pk-fab, .rc-fab, .tp-badge) { display: none; }
}

/* iPad in verticale e telefono in orizzontale: la scheda sta a destra, i pulsanti tondi non la coprono */
@media (600px <= width <= 999px) {
  .detail-panel { top: calc(max(12px, env(safe-area-inset-top)) + 60px); bottom: max(16px, env(safe-area-inset-bottom)); width: 340px; border-radius: 18px 0 0 18px; background: rgba(14, 10, 26, 0.9); }
  .detail-scroll { overscroll-behavior: contain; }
  .atlas-app[data-details=true] .atlas-map-navigation { right: 356px; }
  .atlas-app[data-details=true] .atlas-map-caption { display: none; }
  body:has(.atlas-app[data-details=true]) :is(.fl-fab, .pk-fab, .rc-fab) { right: 358px !important; }
  body:has(.atlas-app[data-details=true]) .tp-badge { left: calc(50% - 170px) !important; }
}

/* ---------- Telefono in orizzontale (poca altezza): pulsanti tondi in fila accanto allo zoom ---------- */
@media (height <= 500px) and (orientation: landscape) {
  .atlas-map-navigation { bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); }
  .atlas-map-navigation button { width: 44px; height: 44px; }
  .rc-fab, .pk-fab, .fl-fab { bottom: max(14px, env(safe-area-inset-bottom)) !important; width: 48px !important; height: 48px !important; min-width: 48px !important; }
  .rc-fab { right: calc(max(14px, env(safe-area-inset-right)) + 58px) !important; }
  .pk-fab { right: calc(max(14px, env(safe-area-inset-right)) + 114px) !important; }
  .fl-fab { right: calc(max(14px, env(safe-area-inset-right)) + 170px) !important; }
  .atlas-map-caption { display: none; }
  .tp-badge { bottom: max(10px, env(safe-area-inset-bottom)) !important; }
  .detail-panel { top: calc(max(8px, env(safe-area-inset-top)) + 58px); bottom: 8px; }
  html body .xf-cats { top: calc(max(8px, env(safe-area-inset-top)) + 58px); }
}

/* ---------- Tocchi: niente evidenziazione grigia di Safari, niente selezione del testo sui pulsanti ---------- */
@media (pointer: coarse) {
  .button, .icon-button, .place-result, .sidebar-tabs button, .atlas-map-navigation button, .fl-fab, .pk-fab, .rc-fab, .tp-badge {
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  }
  .button:active, .icon-button:active, .fl-fab:active, .pk-fab:active, .rc-fab:active { transform: scale(0.94); }
  .place-result:active { background: rgba(255, 80, 197, 0.16); }
}

/* ---------- Telefono: scheda allargata (maniglia trascinata in su) e piede del pannello più compatto ---------- */
@media (width <= 599px) {
  .detail-panel.tt-alto { height: calc(100dvh - max(12px, env(safe-area-inset-top)) - 64px); }
  .detail-panel .panel-heading { touch-action: none; }
  .sidebar-footer .save-status { margin-bottom: 8px; }
  .sidebar-footer .save-status small { display: none; }
  .sidebar-footer .button { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}

/* ---------- Telefono in orizzontale: il pannello Esplora scorre tutto insieme e la testata è più bassa ---------- */
@media (height <= 500px) and (orientation: landscape) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sidebar-content { flex: none; overflow: visible; min-height: auto; }
  .brand-header { padding-top: 10px; padding-bottom: 8px; }
  .brand-header h1 { font-size: 24px; }
  .brand-header p, .brand-header .tp-hcd { display: none; }
  .sidebar-footer .save-status { display: none; }
}
/* Telefono in orizzontale con la scheda aperta a destra: zoom e pulsanti tondi in fila alla sua sinistra */
@media (height <= 500px) and (orientation: landscape) and (600px <= width <= 999px) {
  .atlas-app[data-details=true] .atlas-map-navigation { right: 352px; }
  body:has(.atlas-app[data-details=true]) .rc-fab { right: 410px !important; }
  body:has(.atlas-app[data-details=true]) .pk-fab { right: 466px !important; }
  body:has(.atlas-app[data-details=true]) .fl-fab { right: 522px !important; }
}

/* ---------- iPad in orizzontale (poca altezza, dito): pannello Esplora più compatto per far vedere l'elenco ---------- */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (height <= 900px) {
  .brand-header { padding-top: 10px; padding-bottom: 8px; }
  .brand-header h1 { font-size: 26px; }
  .brand-header p, .brand-header .tp-hcd { display: none; }
  .sidebar-footer .save-status { display: none; }
  .sidebar-footer { padding-top: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Il messaggio "Scarico le foto per l'uso offline" sta in alto al centro: in basso a sinistra copriva i pulsanti del pannello */
@media (hover: none) and (pointer: coarse) {
  .fo-chip { left: 50% !important; bottom: auto !important; top: calc(max(12px, env(safe-area-inset-top)) + 62px); transform: translateX(-50%); max-width: calc(100vw - 32px); text-align: center; z-index: 1200; }
}

/* ---------- Colonna delle categorie (a sinistra della mappa): icone da 44px ben spaziate, scorre se non ci stanno tutte ---------- */
@media (hover: none) and (pointer: coarse) {
  html body .xf-cats { gap: 10px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px); }
  html body .xf-list { flex: 0 1 auto; min-height: 0; max-height: none; gap: 8px; padding: 8px; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  html body .xf-list button { width: 44px; height: 44px; min-height: 44px; }
  html body .xf-list button svg { width: 21px; height: 21px; }
  html body .xf-list button::after { display: none; }
}
@media (hover: none) and (pointer: coarse) and (height <= 500px) and (orientation: landscape) {
  html body .xf-cats { bottom: 12px; }
}

/* ---------- Pannello Esplora, "Sfoglia le categorie": menu e interruttore in griglia ordinata, altezza uniforme da 48px ---------- */
@media (width <= 999px), (hover: none) and (pointer: coarse) {
  html body .sidebar-content > .filter-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; align-items: stretch; }
  html body .sidebar-content > .filter-controls > label:not(.check-label) { grid-column: 1 / -1; }
  html body .sidebar-content > .filter-controls > select { grid-column: 1 / -1; }
  html body .sidebar-content > .filter-controls .row-between { display: contents; }
  html body .sidebar-content > .filter-controls select,
  html body .sidebar-content > .filter-controls .compact-select { width: 100%; max-width: none; min-width: 0; min-height: 48px; height: 48px; margin: 0; padding: 0 8px; font-size: 14px; box-sizing: border-box; }
  html body .sidebar-content > .filter-controls .check-label {
    display: flex; align-items: center; gap: 10px; min-height: 48px; height: 48px; box-sizing: border-box; margin: 0; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 15px;
  }
  html body .sidebar-content > .filter-controls .check-label input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; accent-color: #ff50c5; }
}