/* ===========================================================
   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}` ≤1024px.
   Quando shell aggiunge `.sb.open`, la sidebar deve mostrarsi.
   (breakpoint allineato alla shell: hamburger+drawer ≤1024) */
@media (max-width: 1024px) {
  .design-a .sb.open{
    display:flex!important;
    position:fixed!important;top:0!important;left:0!important;
    height:100vh!important;height:100dvh!important;
    width:min(320px,86vw)!important;max-width:86vw!important;
    z-index:1600!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;
  }
}

/* ===========================================================
   MOBILE PASS 3 — pagine MASTER RULE (.mr / .mrv2)
   Queste pagine NON ricevono .gest-page-content dalla shell
   (mr.css è l'autorità grafica) ma caricano mobile.css da sole:
   qui SOLO layout/ordine mobile, niente reskin.
   Le griglie 3 colonne (mr-3col / pr-3col / cli-3col) collassano
   già a 1fr ≤760px nelle pagine: qui si sistemano ordine, sticky
   e rail → barra orizzontale scrollabile.
   =========================================================== */
@media (max-width: 900px) {
  /* layout interno a sidebar (pagine .mr-app) → colonna singola */
  .mr .mr-app{grid-template-columns:1fr!important}
}

@media (max-width: 760px) {
  /* niente overflow laterale, mai */
  body.mr,body.mrv2{overflow-x:hidden}
  body.mr .page-wrap,body.mrv2 .page-wrap,
  body.mr .main-content,body.mrv2 .main-content{min-width:0;max-width:100vw;box-sizing:border-box}
  /* gutter compatti (solo .mr: le .mrv2 sono governate da ui2-master-v2.css) */
  .mr .main-content{padding-left:.75rem!important;padding-right:.75rem!important}

  /* Colonne impilate: gli sticky delle colonne non hanno più senso */
  .mr .pr-col .mr-nav-card,
  .mr .cli-col .mr-nav-card,
  .mr.arch-form .mr-nav,
  .mr.arch-form .mr-aside,
  .mr .ana-nav-col,
  .mr .ana-aside-col,.mrv2 .ana-aside-col{position:static!important}

  /* Anteprima (colonna 3) SEMPRE in fondo allo stack */
  .mr .pr-3col .pr-preview{order:5}
  .mr .cli-3col .cli-col-preview{order:5}
  .mr .mr-3col .ana-aside-col,.mrv2 .mr-3col .ana-aside-col{order:5}

  /* Rail hub (pratiche/documenti-*): menu verticale → barra orizzontale
     scrollabile sopra il contenuto. Il :not([style*="none"]) preserva i
     toggle JS via style.display='none'. */
  .mr .pr-rail .rail-body{padding:6px!important}
  .mr .pr-rail .pr-menu:not([style*="none"]),
  .mr .pr-rail .pr-sez-list:not([style*="none"]){
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    gap:.4rem;
    padding:.35rem .4rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mr .pr-rail .pr-menu::-webkit-scrollbar,
  .mr .pr-rail .pr-sez-list::-webkit-scrollbar{display:none}
  .mr .pr-rail .pr-menu .pr-mi,
  .mr .pr-rail .pr-sez-list .pr-sec{
    flex:0 0 auto!important;
    width:auto!important;
    white-space:nowrap!important;
    min-height:42px;
  }
  .mr .pr-rail .pr-mi .mi-l{flex:0 0 auto!important}
  .mr .pr-rail .pr-menu .mr-divider{flex:0 0 auto;display:flex;align-items:center;margin:0 .25rem!important;white-space:nowrap}

  /* Anagrafica: tab scheda cliente (colonna 1) → chips orizzontali */
  .mr .ana-nav-body,.mrv2 .ana-nav-body{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    gap:.4rem;
    padding:.45rem .5rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mr .ana-nav-body::-webkit-scrollbar,.mrv2 .ana-nav-body::-webkit-scrollbar{display:none}
  .mr .ana-nav-body .ana-nav-link,.mrv2 .ana-nav-body .ana-nav-link{
    flex:0 0 auto!important;
    width:auto!important;
    white-space:nowrap!important;
    min-height:42px;
  }

  /* Tabelle dentro pagine MR: scroll orizzontale contenuto, mai overflow pagina */
  .mr table:not(.no-mobile-scroll),
  .mrv2 table:not(.no-mobile-scroll){
    display:block;
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}

/* Proposta/Contratto (mrv2): stack 1 colonna. NB: ui2-master-v2.css è in
   lavorazione parallela — regola minima e idempotente, solo layout. */
@media (max-width: 900px) {
  .mrv2 .prop-3col{display:grid!important;grid-template-columns:1fr!important}
  .mrv2 .prop-nav,.mrv2 .prop-aside{position:static!important}
  .mrv2 .prop-aside{order:5}
}

/* nav-footer (wizard legacy): safe-area sotto i bottoni */
@media (max-width: 640px) {
  body.gest-page-content .nav-footer{
    padding-bottom:calc(var(--app-page-gutter, .75rem) + env(safe-area-inset-bottom, 0px))!important;
  }
}

@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;
  }
}

/* =====================================================================
   ADATTAMENTO A TELEFONO E TABLET — regole strutturali
   (aggiunte dopo l'audit del 27/07/2026, misurato pagina per pagina)

   Questo foglio viene caricato PRIMA degli altri, quindi le regole qui
   devono essere dichiarate prevalenti per vincere su quelle di pagina.

   Tre schemi ricorrenti spiegavano quasi tutti i difetti trovati:
   1. griglie a due colonne che sulla carta collassano ma in pratica no,
      perché `1fr` si allarga fino al contenuto invece di stringersi;
   2. barre di bottoni che non vanno a capo e finiscono fuori schermo;
      3. testo e bersagli troppo piccoli per un dito.
   ===================================================================== */

@media (max-width: 900px) {
  /* --- 1. Le colonne laterali si impilano DAVVERO ---------------------
     `grid-template-columns:1fr` non basta: `1fr` vale `minmax(auto,1fr)`
     e `auto` non scende sotto la larghezza minima del contenuto. Bastava
     una riga di filtri che non andava a capo perché la colonna diventasse
     larga 868px dentro uno schermo da 390, con i filtri irraggiungibili.
     `minmax(0,1fr)` toglie quel pavimento. */
  .scad-2col, .dd-2col, .mr-2col, .admin-2col,
  [class*="-2col"], [class*="-3col"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .scad-rail, .dd-rail, aside[class*="rail"], .mr-nav-card, .rail-body {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Le intestazioni dei pannelli filtro: possono andare a capo. */
  .mr-nav-h { flex-wrap: wrap !important; }

  /* --- 2. Le barre di comandi vanno a capo ---------------------------
     `display:flex` senza `flex-wrap` tiene tutto su una riga: su schermo
     stretto i bottoni escono dal bordo e non si raggiungono più.
     Restano esclusi i gruppi che devono stare in riga per forza
     (campo+bottone uniti, e chi lo dichiara esplicitamente). */
  .d-flex:not(.flex-nowrap):not(.input-group):not([class*="no-wrap"]) {
    flex-wrap: wrap !important;
  }
  .btn-group:not(.btn-group-vertical) { flex-wrap: wrap !important; }

  /* Nessun elemento deve essere più largo dello schermo. */
  img, video, canvas, svg, iframe, pre, textarea { max-width: 100% !important; }
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }
}

@media (max-width: 820px) {
  /* --- 3. Leggibilità e bersagli --------------------------------------
     Sotto gli 11 px il testo non si legge in mano; sotto i 32 px il dito
     non lo prende. Sono le soglie delle linee guida di accessibilità. */
  body, body * { -webkit-text-size-adjust: 100%; }
  /* Stesso principio del pavimento: `0.78em` si misura sul genitore, così queste voci restano
     più piccole del corpo del testo senza mai scendere sotto la soglia di leggibilità. */
  .mini, .small, .riga-sub, .chip, .tag, .badge {
    font-size: max(11.5px, 0.78em) !important;
  }
  button, a.btn, .btn, select, summary, [role="button"],
  input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
    min-height: 32px !important;
  }
  /* I bottoni con la sola icona restano quadrati, ma prendibili. */
  .icon-btn, .btn-icon, button.icon-only { min-width: 32px !important; }

  /* Campi: mai sotto i 16px, altrimenti iOS ingrandisce la pagina da solo
     quando ci si scrive dentro, e da lì nasce lo scorrimento laterale. */
  input, select, textarea { font-size: max(16px, 0.95rem) !important; }
}

/* Il contenitore inserito dal salvagente (app-sidebar.js) per rendere
   raggiungibile ciò che sarebbe tagliato: si scorre col dito. */
.mob-scorri {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   Secondo giro (misurato): restavano bottoni che sforavano di pochi pixel,
   testo sotto gli 11 px e bersagli alti 17 px.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Un bottone con l'etichetta lunga («Persona giuridica», «Dall'utile netto → canone»)
     tiene tutto su una riga e sfora. Su schermo stretto il testo può andare a capo. */
  button, .btn, a.btn, .mode-btn, .seg-btn, .pill-btn {
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  /* Le barre di azione con classi proprie (non `.d-flex`) vanno a capo anche loro. */
  .scad-actions, .actions, .toolbar, .btn-row, [class*="-actions"], [class*="-toolbar"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 820px) {
  /* Leggibilità: sotto gli 11,5 px non si legge in mano. Le voci più piccole misurate erano
     8,7 px (note) e 9,9 px (etichette dei prezzi).
     ⚠️ Questa deve essere un PAVIMENTO, non una dimensione fissa: al primo tentativo avevo
     scritto `max(11px, 0.7rem)`, cioè un valore assoluto, e il testo che stava già bene è
     stato RIMPICCIOLITO a 11,2 px — le voci illeggibili sono passate da 223 a 531.
     `0.8em` si misura sul genitore: il testo secondario resta più piccolo del corpo, ma non
     scende mai sotto la soglia. L'elenco è limitato alle classi realmente misurate: allargarlo
     significa cambiare la dimensione di mezza applicazione senza sapere dove. */
  small, code, .stato, .tar-badge, .ti-desc, .set-hint, .email-date, .badge-tipo,
  [class*="-hint"], [class*="-note"] {
    font-size: max(11.5px, 0.8em) !important;
    line-height: 1.35 !important;
  }

  /* Bersagli: le caselle di spunta e i bottoni-icona devono essere prendibili col dito. */
  input[type="checkbox"], input[type="radio"] {
    min-width: 20px !important; min-height: 20px !important;
  }
  .icon-btn, .btn-icon, .mrte-dot, button:has(> i:only-child), a:has(> i:only-child) {
    min-width: 32px !important; min-height: 32px !important;
  }
  /* I collegamenti dentro elenchi e tabelle sono righe d'azione, non testo corrente:
     un po' di respiro sopra e sotto li rende prendibili senza spostare nulla. */
  li > a, td > a, .riga a, .list a, .mr-nav-card a, .card a:not(.btn) {
    display: inline-block;
    padding-block: 6px;
  }
  /* Le intestazioni ordinabili delle tabelle sono comandi a tutti gli effetti. */
  .sortable, [class*="sortable"] { min-height: 30px; display: inline-flex; align-items: center; }
}

/* Terzo giro: gli ultimi elementi che restavano tagliati di pochi pixel.
   Sono tutti gruppi con classi proprie che non andavano a capo, o etichette
   che non si spezzavano. */
@media (max-width: 900px) {
  .scad-actions, .scad-actions > *,
  .mode-btn, .mode-row, .fisco-row,
  span.d-flex, .firma-actions, [class*="firma"] .d-flex {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
  /* Le frecce e i separatori decorativi non devono allargare la riga. */
  .arrow, .sep, .divider-arrow { flex: 0 0 auto; }
  /* Etichette lunghe dentro i comandi: possono spezzarsi. */
  #btnFiscoLabel, .btn span, .mode-btn span { overflow-wrap: anywhere; }
  /* Le note fra parentesi accanto alle etichette (anagrafica: «precompilato
     dall'AI…») allargavano la riga: vanno a capo sotto l'etichetta. */
  label small, .form-label small, .ai-field-label small { display: block; margin-top: 2px; }
}

/* Quarto giro. I collegamenti dentro gli elenchi sono righe d'azione, non testo corrente:
   alti 17 px non si prendono col dito. Si dà loro respiro verticale, lasciando fuori i
   collegamenti dentro un paragrafo, che devono restare in linea con la frase. */
@media (max-width: 820px) {
  /* 8 px sopra e sotto, non 6: un collegamento di testo alto 17 px arriva così a 33 px, cioè
     sopra la soglia dei 32. Con 6 px si fermava a 29 e restava difficile da prendere. */
  a:not(.btn):not(.nav-link):not([class*="fab"]) {
    display: inline-block;
    padding-block: 8px;
  }
  p a, label a, small a, .mini a, td a[class*="inline"] {
    display: inline !important;
    padding-block: 0 !important;
  }
}

/* Quinto giro: gli ultimi sei elementi che restavano tagliati, presi uno per uno.
   Sono tutte righe che tengono insieme cose che su schermo stretto devono separarsi. */
@media (max-width: 900px) {
  .scad-actions { display: flex !important; flex-wrap: wrap !important; gap: .4rem; }
  .scad-actions > * { flex: 1 1 auto; min-width: 0; }
  /* La nota fra parentesi accanto all'etichetta («precompilato dall'AI…») allargava la riga:
     va sotto l'etichetta, non di fianco. */
  .ai-field-label small, .form-label small, .summary-label small,
  label + small, .ai-field-label .text-muted { display: block !important; margin-top: 2px; }
  /* Frecce e separatori decorativi non devono allargare la riga che li contiene. */
  .arrow, .sep { flex: 0 0 auto !important; max-width: 100% !important; }
  /* Le etichette dentro i bottoni possono spezzarsi invece di allargarli. */
  #btnFiscoLabel, .btn > span, .mode-btn > span { overflow-wrap: anywhere !important; min-width: 0 !important; }
  /* Coppie di bottoni tenute in riga da uno `span.d-flex`. */
  span.d-flex { flex-wrap: wrap !important; max-width: 100% !important; }
  /* …e le loro etichette possono andare a capo: se il bottone più largo resta più largo
     del contenitore, mandare a capo la coppia non basta (caso «Riusa firma salvata»). */
  span.d-flex > .btn { white-space: normal !important; max-width: 100% !important; }

  /* Riga compatta di Incassi/Scadenze: cliente · importo · scadenza · azioni.
     La pagina dichiara `.scad-compact .scad-actions{flex-shrink:0}`, quindi i tre bottoni
     non si stringevano e uscivano dal bordo di 4-8 px — tagliati, cioè non premibili.
     Qui la riga può andare a capo e le colonne di testo possono stringersi. */
  .scad-compact { flex-wrap: wrap !important; }
  .scad-compact > * { min-width: 0 !important; }
  .scad-compact .scad-actions { flex-shrink: 1 !important; margin-left: auto !important; }

  /* Campi di ricerca degli elenchi: erano alti 30 px, sotto la presa del dito.
     Regola stretta e misurata: tocca solo `input[type=search]`. */
  input[type="search"] { min-height: 34px !important; }

  /* ⚠️ QUI NON VANNO ALTRE RETI LARGHE. Provate e RIMOSSE il 27/07 perché peggioravano
     le misure invece di migliorarle (testo illeggibile 263→317, bersagli piccoli 771→781):
       - `input[type=checkbox]{width:24px}` + `label:has(>input)` a flex con altezza minima:
         ingrandire le spunte a tappeto rimpicciolisce e manda a capo il testo intorno;
       - `label.form-label > span.d-flex{flex:1 1 100%}` e `.pr-mi{flex-wrap:wrap}` per gli
         ultimi due tagli: non hanno spostato di un pixel i 30 px e i 5 px che restano.
     Gli ultimi difetti si chiudono pagina per pagina, guardandole; non con selettori
     generici. È la stessa lezione del pavimento dei caratteri: una regola larga che sembra
     ovvia sposta più di quello che ripara. */
}

/* ---------------------------------------------------------------------
   La griglia a 3 colonne dell'anagrafica NON collassava.
   `anagrafica.html` la dichiara inline, senza media query e con
   `!important`: batteva sia `design-system/mr.css` (che a ≤900px la
   porterebbe a 1fr) sia le regole generiche di questo foglio, perché
   quest'ultimo è caricato PRIMA e a parità di peso vince chi arriva dopo.
   Risultato su telefono: le tre colonne restavano affiancate dentro
   390 px — `170px 98,8px 69,2px` — e la scheda di compilazione si
   riduceva a 99 px, con il testo a capo una lettera per riga.
   Qui si aggiunge `html` davanti per superarla di specificità.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  html body.mr.arch-form .main-content.mr-3col,
  html body.mrv2.arch-form .main-content.mr-3col,
  html body.ana-col3-collapsed .main-content.mr-3col,
  html body.mr.arch-form.ana-col3-collapsed .main-content.mr-3col,
  html body.mrv2.arch-form.ana-col3-collapsed .main-content.mr-3col,
  html body .main-content.mr-3col,
  html body .main-content.pr-3col,
  html body .main-content.cli-3col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Impilate, la colonna dell'anteprima va in fondo e il binario laterale
     non ha più senso come colonna stretta. */
  html body .main-content.mr-3col > .ana-aside-col { order: 5; }
  html body .main-content.mr-3col > * { min-width: 0 !important; max-width: 100% !important; }
}