/* ============================================================
   EMEA Platform · Responsive / Mobile SAFETY LAYER (globale)
   ------------------------------------------------------------
   Caricato come ULTIMO foglio di stile su ogni pagina. Contiene
   SOLO regole sicure e non-distruttive (root-cause), pensate per
   NON regredire le media query già presenti nelle pagine: niente
   override aggressivi di componenti specifici (drawer/modali sono
   gestiti per-pagina). Solo FRONTEND, nessuna logica toccata.

   Risolve a livello globale:
   • zero scroll orizzontale (guard con overflow-x:clip su mobile);
   • media fluidi e mai deformati;
   • parole/URL lunghe non sforano lo schermo;
   • input full-width + 16px (niente zoom iOS al focus);
   • tabelle larghe → scroll orizzontale controllato;
   • titoli che non superano mai il viewport;
   • safe-area (notch / Dynamic Island / barre Android);
   • rispetto di prefers-reduced-motion.
   Breakpoint: 768 (mobile/tablet piccolo) · 480 (telefono) · 380 (≤320px).
   ============================================================ */

/* ---- Safe area (variabili pronte all'uso nelle pagine) ---- */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---- Globali sicure (valgono anche su desktop, non rompono nulla) ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, svg, video, canvas, picture, iframe{ max-width:100%; }
img, video{ height:auto; }                 /* mantiene il rapporto: niente deformazioni */
body, p, span, a, li, dd, dt, figcaption, blockquote,
h1, h2, h3, h4, h5, h6, label{ overflow-wrap:break-word; }

/* ============================================================
   ≤768px — MOBILE
   ============================================================ */
@media (max-width:768px){
  /* GARANZIA: nessuno scroll orizzontale. `clip` non crea contesto di
     scroll e preserva position:sticky (a differenza di hidden). */
  html, body{ overflow-x:clip; max-width:100%; }

  /* Form comodi al tocco e senza zoom automatico iOS al focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{ width:100%; max-width:100%; font-size:16px; }

  /* Tabelle larghe: mai fuori schermo → scroll orizzontale controllato */
  table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Container condiviso admin/filiale: padding laterale ragionevole */
  .shell{ padding-left:16px !important; padding-right:16px !important; }
}

/* ============================================================
   ≤480px — TELEFONO: titoli che non superano lo schermo
   ============================================================ */
@media (max-width:480px){
  .shell{ padding-left:14px !important; padding-right:14px !important; }
}

/* ============================================================
   ≤380px — TELEFONO PICCOLO (fino a 320px)
   ============================================================ */
@media (max-width:380px){
  .shell{ padding-left:12px !important; padding-right:12px !important; }
}

/* ============================================================
   Accessibilità movimento
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}