/* ===========================================================
   MOBILE OPTIMIZATION — global responsive styles
   Include in shell.html + tutte pages standalone (login, etc).
   Breakpoints:
     - mobile: max-width 640px
     - tablet: 641-960px
     - desktop: > 960px
   =========================================================== */

/* ===== iOS zoom prevention: input font ≥ 16px ===== */
@media (max-width: 768px) {
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
  input[type="password"],input[type="search"],input[type="date"],input[type="time"],
  input[type="url"],input[type="datetime-local"],
  textarea,select,
  .form-control,.form-select{
    font-size:16px!important;
  }
}

/* ===== Touch targets: tap area ≥ 44px ===== */
@media (max-width: 768px) {
  .btn,.btn-sm,button,a.nav-link,
  .form-check-label,.dropdown-item{
    min-height:44px;
    padding-top:.55rem;padding-bottom:.55rem;
  }
  .btn-sm{min-height:38px}
  .btn-link{min-height:auto}
  /* Input groups: bottoni inline non oversize */
  .input-group .btn{min-height:auto}
  /* Checkbox/radio: zona tap sufficiente */
  input[type="checkbox"],input[type="radio"]{min-width:20px;min-height:20px}
}

/* ===== Layout container fluid mobile ===== */
@media (max-width: 768px) {
  .wrap,.container,.container-fluid,.container-sm,.container-md,.container-lg{
    padding-left:.75rem!important;
    padding-right:.75rem!important;
  }
  /* Sezioni step-card verticali */
  .step-card,.card,.persona-card{
    padding:.85rem!important;
    border-radius:8px;
  }
  h1,h2,.h1,.h2{font-size:1.4rem}
  h3,.h3{font-size:1.2rem}
  h4,.h4{font-size:1.05rem}
}

/* ===== Bootstrap rows: stack on mobile ===== */
@media (max-width: 576px) {
  .row > [class*="col-md-"]{width:100%}
  .col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
  .col-md-7,.col-md-8,.col-md-9,.col-md-10{flex:0 0 100%;max-width:100%}
}

/* ===== Tables: scroll orizzontale invece di overflow ===== */
@media (max-width: 768px) {
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:.88rem}
  /* Wrap automatico tabelle non già wrapped */
  body:not(.no-mobile-table-wrap) > table:not(.table-responsive table),
  .content-wrap table:not(.table-responsive table){
    display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
  }
}

/* ===== Modal: full-screen su mobile ===== */
@media (max-width: 768px) {
  .modal-dialog{margin:0;max-width:100%;height:100vh;height:100dvh}
  .modal-content{height:100vh;height:100dvh;border-radius:0;border:0}
  .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-footer{position:sticky;bottom:0;background:white;z-index:5}
}

/* ===== Form: gap più ampi su mobile ===== */
@media (max-width: 576px) {
  .row.g-2,.row.g-3{--bs-gutter-y:.7rem}
  .form-label{font-size:.88rem}
  .form-control,.form-select{padding:.55rem .7rem;min-height:44px}
}

/* ===== Sidebar drawer mobile ===== */
/* Override critico: app-design.css ha `.design-a .sb{display:none}` <900px.
   Quando shell aggiunge `.sb.open`, la sidebar deve mostrarsi. */
@media (max-width: 900px) {
  .design-a .sb.open{
    display:flex!important;
    position:fixed!important;top:0!important;left:0!important;
    height:100vh!important;width:280px!important;max-width:85vw!important;
    z-index:1200!important;
    transform:translateX(0)!important;
    box-shadow:2px 0 16px rgba(0,0,0,.25);
  }
}

/* ===== Toolbar/footer azioni sticky bottom mobile ===== */
@media (max-width: 768px) {
  .actions-bottom{
    margin:.5rem -.75rem -1rem!important;
    padding:.7rem .9rem!important;
    flex-wrap:wrap;
    gap:.4rem;
  }
  .actions-bottom .btn{flex:1;min-width:max-content}
}

/* ===== File dropzones: stack vertical mobile ===== */
@media (max-width: 576px) {
  .upload-sec-box,.ai-upload-wrap{padding:.7rem!important}
  .upload-sec-box > div,.ai-upload-wrap > div{flex-direction:column!important;align-items:stretch!important}
  .dz-mini,.ai-dropzone{min-width:0!important;width:100%}
  .btn-sm-accent,.ai-btn-extract{width:100%;justify-content:center}
}

/* ===== Card list responsive ===== */
@media (max-width: 576px) {
  .immobile-row,.persona-card{padding:.7rem!important}
  /* Bottoni rimuovi/modifica nelle card più visibili */
  .btn-rm{font-size:1.3rem!important}
}

/* ===== Search/cerca-db mobile ===== */
@media (max-width: 576px) {
  .cerca-db-wrap{padding:.55rem!important}
  .cerca-db-wrap .input-group-sm input{font-size:16px!important}
  .cerca-db-results{max-height:50vh}
}

/* ===== Topbar shell mobile ===== */
@media (max-width: 768px) {
  .design-a .topbar{padding:.6rem .9rem!important;gap:.4rem!important}
  .design-a .topbar h1,.design-a .topbar .topbar-title{font-size:1rem!important}
  .design-a .topbar .topbar-actions .btn{padding:.4rem .6rem;font-size:.85rem}
  .design-a .topbar .nuovo-btn{padding:.45rem .7rem;font-size:.85rem}
}

/* ===== Annunci/grid card responsive ===== */
@media (max-width: 768px) {
  .annunci-grid,.cards-grid{grid-template-columns:1fr!important}
}

/* ===== Floating action buttons (FAB) mobile ===== */
@media (max-width: 768px) {
  .fab,.btn-fab{
    position:fixed;bottom:1rem;right:1rem;z-index:50;
    width:56px;height:56px;border-radius:50%;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
  }
}

/* ===== Utility classes responsive ===== */
@media (max-width: 768px) {
  .hide-mobile{display:none!important}
  .text-truncate-mobile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}
@media (min-width: 769px) {
  .hide-desktop{display:none!important}
}

/* ===== Accessibility: tap highlight transparent ===== */
button,a,.btn,input,select,textarea{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* ===== Smooth scroll ===== */
html{scroll-behavior:smooth}

/* ===== Safe area insets (notch iPhone) ===== */
@supports (padding: env(safe-area-inset-top)) {
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .actions-bottom{padding-bottom:calc(.7rem + env(safe-area-inset-bottom))!important}
}

/* ===== iOS Safari URL bar fix: usa dvh dinamici invece di vh fissi =====
   100vh include URL bar nascosta su iOS → bottoni in fondo non cliccabili.
   100dvh è dinamico, segue dimensioni viewport reali. */
@supports (height: 100dvh) {
  html,body{height:100dvh!important}
  .app.design-a,.design-a.app{height:100dvh!important;min-height:100dvh!important}
  .sb,.design-a .sb{height:100dvh!important}
  .main,.design-a .main{height:100dvh!important}
  /* Modal full-screen mobile */
  @media (max-width: 768px) {
    .modal-dialog{height:100dvh!important}
    .modal-content{height:100dvh!important}
  }
  /* Crop tool overlay */
  [style*="height:100vh"]{height:100dvh!important}
}

/* ===== Footer bottoni sticky: rispetta safe-area + URL bar mobile ===== */
.actions-bottom{
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px))!important;
}
@media (max-width: 768px) {
  /* Aggiungi spazio extra in fondo body per evitare bottoni sotto URL bar */
  body{padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Container con max-h che usa vh → usa dvh */
  [style*="max-height:100vh"]{max-height:100dvh!important}
  [style*="max-height: 100vh"]{max-height:100dvh!important}
  /* Sticky bottom buttons: position fixed con safe-area */
  .actions-bottom{
    position:sticky;
    bottom:0;
    z-index:50;
  }
}

/* ===========================================================
   MOBILE HARDENING v2 — regole globali per contenuti iframe
   Obiettivo: niente overflow laterale, menu/tabs usabili, drawer leggibili.
   =========================================================== */
html,
body {
  max-width: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 900px) {
  .app.design-a,
  .design-a.app {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .app.design-a .main,
  .design-a.app .main,
  .app.design-a .content-wrap,
  .design-a.app .content-wrap {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }

  .app.design-a .sb:not(.open),
  .design-a.app .sb:not(.open) {
    transform: translateX(-100%) !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  body.gest-page-content {
    --app-page-gutter: clamp(.55rem, 3vw, .85rem);
    --app-content-width: calc(100% - (var(--app-page-gutter) * 2));
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: var(--app-page-gutter) 0 calc(var(--app-page-gutter) + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.gest-page-content > :not(script):not(style):not(link):not(.loading-overlay):not(.success-overlay),
  body.gest-page-content .main-content,
  body.gest-page-content .container,
  body.gest-page-content .container-fluid,
  body.gest-page-content main,
  body.gest-page-content .wrap,
  body.gest-page-content .page,
  body.gest-page-content .page-wrap {
    width: var(--app-content-width) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.gest-page-content [style*="max-width:1400"],
  body.gest-page-content [style*="max-width: 1400"],
  body.gest-page-content [style*="max-width:1240"],
  body.gest-page-content [style*="max-width: 1240"],
  body.gest-page-content [style*="max-width:1208"],
  body.gest-page-content [style*="max-width: 1208"] {
    max-width: 100% !important;
  }

  body.gest-page-content .card,
  body.gest-page-content .step-card,
  body.gest-page-content .main-card,
  body.gest-page-content .card-panel,
  body.gest-page-content .card-section,
  body.gest-page-content .panel,
  body.gest-page-content .box,
  body.gest-page-content .gen-form-panel,
  body.gest-page-content .doc-section-group {
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  body.gest-page-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.gest-page-content .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.gest-page-content .nav-tabs,
  body.gest-page-content .tab-nav,
  body.gest-page-content .tabs,
  body.gest-page-content .ct-tabs,
  body.gest-page-content .admin-tabs,
  body.gest-page-content .wizard-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: .35rem !important;
    scrollbar-width: none;
  }

  body.gest-page-content .nav-tabs::-webkit-scrollbar,
  body.gest-page-content .tab-nav::-webkit-scrollbar,
  body.gest-page-content .tabs::-webkit-scrollbar,
  body.gest-page-content .ct-tabs::-webkit-scrollbar,
  body.gest-page-content .admin-tabs::-webkit-scrollbar,
  body.gest-page-content .wizard-steps::-webkit-scrollbar {
    display: none;
  }

  body.gest-page-content .nav-tabs > *,
  body.gest-page-content .tab-nav > *,
  body.gest-page-content .tabs > *,
  body.gest-page-content .ct-tabs > *,
  body.gest-page-content .admin-tabs > *,
  body.gest-page-content .wizard-steps > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body.gest-page-content .stepper-wrapper {
    width: var(--app-content-width) !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: .5rem !important;
  }

  body.gest-page-content .stepper {
    min-width: max-content !important;
    width: max-content !important;
    padding: 0 .35rem !important;
  }

  body.gest-page-content .step-item {
    min-width: 68px !important;
    flex: 0 0 68px !important;
  }

  body.gest-page-content .step-label {
    font-size: .66rem !important;
    max-width: 68px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.gest-page-content .doc-sel-grid,
  body.gest-page-content .cli-doc-grid,
  body.gest-page-content .cards,
  body.gest-page-content .stats,
  body.gest-page-content .dash-grid,
  body.gest-page-content .ai-field-row,
  body.gest-page-content .ai-field-row.triple,
  body.gest-page-content .pref-row,
  body.gest-page-content .pref-row.cols-2,
  body.gest-page-content .pref-row.cols-4,
  body.gest-page-content .cli-task-tools {
    grid-template-columns: 1fr !important;
  }

  body.gest-page-content .input-group,
  body.gest-page-content .btn-group,
  body.gest-page-content .toolbar,
  body.gest-page-content .form-actions,
  body.gest-page-content .wizard-actions {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.gest-page-content .d-flex:not(.keep-mobile-row),
  body.gest-page-content [style*="display:flex"]:not(.keep-mobile-row):not(.stepper):not(.task-item):not(.tm-item):not(.scadenza) {
    flex-wrap: wrap !important;
  }

  body.gest-page-content .btn,
  body.gest-page-content button:not(.accordion-button):not(.btn-close) {
    justify-content: center !important;
  }

  body.gest-page-content .doc-link-card,
  body.gest-page-content .scadenza,
  body.gest-page-content .task-input,
  body.gest-page-content .task-item {
    align-items: flex-start !important;
  }

  body.gest-page-content .section-h:not([style*="display:none"]):not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .35rem !important;
    align-items: start !important;
  }

  body.gest-page-content .section-h h2 {
    min-width: 0 !important;
    line-height: 1.18 !important;
  }

  body.gest-page-content .section-h .more {
    justify-self: start !important;
    white-space: normal !important;
  }

  body.gest-page-content .task-input {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: .6rem !important;
  }

  body.gest-page-content .task-input input {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.gest-page-content .task-input-actions,
  body.gest-page-content .task-actions {
    width: 100% !important;
    opacity: 1 !important;
  }

  body.gest-page-content .task-input-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body.gest-page-content .task-input-actions > * {
    width: 100% !important;
  }

  body.gest-page-content .nav-footer {
    width: 100vw !important;
    min-height: 126px !important;
    padding: var(--app-page-gutter) !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body.gest-page-content .nav-footer > div {
    top: .85rem !important;
    transform: translateX(-50%) !important;
  }

  body.gest-page-content .nav-footer #btnPrev,
  body.gest-page-content .nav-footer #btnNext {
    bottom: .85rem !important;
    top: auto !important;
    min-width: 42%;
  }
}

/* Task Manager: su mobile il pannello dettaglio diventa drawer e il kanban resta leggibile. */
@media (max-width: 900px) {
  body.gest-page-content .tm-page,
  .tm-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: .75rem !important;
    overflow: visible !important;
  }

  body.gest-page-content .tm-left,
  body.gest-page-content .tm-center {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
  }

  body.gest-page-content .tm-left {
    max-height: none !important;
    overflow: visible !important;
  }

  body.gest-page-content .tm-center {
    overflow: visible !important;
    padding: 1rem !important;
  }

  body.gest-page-content .tm-head,
  body.gest-page-content .tm-toolbar,
  body.gest-page-content .tm-add,
  body.gest-page-content .tm-sortbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body.gest-page-content .tm-head-tip,
  body.gest-page-content .tm-sortbar .hint {
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.gest-page-content .view-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.gest-page-content .kan-board {
    display: flex !important;
    overflow-x: auto !important;
    gap: .75rem !important;
    padding: .15rem .15rem .9rem !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  body.gest-page-content .kan-col {
    flex: 0 0 min(86vw, 360px) !important;
    min-width: min(86vw, 360px) !important;
    min-height: 45vh !important;
    scroll-snap-align: start;
  }

  body.gest-page-content .cal-view {
    overflow-x: auto !important;
  }

  body.gest-page-content .cal-grid {
    min-width: 620px !important;
  }

  body.gest-page-content .tm-page:not(.no-detail) .tm-detail {
    display: block !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    height: min(86dvh, 720px) !important;
    max-height: 86dvh !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
    border-radius: 22px 22px 0 0 !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 -22px 60px rgba(15, 23, 42, .28) !important;
    padding: 1rem !important;
    background: #fff !important;
  }

  body.gest-page-content .tm-page:not(.no-detail)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .28);
    z-index: 1999;
  }
}

@media (max-width: 420px) {
  body.gest-page-content .view-switch {
    grid-template-columns: 1fr !important;
  }

  body.gest-page-content .tm-meta,
  body.gest-page-content .kan-card .meta {
    gap: .28rem !important;
  }

  body.gest-page-content .tm-meta .chip,
  body.gest-page-content .tm-meta .tag,
  body.gest-page-content .kan-card .chip,
  body.gest-page-content .kan-card .tag {
    max-width: 100% !important;
  }
}