/* ==========================================================
   FCP 14.7.25 - App global layout width fix
   Scope: frontend webapp /?tab=... on desktop, tablet and mobile.
   Goal: stop legacy backend markup from appearing under the app UI and
   prevent any screen from stretching across ultra-wide/zoomed-out displays.
   ========================================================== */

body.fcp-app-root-page,
body:has(.fcp-app-shell){
  background:#f4f7fb!important;
  overflow-x:hidden!important;
}

body.fcp-app-root-page .fcp-app-shell,
body:has(.fcp-app-shell) .fcp-app-shell{
  --fcp25-bg:#f4f7fb;
  --fcp25-card:#ffffff;
  --fcp25-text:#0f172a;
  --fcp25-muted:#64748b;
  --fcp25-border:#e2e8f0;
  --fcp25-blue:#2563eb;
  --fcp25-shadow:0 16px 40px rgba(15,23,42,.07);
  background:linear-gradient(180deg,#f8fbff 0%,#f4f7fb 54%,#eef3f9 100%)!important;
  color:var(--fcp25-text)!important;
  box-sizing:border-box!important;
}

body.fcp-app-root-page .fcp-app-shell *,
body:has(.fcp-app-shell) .fcp-app-shell *{
  box-sizing:border-box!important;
}

/* Il vecchio backend veniva renderizzato sotto la webapp e, a zoom basso,
   si allargava su tutta la pagina. Nella frontend app deve restare nascosto:
   la UI operativa è quella native/app-like già renderizzata sopra. */
body.fcp-app-root-page .fcp-app-legacy-content,
body:has(.fcp-app-shell) .fcp-app-legacy-content{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

@media (min-width:961px){
  body.fcp-app-root-page .fcp-app-shell,
  body:has(.fcp-app-shell) .fcp-app-shell{
    grid-template-columns:248px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow-x:hidden!important;
  }

  body.fcp-app-root-page .fcp-app-sidebar,
  body:has(.fcp-app-shell) .fcp-app-sidebar{
    width:248px!important;
    min-width:248px!important;
    max-width:248px!important;
  }

  body.fcp-app-root-page .fcp-app-main,
  body:has(.fcp-app-shell) .fcp-app-main{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:28px clamp(22px,3vw,52px) 56px!important;
    overflow-x:hidden!important;
  }

  body.fcp-app-root-page .fcp-app-topbar,
  body:has(.fcp-app-shell) .fcp-app-topbar,
  body.fcp-app-root-page .fcp-mobile-native-screen,
  body:has(.fcp-app-shell) .fcp-mobile-native-screen{
    width:100%!important;
    max-width:1280px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.fcp-app-root-page .fcp-app-topbar,
  body:has(.fcp-app-shell) .fcp-app-topbar{
    margin-top:0!important;
    margin-bottom:22px!important;
  }

  /* Le schermate dettaglio cliente/lead sono più leggibili leggermente più strette. */
  body.fcp-app-root-page .fcp-record-detail-saas-14724,
  body:has(.fcp-app-shell) .fcp-record-detail-saas-14724{
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Le schermate elenco/task/lead/clienti non devono diventare tavole enormi a 25% zoom. */
  body.fcp-app-root-page .fcp-dashboard-shell,
  body.fcp-app-root-page .fcp-app-clients-board-14646,
  body.fcp-app-root-page .fcp-mobile-native-task > :not(.fcp-mobile-sheet-backdrop):not(.fcp-mobile-task-sheet):not(.fcp-mobile-action-sheet):not(.fcp-mobile-search-overlay):not(.fcp-mobile-lead-sheet):not(.fcp-mobile-fab):not(.fcp-mobile-recorder-fab):not(.fcp-ai-assistant):not(.fcp-call-assistant-panel),
  body.fcp-app-root-page .fcp-mobile-native-lead > :not(.fcp-mobile-sheet-backdrop):not(.fcp-mobile-task-sheet):not(.fcp-mobile-action-sheet):not(.fcp-mobile-search-overlay):not(.fcp-mobile-lead-sheet):not(.fcp-mobile-fab):not(.fcp-mobile-recorder-fab):not(.fcp-ai-assistant):not(.fcp-call-assistant-panel),
  body.fcp-app-root-page .fcp-mobile-native-altro > :not(.fcp-mobile-sheet-backdrop):not(.fcp-mobile-task-sheet):not(.fcp-mobile-action-sheet):not(.fcp-mobile-search-overlay):not(.fcp-mobile-lead-sheet):not(.fcp-mobile-fab):not(.fcp-mobile-recorder-fab):not(.fcp-ai-assistant):not(.fcp-call-assistant-panel),
  body:has(.fcp-app-shell) .fcp-dashboard-shell,
  body:has(.fcp-app-shell) .fcp-app-clients-board-14646,
  body:has(.fcp-app-shell) .fcp-mobile-native-task > :not(.fcp-mobile-sheet-backdrop):not(.fcp-mobile-task-sheet):not(.fcp-mobile-action-sheet):not(.fcp-mobile-search-overlay):not(.fcp-mobile-lead-sheet):not(.fcp-mobile-fab):not(.fcp-mobile-recorder-fab):not(.fcp-ai-assistant):not(.fcp-call-assistant-panel),
  body:has(.fcp-app-shell) .fcp-mobile-native-lead > :not(.fcp-mobile-sheet-backdrop):not(.fcp-mobile-task-sheet):not(.fcp-mobile-action-sheet):not(.fcp-mobile-search-overlay):not(.fcp-mobile-lead-sheet):not(.fcp-mobile-fab):not(.fcp-mobile-recorder-fab):not(.fcp-ai-assistant):not(.fcp-call-assistant-panel),
  body:has(.fcp-app-shell) .fcp-mobile-native-altro > :not(.fcp-mobile-sheet-backdrop):not(.fcp-mobile-task-sheet):not(.fcp-mobile-action-sheet):not(.fcp-mobile-search-overlay):not(.fcp-mobile-lead-sheet):not(.fcp-mobile-fab):not(.fcp-mobile-recorder-fab):not(.fcp-ai-assistant):not(.fcp-call-assistant-panel){
    width:100%!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.fcp-app-root-page .fcp-mobile-client-list,
  body.fcp-app-root-page .fcp-mobile-lead-list,
  body:has(.fcp-app-shell) .fcp-mobile-client-list,
  body:has(.fcp-app-shell) .fcp-mobile-lead-list{
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;
    gap:16px!important;
  }

  body.fcp-app-root-page .fcp-mobile-kpi-row,
  body:has(.fcp-app-shell) .fcp-mobile-kpi-row{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
    gap:14px!important;
  }
}

@media (min-width:1440px){
  body.fcp-app-root-page .fcp-app-main,
  body:has(.fcp-app-shell) .fcp-app-main{
    padding-left:clamp(36px,4vw,72px)!important;
    padding-right:clamp(36px,4vw,72px)!important;
  }
}

@media (max-width:960px){
  body.fcp-app-root-page .fcp-app-main,
  body:has(.fcp-app-shell) .fcp-app-main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px 14px calc(104px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
  }

  body.fcp-app-root-page .fcp-app-topbar,
  body:has(.fcp-app-shell) .fcp-app-topbar,
  body.fcp-app-root-page .fcp-mobile-native-screen,
  body:has(.fcp-app-shell) .fcp-mobile-native-screen{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* Fallback di sicurezza: se per debug il legacy viene forzato visibile,
   non deve comunque spaccare la pagina su monitor larghi. */
body.fcp-app-root-page .fcp-app-legacy-content.is-visible,
body:has(.fcp-app-shell) .fcp-app-legacy-content.is-visible{
  display:block!important;
  visibility:visible!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
  width:100%!important;
  max-width:1280px!important;
  margin:0 auto!important;
}

body.fcp-app-root-page .fcp-app-legacy-content.is-visible .wrap,
body.fcp-app-root-page .fcp-app-legacy-content.is-visible .fcp-app-admin-wrap,
body:has(.fcp-app-shell) .fcp-app-legacy-content.is-visible .wrap,
body:has(.fcp-app-shell) .fcp-app-legacy-content.is-visible .fcp-app-admin-wrap{
  width:100%!important;
  max-width:1280px!important;
  margin:0 auto!important;
}