/* =========================================================
   CAF Public — Mobile Fix Layer
   Carica DOPO dashboard-style.css e pd-design-system.css.
   Scopo:
     1) Bloccare gli ad Ezoic dentro i contenitori
     2) Risolvere viewport iOS (home tagliata, safe-area)
     3) Normalizzare overflow orizzontale (niente scroll-sideways)
     4) Raddrizzare i layout che collassano in mobile
   ========================================================= */

/* ───────────────────────────────────────────────────────────
   1 · OVERFLOW DISCIPLINE — niente scroll orizzontale
   ─────────────────────────────────────────────────────────── */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%; /* blocca auto-zoom iOS */
}

/* App root: larghezza intera, nessun overflow laterale, contiene gli ad */
#pd-user-app {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  overflow-x: clip; /* blocco più moderno di hidden, non crea scroll-containment */
}
@supports not (overflow-x: clip) {
  #pd-user-app { overflow-x: hidden !important; }
}

/* Tutti i contenitori principali: min-width:0 per non sfondare i grid/flex */
#pd-user-app .pd-app,
#pd-user-app .pd-main,
#pd-user-app .pd-section,
#pd-user-app .pd-sidebar,
#pd-user-app .pd-topbar,
#pd-user-app .pd-folders,
#pd-user-app .pd-widgets,
#pd-user-app .pd-sim-grid,
#pd-user-app .files-grid,
#pd-user-app .docs-grid,
#pd-user-app .cols {
  min-width: 0;
  max-width: 100%;
}

/* Immagini, video, iframe: contain per natura */
#pd-user-app img,
#pd-user-app video,
#pd-user-app iframe,
#pd-user-app embed,
#pd-user-app object {
  max-width: 100%;
  height: auto;
}

/* ───────────────────────────────────────────────────────────
   2 · VIEWPORT iOS — home non più tagliata
   Usa svh/dvh dove disponibile; safe-area per notch/home-indicator.
   ─────────────────────────────────────────────────────────── */
#pd-user-app .pd-app {
  min-height: 100vh;            /* fallback */
  min-height: 100svh;           /* altezza "small" = esclude barre UI */
  min-height: 100dvh;           /* altezza dinamica = più fluida */
}

@supports (padding: max(0px)) {
  #pd-user-app .pd-main {
    /* Padding-bottom che include l'home indicator dell'iPhone */
    padding-bottom: max(80px, env(safe-area-inset-bottom) + 72px) !important;
  }
  #pd-user-app .pd-topbar {
    /* Padding-top per notch su landscape + eventuale status bar */
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ───────────────────────────────────────────────────────────
   3 · EZOIC ADS — BLOCCO TOTALE nell'area privata
   Nell'area cliente CAF Public (body.public-dashboard-app e dentro
   #pd-user-app) NESSUN ad Ezoic deve essere visibile. Fuori dall'area
   privata, gli ad continuano a funzionare normalmente.
   Copriamo tutti i pattern comuni di Ezoic:
     - div con id "ezoic-pub-ad-placeholder-*"
     - classi "ezoic-*", "ez-*", "ezAdGlobal*"
     - iframe googletag/adtech iniettati
     - video floating, sticky, flying carpet, interstitial
     - lazy-loaded placeholder vuoti
   ─────────────────────────────────────────────────────────── */

/* BLOCCO COMPLETO dentro area privata */
body.public-dashboard-app [id^="ezoic-pub-ad-placeholder"],
body.public-dashboard-app [id^="ezoic-"],
body.public-dashboard-app [id*="-ezoic-"],
body.public-dashboard-app [class*="ezoic-"],
body.public-dashboard-app [class^="ez-"],
body.public-dashboard-app [class*=" ez-"],
body.public-dashboard-app [id^="ez-"],
body.public-dashboard-app [id*="ezAdGlobal"],
body.public-dashboard-app .ezoic-floating-player,
body.public-dashboard-app .ezoic-autoplay-video,
body.public-dashboard-app .ezoic-interstitial,
body.public-dashboard-app [class*="flying-carpet"],
body.public-dashboard-app [data-ez-name],
body.public-dashboard-app [data-ez-ph-id],
body.public-dashboard-app .video-player-ez,
body.public-dashboard-app .ez-video-container,
body.public-dashboard-app ins.adsbygoogle,
#pd-user-app [id^="ezoic-pub-ad-placeholder"],
#pd-user-app [id^="ezoic-"],
#pd-user-app [class*="ezoic-"],
#pd-user-app [class^="ez-"],
#pd-user-app [class*=" ez-"],
#pd-user-app [id^="ez-"],
#pd-user-app [data-ez-name],
#pd-user-app [data-ez-ph-id],
#pd-user-app ins.adsbygoogle {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Fuori dall'area privata: lasciamo Ezoic in pace ma limitiamo larghezza
   su mobile così non rompe il tuo sito pubblico */
@media (max-width: 900px) {
  [id^="ezoic-pub-ad-placeholder-"],
  [id^="ezoic-"],
  [class*="ezoic-"]:not(.ezoic-hidden) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  [id^="ezoic-pub-ad-placeholder-"] iframe,
  [id^="ezoic-pub-ad-placeholder-"] video,
  [id^="ezoic-pub-ad-placeholder-"] img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────
   4 · HOME — fix taglio iPhone
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Topbar: occupa tutta la riga; non lasciare spazi negativi */
  #pd-user-app .pd-topbar {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 56px;
    padding: 0 14px !important;
  }

  /* Main: niente overflow che rompe + padding laterale sicuro */
  #pd-user-app .pd-main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 16px !important;
  }

  /* HERO — rientra bene nella viewport */
  #pd-user-app .pd-hero {
    padding: 22px 18px !important;
    border-radius: 16px !important;
    margin: 0 0 16px !important;
  }
  #pd-user-app .pd-hero-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 14px !important;
  }
  #pd-user-app .pd-hero-greet {
    font-size: 22px !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
  #pd-user-app .pd-hero-sub {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  #pd-user-app .pd-hero-cta-wrap {
    width: 100% !important;
  }
  #pd-user-app .pd-hero-cta-wrap .pd-btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 13.5px !important;
  }

  /* Stats hero: 2 colonne invece di 4 */
  #pd-user-app .pd-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #pd-user-app .pd-hero-stat {
    padding: 12px 12px !important;
  }
  #pd-user-app .pd-hero-stat-v {
    font-size: 18px !important;
  }
  #pd-user-app .pd-hero-stat-l {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  #pd-user-app .pd-hero-stats--v2 .pd-hero-stat {
    gap: 10px !important;
  }
}

/* iPhone SE / molto stretto */
@media (max-width: 380px) {
  #pd-user-app .pd-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #pd-user-app .pd-hero { padding: 18px 14px !important; }
  #pd-user-app .pd-hero-greet { font-size: 20px !important; }
  #pd-user-app .pd-hero-stats {
    grid-template-columns: 1fr !important;
  }
  #pd-user-app .pd-hero-stat { padding: 10px 12px !important; }
}

/* ───────────────────────────────────────────────────────────
   5 · PAGINA DOCUMENTI / PRATICHE — leggibilità mobile
   La griglia cartelle "finder" va a 2 col <=900px, ma con ad Ezoic
   in mezzo il testo si comprimeva in verticale. Forziamo 1 col
   sotto 560px e min-width a 0 per evitare text-overflow infinito.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Docs layout (griglia sidebar + contenuto): stack verticale */
  #pd-user-app .docs-layout,
  .docs-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #pd-user-app .folders-panel,
  .folders-panel {
    position: static !important;  /* non più sticky su mobile */
    width: 100% !important;
  }

  /* Cartelle in stile Finder: 2 colonne ma contenute */
  #pd-user-app .pd-folders {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #pd-user-app .pd-folder {
    padding: 16px 14px !important;
    min-width: 0;
  }
  #pd-user-app .pd-folder-t {
    font-size: 13.5px !important;
    word-break: break-word;
  }
  #pd-user-app .pd-folder-meta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* Griglia file (file-item): 2 colonne, spezza i nomi lunghi */
  #pd-user-app .files-grid,
  .files-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #pd-user-app .file-item:nth-child(3n) { border-right: 0.5px solid var(--border) !important; }
  #pd-user-app .file-item:nth-child(2n) { border-right: none !important; }
  #pd-user-app .file-name {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Empty state + dettaglio pratica: padding ridotto */
  #pd-user-app .pd-empty--pratiche {
    padding: 32px 18px !important;
  }
  #pd-user-app .pd-detail-head {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  #pd-user-app .pd-detail-t {
    font-size: 17px !important;
  }

  /* Banner "invia documenti via email" */
  #pd-user-app .pd-banner {
    grid-template-columns: 40px 1fr !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  #pd-user-app .pd-banner .pd-btn {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  #pd-user-app .pd-folders {
    grid-template-columns: 1fr !important;
  }
  #pd-user-app .files-grid,
  .files-grid {
    grid-template-columns: 1fr !important;
  }
  #pd-user-app .file-item {
    border-right: none !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 14px 12px !important;
  }
  #pd-user-app .file-thumb {
    flex-shrink: 0;
  }
  #pd-user-app .file-name,
  #pd-user-app .file-meta {
    text-align: left !important;
    max-width: none !important;
  }
}

/* ───────────────────────────────────────────────────────────
   6 · SIDEBAR MOBILE — overlay sempre sopra Ezoic
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #pd-user-app .pd-sidebar {
    z-index: 100010 !important; /* sopra qualsiasi ad sticky */
    height: 100vh;
    height: 100dvh;
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #pd-user-app .pd-sidebar-overlay {
    z-index: 100005 !important;
  }
  #pd-user-app .pd-topbar {
    z-index: 9999 !important;
  }
}

/* ───────────────────────────────────────────────────────────
   7 · TIPOGRAFIA / TOUCH TARGET
   - input font-size >= 16px per evitare auto-zoom iOS
   - bottoni almeno 40px di altezza
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #pd-user-app input,
  #pd-user-app select,
  #pd-user-app textarea {
    font-size: 16px !important;  /* anti-zoom iOS */
  }
  #pd-user-app .pd-btn {
    min-height: 40px;
  }
  #pd-user-app .pd-btn--sm { min-height: 36px; }

  /* Link e pulsanti: area cliccabile minimo 44x44 (Apple HIG) */
  #pd-user-app .pd-navitem,
  #pd-user-app .pd-top-btn,
  #pd-user-app .notif-item {
    min-height: 44px;
  }
}

/* ───────────────────────────────────────────────────────────
   8 · MESSAGGI / CHAT — altezza dinamica
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #pd-user-app .pd-chat {
    height: calc(100svh - 128px) !important;
    min-height: 480px !important;
  }
}

/* ───────────────────────────────────────────────────────────
   9 · SIMULATORI / FORM — stack su mobile
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #pd-user-app .form-grid,
  #pd-user-app .form-grid.cols-3,
  #pd-user-app .fields-grid,
  #pd-user-app .fields-grid.cols-3,
  #pd-user-app .fields-grid.cols-2 {
    grid-template-columns: 1fr !important;
  }
  #pd-user-app .radio-cards {
    grid-template-columns: 1fr 1fr !important;
  }
  #pd-user-app .panel-actions,
  #pd-user-app .form-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
  #pd-user-app .panel-actions .pd-btn,
  #pd-user-app .form-actions button,
  #pd-user-app .form-actions .btn-save,
  #pd-user-app .form-actions .btn-cancel {
    width: 100%;
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────
   10 · PROFILO — fix avatar + card hero
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #pd-user-app .pd-profile-hero-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: -30px !important;
    padding: 0 18px 18px !important;
    gap: 10px !important;
  }
  #pd-user-app .pd-profile-nm {
    font-size: 18px !important;
  }
}

/* ───────────────────────────────────────────────────────────
   11 · SAFETY NET — break-word ovunque sui testi lunghi
   ─────────────────────────────────────────────────────────── */
#pd-user-app h1, #pd-user-app h2, #pd-user-app h3,
#pd-user-app .pd-hero-greet, #pd-user-app .pd-page-hd-t,
#pd-user-app .pd-card-t, #pd-user-app .pd-row-t,
#pd-user-app .pd-navitem, #pd-user-app .pd-folder-t {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ───────────────────────────────────────────────────────────
   12 · SCHEDE CON AZIONE A DESTRA — stacking verticale mobile
   Target: tutti i pattern "titolo/descrizione a sinistra + pulsante
   a destra" che su mobile comprimono la colonna testo. Forziamo
   stack verticale e pulsanti a larghezza piena.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* --- HOME: card onboarding "Benvenuto in CAF Public" --- */
  #pd-user-app .pd-onboarding {
    grid-template-columns: 1fr !important;
    text-align: left;
    gap: 14px !important;
    padding: 20px 18px !important;
  }
  #pd-user-app .pd-onboarding > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;
  }
  #pd-user-app .pd-onboarding .pd-btn,
  #pd-user-app .pd-onboarding a.pd-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  #pd-user-app .pd-onboarding-ico {
    width: 48px !important;
    height: 48px !important;
  }

  /* --- PAGE HEADER: titolo + CTA a destra (documenti, servizi…) --- */
  #pd-user-app .pd-page-hd {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  #pd-user-app .pd-page-hd-l {
    width: 100%;
  }
  #pd-user-app .pd-page-hd-t {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  #pd-user-app .pd-page-hd-s {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  #pd-user-app .pd-page-hd > .pd-btn,
  #pd-user-app .pd-page-hd > a.pd-btn,
  #pd-user-app .pd-page-hd > button.pd-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- CARD HEADER: titolo + link/azione a destra --- */
  #pd-user-app .pd-card-hd {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #pd-user-app .pd-card-hd > * {
    min-width: 0;
  }

  /* --- PANEL HEADER servizi espansi: titolo + X chiudi --- */
  #pd-user-app .pd-cat-panel-hd {
    padding: 18px 18px 14px !important;
    gap: 12px !important;
  }
  #pd-user-app .pd-cat-section,
  #pd-user-app .pd-cat-panel-footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Righe servizio dentro il pannello: icona + testo + CTA */
  #pd-user-app .pd-srv-row2 {
    grid-template-columns: 36px 1fr !important;
    row-gap: 8px !important;
  }
  #pd-user-app .pd-srv-row2 .pd-srv-pill {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    justify-content: center !important;
  }
  #pd-user-app .pd-srv-sigla {
    width: 36px !important;
    height: 36px !important;
  }

  /* --- DETTAGLIO PRATICA: titolo + azioni --- */
  #pd-user-app .pd-detail-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #pd-user-app .pd-detail-head .pd-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- EMPTY STATE con azioni --- */
  #pd-user-app .pd-empty-actions,
  #pd-user-app .pd-empty-flow {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  #pd-user-app .pd-empty-actions .pd-btn,
  #pd-user-app .pd-empty-flow .pd-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- FOLDER HEADER (admin-like nel cliente): titolo + azioni --- */
  #pd-user-app .folder-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  #pd-user-app .fh-right {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #pd-user-app .fh-right > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* --- MODAL HEADER: niente schiacciamento titolo --- */
  #pd-user-app .modal-hd {
    padding: 16px 18px !important;
    gap: 10px !important;
  }
}

/* Schermi molto stretti (≤380px): riduci ulteriormente i padding
   così i pulsanti full-width non sbordano. */
@media (max-width: 380px) {
  #pd-user-app .pd-onboarding {
    padding: 18px 14px !important;
  }
  #pd-user-app .pd-page-hd-t {
    font-size: 20px !important;
  }
  #pd-user-app .pd-cat-panel-hd,
  #pd-user-app .pd-cat-section,
  #pd-user-app .pd-cat-panel-footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}