/* =============================================================
   v118.9.8 — GIRO GUIDATO outdoor-first MOBILE.
   Solo media query mobile (≤600px). iPad/PC INVARIATI.
   5 Leve di spazio verticale: pallini mini, descrizione collassabile,
   silhouette piccola, menu extra, header POS inline.
   ============================================================= */

@media (max-width: 600px) {

  /* Leva 1: pallini mini + legenda nascosta */
  #ggPallini > div[data-i] {
    width: 14px !important;
    height: 14px !important;
  }
  /* pallino attivo: scala leggermente meno per non esagerare */
  #ggPallini > div[data-i][style*="scale(1.35)"] { transform: scale(1.25) !important; }
  #ggPallini > div[data-i][style*="scale(1.4)"]  { transform: scale(1.3)  !important; }
  /* legenda nascosta su mobile (visibile a chip ?) */
  #ggPallini > span { display: none !important; }
  /* bottone ? compatto a destra dei pallini per mostrare legenda on demand */
  #ggLegendaToggle {
    background: #23303e; color: #fff; border: 0;
    border-radius: 50%; width: 24px; height: 24px;
    font-weight: 800; cursor: pointer; flex-shrink: 0;
    font-size: .85rem;
  }
  /* quando legenda aperta diventa popup nella stessa zona */
  #ggLegenda {
    background: #fff; border: 1px solid #cfd8dc;
    border-radius: 8px; padding: 8px 10px; margin-top: 6px;
    font-size: .72rem; line-height: 1.4; color: #333;
  }

  /* Leva 2: descrizione tappa collassabile */
  .gg-descr.gg-descr-troncata {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gg-descr-toggle {
    display: inline-block; margin-top: 2px;
    background: transparent; color: #1565c0;
    border: 0; padding: 0; cursor: pointer;
    font-weight: 700; font-size: .8rem; text-decoration: underline;
  }

  /* Leva 3 v2: mini-silhouette più visibile su mobile (era troppo piccola a 60x80) */
  .gg-mini-silh svg, .gg-mini-silh-wrap {
    max-width: 90px !important;
    max-height: 110px !important;
  }
  .gg-mini-silh { flex-shrink: 0 !important; }

  /* Leva 4 v2 (riga 1): Scatta + Danno stessa riga, entrambi grandi.
     Scatto leggermente piu' largo (flex 1.6) perche' azione primaria, Danno mantiene size con flex 1. */
  .gg-azioni-scatta-riga {
    display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 4px; margin-bottom: 6px;
  }
  .gg-azioni-scatta-riga > #ggScatta {
    flex: 1.6 !important;
    width: auto !important;
    padding: 12px 8px !important;
    font-size: 1rem !important;
    margin-bottom: 0 !important;
  }
  .gg-azioni-scatta-riga > #ggDanno {
    flex: 1 !important;
    min-height: 56px !important;
    padding: 8px 6px !important;
    font-size: .9rem !important;
    border-radius: 10px !important;
  }

  /* Leva 4 v2 (riga 2): Salta + Fatto + ⋮ compatti */
  .gg-azioni-primarie {
    display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 0;
  }
  .gg-azioni-primarie > button {
    flex: 1; min-height: 44px !important;
    padding: 6px 4px !important; font-size: .85rem !important;
    border-radius: 8px !important;
  }
  .gg-azioni-extra-toggle {
    background: #455a64; color: #fff; border: 0;
    border-radius: 8px; min-height: 44px; min-width: 44px;
    font-size: 1.2rem; font-weight: 800; cursor: pointer; flex-shrink: 0;
    flex: 0 0 44px !important;
  }
  .gg-azioni-extra {
    margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap;
    background: #fff8e1; padding: 8px; border-radius: 8px;
    border: 1px solid #ffb300;
  }
  .gg-azioni-extra > button {
    flex: 1 1 calc(50% - 6px); min-height: 44px !important;
    padding: 6px !important; font-size: .82rem !important;
  }

  /* v118.9.9: nascondi widget DRAFT (pipeline-status) su mobile: serve a Jessica, non al perito */
  #pipeline-status { display: none !important; }

  /* v118.9.9: legenda compatta come prima, senza bottone "?" */
  #ggLegendaToggle, #ggLegenda { display: none !important; }
  #ggPallini > span { display: inline !important; }   /* ripristino legenda inline come prima v118.9.7 */

  /* v118.9.9: strip foto ESPLOSA sempre + miniature più compatte (60x60) */
  #miniStripToggle { display: none !important; }
  #miniStrip .thumb { display: inline-block !important; }
  #miniStrip img { max-width: 60px !important; max-height: 60px !important; }

  /* Leva 5: header POS inline col titolo */
  .gg-pos-inline {
    display: inline-block; background: #e3f2fd; color: #0d47a1;
    padding: 2px 8px; border-radius: 12px;
    font-weight: 800; font-size: .72rem;
    margin-left: 6px; vertical-align: middle; white-space: nowrap;
  }
  /* Nasconde l'header POS grande (il vecchio "🚶 POS 1 — davanti a Sx") */
  .gg-pos-grande { display: none !important; }

  /* v118.9.10: TOPBAR compatta mobile (raccomandazione regola pergamena vs drawer hamburger) */
  /* Salva ridondante (auto-save c'è), Indietro confonde con "Tappa precedente" del Giro: NASCOSTI */
  #salvaBozzaBtn, #backTop { display: none !important; }
  /* Topbar: padding ridotto */
  #topbar { padding: 6px 10px !important; gap: 6px !important; }

  /* v118.9.10: BANNER online compatto (era 3 elementi sovrapposti al veicolo) */
  /* Nascondo "🌙 Modo notte ..." (info esplicativa, non necessaria sotto sole) */
  #bTema.tema-info { display: none !important; }
  #banner {
    padding: 4px 10px !important; font-size: .72rem !important;
    gap: 10px !important; min-height: 24px !important;
  }

  /* v118.9.10: alertVerifica con padding 0 se vuoto */
  #alertVerifica:empty { padding: 0 !important; min-height: 0 !important; }
}

/* iPad e desktop: #miniStripToggle SEMPRE nascosto, strip sempre visibile */
@media (min-width: 601px) {
  #miniStripToggle { display: none !important; }
}

/* =============================================================
   v118.9.8 fase B — GALLERIA SWIPE LIGHTBOX
   Swipe sx/dx per scorrere, swipe giù per chiudere, tasti ← → Esc,
   zone tap (1/3 sx avanti/indietro, centro chiudi).
   ============================================================= */
.gal-img {
  max-width: 95vw; max-height: 90vh;
  cursor: pointer; user-select: none;
  -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
}
.gal-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff; border: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 2.2rem; font-weight: 800;
  line-height: 1; cursor: pointer;
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gal-nav:hover { background: rgba(0,0,0,0.7); }
.gal-prec { left: 14px; }
.gal-succ { right: 14px; }
.gal-conta {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff; padding: 6px 14px;
  border-radius: 16px;
  font-size: .95rem; font-weight: 800;
  z-index: 60; pointer-events: none;
}
/* Mobile: frecce più piccole + più vicine ai bordi */
@media (max-width: 600px) {
  .gal-nav { width: 44px; height: 44px; font-size: 1.7rem; }
  .gal-prec { left: 6px; }
  .gal-succ { right: 6px; }
  .gal-conta { bottom: 14px; font-size: .85rem; padding: 4px 10px; }
}

/* ===========================================================
   v119.0.16 ONDATA B Giuseppe 12/06/2026 — palette outdoor
   consolidata. Sostituisce ~50 occorrenze di style inline
   ripetuto dentro app.js (modali Riepilogo, menu danno, menu
   foto, ecc.). Vantaggio: niente cuciture sopra cuciture,
   palette modificabile da 1 punto, app.js più snello.
   =========================================================== */

/* Overlay modale full-screen, sfondo scuro */
.mp-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.mp-overlay-card {
  background: #0f2742; color: #fff;
  border: 2px solid #1565c0; border-radius: 14px;
  padding: 18px; max-width: 420px; width: 100%;
}
.mp-overlay-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; }
.mp-overlay-sub   { font-size: .9rem; opacity: .85; margin-bottom: 14px; }

/* Bottoni outdoor — pensati per perito sotto sole. base+modificatori. */
.mp-btn {
  width: 100%; border: 0;
  padding: 16px; border-radius: 10px;
  font-weight: 800; font-size: 1rem;
  min-height: 56px; margin-bottom: 10px;
  cursor: pointer; text-align: center;
}
.mp-btn-lg { padding: 18px; min-height: 60px; }
.mp-btn-sm { padding: 14px; font-size: .95rem; min-height: 48px; margin-bottom: 0; }

/* Varianti colore — coerenti con tema scuro App.
   Le grafiche stesse possono variare per accent ma il volume resta. */
.mp-btn-blu     { background: #1565c0; color: #fff; }
.mp-btn-verde   { background: #16a34a; color: #fff; }
.mp-btn-rosso   { background: #b91c1c; color: #fff; }
.mp-btn-arancio { background: #f59e0b; color: #000; }
.mp-btn-grigio  { background: transparent; color: #fff; border: 1px solid #555; font-weight: 600; }
.mp-btn-blu-scuro { background: #6d28d9; color: #fff; }   /* per Galleria foto */

/* Hover/active per finger feedback (anche su iPad/touch) */
.mp-btn:active { transform: scale(.98); filter: brightness(.95); }

/* ===========================================================
   v119.0.17 ONDATA C Giuseppe 12/06/2026 — ritocchi grafici.
   Zero impatto sulla logica. Solo carattere visivo:
   - tasselli numerati più nitidi (ombra + glow attivo)
   - Riepilogo come "carta d'identità" del veicolo
   - banner mancanti più chiaro, meno aggressivo
   - galleria foto: badge stato più leggibili
   =========================================================== */

/* TASSELLI NUMERATI — ombra delicata, glow su attivo, transizione liscia.
   Override degli stili inline tramite specificity di #ggPallini > div[data-i]. */
#ggPallini > div[data-i] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
  letter-spacing: 0;
  /* il font-size inline è .78rem, lo lascio: dimensione coerente con outdoor */
}
#ggPallini > div[data-i]:hover  { filter: brightness(1.05); }
#ggPallini > div[data-i]:active { transform: scale(.92); }

/* CARTA D'IDENTITÀ VEICOLO in cima al Riepilogo Perizia (sFine).
   Header esistente è basico: porto a "card" con accent. */
#sFineHeaderTitolo {
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: .3px;
}
#sFineHeaderSub {
  font-size: .82rem; opacity: .8;
  margin-top: 2px;
}
/* contenitore header se in <header> dedicato */
.riep-veicolo-header {
  background: linear-gradient(135deg, #14213d 0%, #0f2742 100%);
  color: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  border-left: 4px solid #ffd000;
}

/* BLOCCHI Riepilogo — righe più ariose, hover delicato per click feedback.
   Il summary colorato resta com'è (è la signature del blocco). */
#riepBlocchi details > summary {
  padding: 14px 16px !important;
  letter-spacing: .2px;
}
#riepBlocchi [data-riapri-tappa]:hover,
#riepBlocchi [data-danno-idx]:hover {
  background: rgba(255, 255, 255, .04) !important;
}
#riepBlocchi [data-riapri-tappa]:active,
#riepBlocchi [data-danno-idx]:active {
  background: rgba(255, 255, 255, .08) !important;
}

/* BANNER MANCANTI — alert card chiaro, meno aggressivo del rosso pieno */
#alertMancantiFine {
  border-radius: 12px !important;
  padding: 14px 16px !important;
  line-height: 1.45;
  margin-bottom: 12px;
}

/* GALLERIA FOTO — badge ⏳ più visibile, miniature con bordo delicato */
#riepBlocchiFoto img {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .15s ease-out;
}
#riepBlocchiFoto img:hover  { transform: scale(1.03); }
#riepBlocchiFoto img:active { transform: scale(.97); }

/* BANNER CASCATA da sFine header titolo */
.mp-overlay-card img {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* Stato box (es. scatta-targa-lista durante OCR): 4 livelli semantici */
.mp-sbox {
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 8px;
  font-size: .88rem;
  color: #fff;
  line-height: 1.4;
}
.mp-sbox-info  { background: #1e4f73; }
.mp-sbox-ok    { background: #16a34a; }
.mp-sbox-warn  { background: #f59e0b; color: #000; }
.mp-sbox-error { background: #b91c1c; }