/* L'attributo hidden non e' una garanzia: funziona solo perche' il foglio di stile del BROWSER
   dice [hidden]{display:none}, ed e' una regola dell'agente utente che QUALUNQUE nostra regola con
   un display batte. E' gia' costato due volte: le quattro velature dell'agenda restavano accese da
   quando si apriva la pagina (.ag-pop imponeva display:flex) e il pallino rosso delle notifiche si
   vedeva sempre, anche con zero da leggere (.badge impone display:inline-flex). Questa riga chiude
   la classe intera, anche per il prossimo che scrivera' un display su un elemento che si nasconde. */
[hidden]{display:none !important}
:root{--navy:#1b2440;--red:#e01e2b;--ink:#141a2e;--bg:#eef1f7;--card:#fff;--muted:#7c8598;--line:#e4e8f0}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
/* base coerente per TUTTI i controlli form (poi le regole più specifiche possono sovrascrivere) */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=month],input[type=search],input[type=number],input[type=tel],input[type=url],input:not([type]),select,textarea{
  padding:10px 13px;border:1px solid var(--line);border-radius:10px;font-size:.92rem;font-family:inherit;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(224,30,43,.14)}
textarea{resize:vertical}
/* ===== LAYOUT: sidebar sinistra + shell ===== */
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:238px;background:var(--navy);color:#fff;display:flex;flex-direction:column;z-index:40;overflow:hidden}
.navgroups::-webkit-scrollbar{width:8px}.navgroups::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.brand{display:flex;align-items:center;gap:12px}
.sidebar .brand{padding:20px 16px 16px;position:sticky;top:0;background:var(--navy);z-index:1}
.drop{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(45deg);background:linear-gradient(135deg,#ff3b46,#c00000);flex:0 0 auto}
.brandtext b{font-style:italic;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.brandtext .red{color:var(--red);font-style:italic;font-weight:800}
.brandtext small{display:block;font-size:.54rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.sidebar .brandtext b{color:#fff}
.sidebar .brandtext small{color:#8ea0c8}
.navgroups{display:flex;flex-direction:column;padding:2px 12px 14px;flex:1 1 auto;overflow-y:auto;min-height:0}
.navgroup{display:flex;flex-direction:column;gap:2px;padding:5px 0}
.navgroup p{margin:6px 10px 4px;font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;color:#6b789c;font-weight:700}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:#c3ccdf;font-weight:600;font-size:.88rem;border-left:3px solid transparent;transition:background .12s,color .12s}
.navitem .ni-ic{width:20px;text-align:center;font-size:.95rem;flex:0 0 auto}
.navitem:hover{background:rgba(255,255,255,.06);color:#fff}
.navitem.active{background:rgba(224,30,43,.16);color:#fff;border-left-color:var(--red)}
.scrim{display:none}
.content{margin-left:238px;min-height:calc(100vh - 56px)}
/* top bar a tutta larghezza, sopra la sidebar */
.topbar{display:flex;align-items:center;gap:14px;height:56px;padding:0 22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbrand .drop{width:24px;height:24px}
.topbrand .brandtext b{font-size:1.02rem}
.topbrand .brandtext small{font-size:.5rem;margin-top:1px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{position:relative;width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);line-height:0}
.iconbtn:hover{background:#f4f6fb;color:var(--red)}
.iconbtn svg{display:block}
.iconbtn .badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
.avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#243059,#141b38);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;letter-spacing:.01em;flex:0 0 auto;user-select:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
a.avatar{transition:box-shadow .12s,transform .12s}
a.avatar:hover{box-shadow:0 0 0 3px rgba(224,30,43,.22)}
.avatar.sm{width:30px;height:30px;font-size:.72rem}
/* piede sidebar: utente + sessioni + esci */
.sidebar-foot{margin-top:auto;padding:12px 12px 14px;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:3px}
.sidebar-foot .me{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:2px;border-radius:10px;min-width:0;transition:background .12s}
.sidebar-foot .me:hover{background:rgba(255,255,255,.06)}
.sidebar-foot .metx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.sidebar-foot .me-go{color:#6b789c;font-size:1.2rem;font-weight:700;flex:0 0 auto;line-height:1}
.sidebar-foot .me:hover .me-go{color:#c3ccdf}
.sidebar-foot .metx b{color:#fff;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sidebar-foot .metx small{color:#8ea0c8;font-size:.6rem;text-transform:uppercase;letter-spacing:.09em}
.footlink{display:block;padding:9px 11px;border-radius:10px;color:#c3ccdf;font-weight:600;font-size:.85rem;background:none;border:0;text-align:left;width:100%;cursor:pointer;font-family:inherit}
.footlink:hover{background:rgba(255,255,255,.06);color:#fff}
.footlink.logout{color:#ff9ba1}
.footlink.logout:hover{background:rgba(224,30,43,.16);color:#fff}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:32px 32px 90px}
.eyebrow{color:var(--red);text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;font-weight:700;margin:0 0 8px}
.eyebrow2{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;font-weight:700;margin:0 0 14px}
.display{font-size:clamp(2.3rem,6vw,3.8rem);font-style:italic;font-weight:800;color:var(--navy);letter-spacing:-.02em;text-transform:uppercase;line-height:.98;margin:0 0 24px}
.searchbar input{width:100%;padding:20px 24px;border:1px solid var(--line);border-radius:16px;font-size:1rem;background:#fff;box-shadow:0 6px 24px rgba(20,26,46,.05);font-family:inherit}
.toolbar{margin:18px 0 6px;display:flex;gap:10px}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;padding:12px 20px;border-radius:12px;font-weight:700;cursor:pointer;font-size:.9rem;font-family:inherit}
.btn:hover{background:#111a33}
.btn.small{padding:8px 14px;font-size:.82rem;border-radius:10px}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 22px rgba(20,26,46,.05);transition:.15s;display:block}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,26,46,.1)}
.pill{display:inline-block;background:#fdeaec;color:var(--red);font-size:.64rem;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:20px;margin-bottom:14px}
.card h3{font-style:italic;font-weight:800;color:var(--navy);text-transform:uppercase;font-size:1.12rem;margin:.2rem 0}
.muted{color:var(--muted)}
.cardfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tag{font-size:.72rem;font-weight:700;color:var(--muted)}
.tag.attivo{color:#12b76a}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.panel.dark{background:var(--navy);color:#fff}
.panel.dark .eyebrow2{color:#8ea0c8}
.dtgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dtgrid small{display:block;color:#8ea0c8;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.dtgrid b{font-size:1.02rem}
.dtgrid b.on{color:#12e29a}
.pdr{margin-top:18px;background:var(--red);border-radius:12px;padding:14px 18px}
.pdr small{color:#ffd7da;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:2px}
.pdr b{font-size:1.15rem}
.mapph{height:250px;border-radius:12px;background:repeating-linear-gradient(45deg,#e3e9f4,#e3e9f4 12px,#dde4f1 12px,#dde4f1 24px);display:grid;place-items:center;color:var(--muted);font-size:.9rem}
/* Leaflet: i suoi z-index interni (pane 200-700, controlli fino a 1000) vanno confinati
   in un contesto d'impilamento proprio, altrimenti la mappa copre topbar (z20) e sidebar (z40). */
.leaflet-container{position:relative;z-index:0}
.complist{list-style:none;padding:0;margin:0 0 16px}
.complist li{padding:11px 0;border-bottom:1px solid var(--line)}
.complist li:last-child{border:0}
.form{max-width:460px;display:flex;flex-direction:column;gap:14px}
.form.wide{max-width:660px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:600;color:#4b5468}
.form input,.form select,.form textarea{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{flex-direction:row!important;align-items:center;gap:8px!important}
.check input{width:auto}
.logincard{max-width:420px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:40px;box-shadow:0 20px 60px rgba(20,26,46,.12)}
.error{background:#fdeaec;color:#c00;padding:10px 14px;border-radius:10px;font-size:.85rem;margin-bottom:6px}
.back{color:var(--muted);font-size:.85rem;font-weight:600;display:inline-block;margin-bottom:16px}
.back:hover{color:var(--red)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.inline-form input,.inline-form select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.8rem;font-family:inherit}
/* contenitore che tiene la tabella dentro il pannello (scorre in orizzontale se troppo larga) */
.tablewrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;background:#fff}
.tablewrap table.list{border:0;border-radius:0}
.tablewrap table.list td.acts{white-space:nowrap}
.tablewrap table.list td.acts form{display:inline}
table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
table.list th{text-align:left;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--line)}
table.list td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.9rem}
table.list tr:last-child td{border:0}
table.list a{color:var(--navy);font-weight:600}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.7rem;font-weight:700}
.badge.p1{background:#fde8e8;color:#c00}.badge.p2{background:#fff4e0;color:#b7791f}.badge.p3{background:#e8f5ec;color:#12855a}
@media(max-width:720px){.grid2,.dtgrid,.row{grid-template-columns:1fr}.serverstatus{gap:10px}}
.statusbar{display:flex;align-items:center;gap:14px;margin:-8px 0 20px;flex-wrap:wrap}
.statusbar .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* header di pagina coerente: titolo a sinistra, azione primaria a destra */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.pagehead .htitle{min-width:0}
.pagehead .htitle .display{margin:0}
.pagehead .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto}
/* riga di ricerca lista */
.searchrow{display:flex;gap:8px;align-items:center;margin:14px 0 14px;flex-wrap:wrap}
.searchrow .searchfield{position:relative;flex:1 1 320px;max-width:520px}
.searchrow .searchfield input{width:100%;padding-left:38px}
.searchrow .searchfield::before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.55;pointer-events:none}
.searchrow .hint{color:var(--muted);font-size:.8rem}
.tag.accettata,.tag.attivo{color:#12b76a}.tag.inviata{color:#b7791f}.tag.bozza,.tag.da_assegnare{color:#7c8598}
.warnpct{color:#c00;font-weight:700}
.list td.right,.list th.right{text-align:right}

/* --- mobile: sidebar off-canvas + hamburger --- */
#navtoggle{display:none}
.hamburger{display:none}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;width:260px;box-shadow:0 0 40px rgba(0,0,0,.35)}
  #navtoggle:checked ~ .sidebar{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(9,14,30,.5);z-index:35;opacity:0;pointer-events:none;transition:opacity .22s}
  #navtoggle:checked ~ .scrim{opacity:1;pointer-events:auto}
  .content{margin-left:0}
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:6px 4px;flex:0 0 auto}
  .hamburger span{width:24px;height:2px;background:var(--navy);border-radius:2px}
  .topbar{padding:0 12px;gap:10px}
  .topbrand .brandtext small{display:none}
  .wrap{padding:24px 18px 70px}
  .display{font-size:2.15rem}
  .grid2,.dtgrid,.row{grid-template-columns:1fr}
  .searchbar input{padding:16px 18px}
}
@media(max-width:520px){ .serverstatus .status{display:none} }
.tag.accettato{color:#12b76a}.tag.inviato,.tag.inviata{color:#b7791f}.tag.rifiutato,.tag.rifiutata{color:#c0392b}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:10px 0}
.kpi .box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.kpi .box.hl{background:var(--navy);color:#fff}
.kpi small{display:block;color:var(--muted);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.kpi .box.hl small{color:#8ea0c8}
.kpi b{font-size:1.3rem}
.linkbtn{background:none;border:0;color:#c0392b;cursor:pointer;font-size:.85rem;padding:0 4px}
input[type=file]{font-size:.8rem}

/* === mobile: tabelle a scorrimento interno (niente zoom-out della pagina) === */
@media(max-width:760px){
  table.list{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
  table.list th,table.list td{white-space:nowrap}
  .logincard{padding:30px 22px;margin:6vh auto}
  .panel{padding:18px}
  .statusbar .actions{margin-left:0}
  .display{overflow-wrap:anywhere}
  .kpi{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){ .kpi{grid-template-columns:1fr} }

/* === barra avanzamento PDF (trickle) === */
#cprog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#ff414c,#e01e2b);z-index:99999;opacity:0;transition:width .3s ease,opacity .35s ease;box-shadow:0 0 8px rgba(224,30,43,.6)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cspin .7s linear infinite;vertical-align:-2px}
.btn.ghost .spin{border-color:rgba(27,36,64,.28);border-top-color:var(--navy)}
.btn.busy{opacity:.75;pointer-events:none}
@keyframes cspin{to{transform:rotate(360deg)}}

/* === input file custom (no bottone nativo) === */
.filefield{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative}
.filefield input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filefield .fakebtn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy);border:1px solid var(--line);padding:9px 15px;border-radius:10px;font-weight:700;font-size:.82rem;cursor:pointer}
.filefield .fakebtn:hover{border-color:var(--navy)}
.filefield .filename{font-size:.8rem;color:var(--muted);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== feel nativo al tocco (touch) — desktop invariato ===== */

/* via l'"ombretta" grigia iOS + tap senza ritardo su tutti i controlli */
a, button, .btn, .card, .mainnav a, .hamburger, .back, .linkbtn, .fakebtn, select, label.check {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* niente menu contestuale iOS (anteprima link "Apri/Copia link…") né selezione testo
   al long-press SUI CONTROLLI e SULLE VOCI DI NAVIGAZIONE (non sul contenuto) */
.btn, button, .mainnav a, .navitem, a.card, .brand, .hamburger, .back, .linkbtn, .fakebtn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* feedback "premuto" immediato (breve; vale desktop e mobile, non rompe nulla) */
.btn { transition: transform .08s ease, filter .08s ease, background .15s ease; }
.btn:active { transform: scale(.97); filter: brightness(.93); }
.card { transition: transform .12s ease, box-shadow .15s ease; }
.card:active { transform: scale(.985); }
.mainnav a:active, .back:active, .linkbtn:active, .brand:active { opacity: .55; }
.fakebtn:active { background: #eef1f7; transform: scale(.98); }
.hamburger:active { opacity: .5; }

/* SOLO su touch: niente hover "appiccicato" dopo il tap. Il desktop (hover:hover) non è toccato. */
@media (hover: none) {
  .btn:hover { background: var(--navy); }
  .card:hover { transform: none; box-shadow: 0 6px 22px rgba(20,26,46,.05); }
  .mainnav a:hover { color: #4b5468; }
  .back:hover { color: var(--muted); }
  .fakebtn:hover { border-color: var(--line); }
}

/* feedback tocco: classe messa da JS (iOS non fa scattare :active in modo affidabile) */
.btn.is-pressed { transform: scale(.97); filter: brightness(.93); }
.card.is-pressed { transform: scale(.985); }
.mainnav a.is-pressed, .back.is-pressed, .linkbtn.is-pressed, .brand.is-pressed { opacity: .55; }
.fakebtn.is-pressed { background: #eef1f7; transform: scale(.98); }
.hamburger.is-pressed { opacity: .5; }

/* ============ Sensazione "app iOS" (progressive enhancement, degrada ovunque) ============ */

/* (Le cross-document View Transitions sono state rimosse: sfumavano l'intera pagina,
   sidebar inclusa, con un flash bianco che distraeva dal contenuto. Navigazione diretta.) */

/* 2) Topbar "vetro smerigliato" (solo dove il blur è supportato — iOS Safari sì;
      altrove resta il #fff pieno definito sopra). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}

/* 3) Niente zoom-on-focus di iOS: i campi devono essere ≥16px su mobile. */
@media (max-width: 820px) {
  input, select, textarea,
  .form input, .form select, .form textarea,
  .inline-form input, .inline-form select { font-size: 16px; }
}

/* 4) Overscroll da app: niente rimbalzo/pull-to-refresh della pagina; drawer e typeahead contenuti. */
html, body { overscroll-behavior-y: none; }
.sidebar, .ta-box { overscroll-behavior: contain; }

/* 5) Scroll-lock: col menu a tendina aperto la pagina dietro non scrolla (classe messa da JS). */
body.nav-open { overflow: hidden; }

/* ---------- Paginazione liste ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:16px 2px 4px;font-size:.86rem}
.pager .pinfo{color:var(--muted)}
.pager .pinfo b{color:var(--navy)}
.pager .pgs{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.pager .pg{min-width:34px;text-align:center;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);text-decoration:none;font-weight:700;line-height:1}
.pager a.pg:hover{border-color:var(--navy);background:#f6f8fd}
.pager .pg.cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .pg.dots{border:0;background:transparent;color:var(--muted);min-width:auto;padding:7px 2px;pointer-events:none}
@media(max-width:640px){.pager{justify-content:center}.pager .pgs{margin-left:0}}

/* ---------- Typeahead (autocomplete campi grandi) ---------- */
.ta-wrap{position:relative;display:block}
.ta-box{position:absolute;top:100%;left:0;right:0;z-index:60;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;box-shadow:0 8px 22px rgba(18,32,63,.12);max-height:280px;overflow-y:auto}
.ta-item{padding:9px 12px;cursor:pointer;font-size:.9rem;border-bottom:1px solid #f2f4f9}
.ta-item:last-child{border-bottom:0}
.ta-item.on,.ta-item:hover{background:#f2f6ff;color:var(--navy)}
input.typeahead{width:100%}

/* ===== Dialoghi personalizzati (csConfirm / csAlert) ===== */
.btn.danger{background:var(--red);color:#fff;border:0}
.btn.danger:hover{background:#b81622}
body.cs-modal-open{overflow:hidden}
.cs-modal-back{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(16,20,36,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .16s}
.cs-modal-back.show{opacity:1}
.cs-modal{width:100%;max-width:420px;background:#fff;border-radius:18px;box-shadow:0 26px 64px rgba(16,20,36,.4);overflow:hidden;border-top:4px solid var(--navy);transform:translateY(10px) scale(.98);transition:transform .18s}
.cs-modal.danger{border-top-color:var(--red)}
.cs-modal-back.show .cs-modal{transform:none}
.cs-modal-bd{padding:24px 24px 6px}
.cs-modal h3{margin:0 0 8px;font-size:1.12rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.cs-modal p{margin:0;color:#4a5570;font-size:.95rem;line-height:1.5;white-space:pre-line}
.cs-modal-ft{display:flex;gap:10px;justify-content:flex-end;padding:18px 24px 20px}
@media(max-width:480px){.cs-modal-ft{flex-direction:column-reverse}.cs-modal-ft .btn{width:100%}}

/* ===== Notifiche: campanella dropdown + inbox ===== */
.notifwrap{position:relative;display:flex}
.notifmenu{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(16,20,36,.22);z-index:60;overflow:hidden}
.nm-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.nm-head b{font-size:.95rem;color:var(--navy)}
.nm-allread{background:none;border:0;color:var(--red);font-weight:700;font-size:.76rem;cursor:pointer;font-family:inherit;padding:4px}
.nm-list{max-height:min(62vh,430px);overflow-y:auto}
.nm-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:.88rem}
.nm-foot{display:block;text-align:center;padding:12px;border-top:1px solid var(--line);color:var(--navy);font-weight:700;font-size:.83rem}
.nm-foot:hover{background:#f4f6fb}
/* item notifica (condiviso: dropdown + pagina /notifiche) */
.ni{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid #f2f4f9}
.ni:hover{background:#f7f9fd}
.ni-ic{font-size:1.15rem;flex:0 0 auto;line-height:1.35;width:22px;text-align:center}
.ni-bd{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.ni-bd b{font-size:.9rem;color:var(--navy);font-weight:700;line-height:1.25}
.ni-co{font-size:.82rem;color:#4a5570;line-height:1.35}
.ni-tm{font-size:.71rem;color:var(--muted);margin-top:3px}
.ni-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 auto;margin-top:6px}
.ni.unread{background:#fbfcff}
.notif-list{list-style:none;margin:0;padding:0}
.notif-list .ni{padding:14px 18px}
.notif-list li:last-child .ni{border-bottom:0}

/* --- SCR: badge categorie nota d'impianto --- */
.badge.nota-accesso{background:#e7efff;color:#2f6fed}
.badge.nota-sicurezza{background:#fde7e7;color:#c0392b}
.badge.nota-criticita_impianto{background:#fdf0e6;color:#a8621f}
.badge.nota-buona_pratica{background:#e3f7e8;color:#1a7f37}
.badge.nota-storia_guasto{background:#f0ebfb;color:#6b4bbd}

/* === Niente scorrimento orizzontale di TUTTA la pagina =======================
   Bastava una riga troppo larga — una tabella, una barra di bottoni, un numero
   senza spazi — perche' sul telefono scorresse di lato l'intera applicazione,
   barra in alto compresa: si leggeva una tabella e intanto spariva il titolo.

   Qui si fanno due cose distinte e servono entrambe. La prima e' una rete: il
   guscio non scorre mai, cosi' la topbar resta dov'e' qualunque cosa succeda
   sotto. Si usa `clip` e non `hidden` perche' `hidden` crea un contesto di
   scorrimento e romperebbe il `position:sticky` proprio della topbar.
   La seconda e' il rimedio vero: il contenuto largo deve scorrere DENTRO il suo
   riquadro. Solo la rete non basterebbe — taglierebbe il dato invece di
   mostrarlo, ed e' peggio del difetto, perche' sparisce senza dirlo. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* Figli di griglie e flex: senza questo la loro larghezza minima e' il
   contenuto minimo, quindi un IBAN, un codice o un indirizzo lungo allarga la
   colonna oltre lo schermo e spinge fuori tutto il resto. E' la causa piu'
   frequente: sei pagine su cinquantuno sforavano, e quasi tutte per questo. */
.wrap :where(.crusc, .kpi, .kpis, .grid2, .dtgrid, .row, .panel, .actions,
             .inline-form, .pagehead, .statusbar) > * { min-width: 0; }

@media (max-width: 760px) {
  /* Le barre di bottoni vanno a capo invece di uscire dallo schermo. */
  .wrap .actions, .wrap .inline-form, .wrap .pagehead, .wrap .statusbar,
  .wrap .toolbar, .wrap .filtri { flex-wrap: wrap; }
  /* Campi, tendine e bottoni non superano mai il loro contenitore. */
  .wrap input, .wrap select, .wrap textarea, .wrap .btn { max-width: 100%; }
  /* Cio' che resta largo per forza — tabelle a colonne fisse, blocchi
     preformattati, riquadri incorporati — scorre da solo, dentro il suo bordo. */
  .wrap pre, .wrap iframe, .wrap .tablewrap, .wrap .panel > table { max-width: 100%; overflow-x: auto; }
  /* Testi senza spazi (codici commessa, IBAN, e-mail lunghe) vanno a capo
     invece di spingere la colonna che li contiene. */
  .wrap .kpi b, .wrap .kpis b, .wrap .display, .wrap h1, .wrap h2,
  .wrap .kpi-sub, .wrap .eyebrow2 { overflow-wrap: anywhere; }

  /* La barra dei bottoni della testata prende tutta la riga. Aveva
     `flex:0 0 auto`, cioe' non si restringeva mai: il suo `flex-wrap` interno
     non entrava percio' mai in funzione e i bottoni restavano su una riga sola,
     larga quanto la loro somma. Su /letture/semaforo erano 563 px su 390. */
  .wrap .pagehead > .actions { flex: 1 1 100%; }

  /* Le griglie a colonne fisse scritte nelle singole viste si adattano. Sono
     poche e si chiamano tutte cosi'; se ne nasce un'altra, la rete qui sotto
     la fa scorrere invece di tagliarla. */
  .wrap .azf, .wrap .cfgrid, .wrap .formgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }

  /* La rete. Se qualcosa sfora lo stesso — una vista nuova, una tabella con
     colonne larghe, un contenuto che non prevediamo — l'area di contenuto
     scorre da sola. Serve perche' `overflow-x: clip` sul guscio da solo
     TAGLIEREBBE quel contenuto: la pagina resterebbe ferma, ma il dato
     sparirebbe senza dire a nessuno che c'era. Cosi' invece resta raggiungibile. */
  .content > .wrap { overflow-x: auto; }
}

/* ===== RIFINITURA INTERFACCIA FINALE =======================================
   Gerarchia, ritmo e superfici coerenti sulle viste definitive. */
:root{
  --navy:#18233d;--ink:#172033;--bg:#f1f4f9;--card:#fff;--muted:#68748a;
  --line:#dce3ee;--surface:#fff;--soft:#f7f9fc;--focus:rgba(224,30,43,.14);
  --shadow:0 1px 2px rgba(16,24,40,.03),0 10px 30px rgba(24,35,61,.055)
}
body{font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;padding:38px 38px 96px}
.wrap h1{margin:0;color:var(--navy);font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.035em}
.wrap h2{color:var(--navy);font-size:1.3rem;line-height:1.25;letter-spacing:-.015em;margin:0 0 12px}
.wrap h3{line-height:1.3}
.display{font-size:clamp(2.15rem,5vw,3.35rem);font-style:normal;text-transform:none;letter-spacing:-.045em;line-height:1.03;margin:0}
.eyebrow{letter-spacing:.16em;font-size:.68rem;margin-bottom:7px}
.back{min-height:40px;display:inline-flex;align-items:center;margin-bottom:14px}
.pagehead{align-items:center;margin:0 0 24px}
.pagehead .actions{margin-left:auto}
.statusbar{margin:0 0 22px}
.panel{border-color:var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.wrap>.panel+.panel,.record-page>.panel+.panel,.record-page>details.panel{margin-top:16px}
.panel>:first-child{margin-top:0}.panel>:last-child{margin-bottom:0}
.panel p,.panel li{line-height:1.55}
.panel ul{padding-left:20px}
.btn,button.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:12px;line-height:1.2;box-shadow:0 1px 1px rgba(16,24,40,.06)}
.btn.small,button.btn.small{min-height:40px;padding:8px 14px}
.btn.ghost{background:var(--card)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=month],input[type=search],input[type=number],input[type=tel],input[type=url],input:not([type]),select,textarea{
  min-height:44px;border-color:#cfd8e6;border-radius:12px;padding:10px 13px;line-height:1.35
}
textarea{min-height:96px}
label{color:#39445a}
.section-actions,.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.record-head{padding-bottom:4px}
.record-overview{margin-bottom:16px}
.record-grid{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);margin:0;column-gap:28px}
.record-grid dt,.record-grid dd{padding:13px 0;border-bottom:1px solid #edf0f5;margin:0;overflow-wrap:anywhere}
.record-grid dt{color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.025em}
.record-grid dd{color:var(--ink);font-weight:580}
.record-grid dt:nth-last-of-type(1),.record-grid dd:last-child{border-bottom:0}
.record-summary{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:16px 0}
.dependency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:16px 0}
.dependency-grid .panel{margin:0;box-shadow:none}
.stack-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:18px;max-width:820px}
.stack-form,.stack-form>*{min-width:0;max-width:100%}.stack-form{width:100%}
.stack-form input,.stack-form select,.stack-form textarea{width:100%;min-width:0}
.stack-form>label{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:700}
.stack-form>.check{grid-column:1/-1;display:flex!important;flex-direction:row!important;align-items:flex-start!important;font-weight:600;line-height:1.4;padding:4px 0}
.stack-form>.check input{width:20px;height:20px;min-height:20px;flex:0 0 auto;margin:1px 0 0}
.stack-form>.form-actions{grid-column:1/-1;margin:0}
.stack-form.compact{grid-template-columns:minmax(220px,460px) auto;align-items:end;max-width:650px}
.stack-form.compact>.btn{align-self:end}
.access-panel{border-left:4px solid #496a9f}
.danger-zone{border-left:4px solid var(--red)}
.danger-zone .btn.danger{background:var(--red)}
.finali-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:8px}
.finali-hub a{display:flex;align-items:center;justify-content:space-between;gap:18px;color:inherit;text-decoration:none;min-height:132px;transition:border-color .15s,box-shadow .15s,transform .15s}
.finali-hub a:hover{border-color:#b8c5d8;box-shadow:0 12px 34px rgba(24,35,61,.10);transform:translateY(-1px)}
.finali-hub h2{margin:0 0 7px;font-size:1.2rem}.finali-hub p{margin:0;line-height:1.45}
.hub-arrow{font-size:2rem;color:#9aa6b9;line-height:1}
.filter-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:0 0 18px;box-shadow:var(--shadow)}
.filter-grid{display:grid;grid-template-columns:minmax(240px,2fr) repeat(3,minmax(140px,1fr));gap:14px;align-items:end}
.filter-grid>label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:700;min-width:0}
.filter-grid>label input,.filter-grid>label select{width:100%}
.filter-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;grid-column:1/-1}
.filter-note{grid-column:1/-1;color:var(--muted);font-size:.85rem}
.list-summary{display:flex;gap:6px;color:var(--muted);font-size:.82rem;margin:12px 4px 0}.list-summary span{color:#929bad}
.tablewrap,.fm-scroll{border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);overflow:auto;-webkit-overflow-scrolling:touch}
.wrap table:not(.fo-agenda){width:100%;border-collapse:separate;border-spacing:0;background:var(--card)}
.wrap table:not(.fo-agenda) th{padding:13px 15px;border-bottom:1px solid var(--line);background:#f7f9fc;color:var(--muted);font-size:.67rem;font-weight:750;letter-spacing:.075em;text-align:left;text-transform:uppercase;vertical-align:bottom}
.wrap table:not(.fo-agenda) td{padding:14px 15px;border-bottom:1px solid #e9edf4;vertical-align:top;line-height:1.45}
.wrap table:not(.fo-agenda) tr:last-child>td{border-bottom:0}
.wrap table:not(.fo-agenda) a{color:var(--navy);font-weight:700}
.status-pill,.fm-stato{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;background:#edf2f8;color:#43516a;font-size:.76rem;font-weight:700;white-space:nowrap}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.fm-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin:18px 0;box-shadow:var(--shadow)}
.fm-note,.fm-error{padding:14px 16px;border-radius:12px;line-height:1.5}
.fm-note{background:#eef7f5;border-left:3px solid #43877b}.fm-error{background:#fff1eb;border-left:3px solid #c86a3f}
.fm-label{display:flex;flex-direction:column;gap:6px;font-weight:650;margin-top:12px}.fm-label input,.fm-label select,.fm-label textarea{display:block;width:100%}
.fm-small{font-size:.84em;color:var(--muted)}
.fm-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.fm-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 24px;padding:5px;background:#e7ecf4;border-radius:14px;width:max-content;max-width:100%}
.fm-nav a{padding:8px 12px;border-radius:10px;color:#43516a;font-size:.82rem;font-weight:700}.fm-nav a:hover{background:#fff;color:var(--navy)}
.fm-panel dl,.fm-grid dl{display:grid;grid-template-columns:minmax(130px,.45fr) minmax(0,1fr);margin:0;column-gap:18px}
.fm-panel dt,.fm-panel dd,.fm-grid dt,.fm-grid dd{padding:8px 0;margin:0;border-bottom:1px solid #edf0f5;overflow-wrap:anywhere}
.fm-panel dt,.fm-grid dt{color:var(--muted);font-size:.76rem;font-weight:700}.fm-panel dd,.fm-grid dd{font-weight:600}
.fo-nav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 22px}
.wrap>details:not(.panel),.record-page>details:not(.panel){background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px;margin:16px 0;box-shadow:var(--shadow)}
.wrap details>summary{cursor:pointer;color:var(--navy);font-weight:750;padding:17px 0;line-height:1.35}
.wrap>details[open]:not(.panel),.record-page>details[open]:not(.panel){padding-bottom:20px}

@media(max-width:900px){
  .wrap{padding:28px 20px 80px}
  .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .wrap{padding:22px 16px calc(72px + env(safe-area-inset-bottom))}
  .wrap h1{font-size:2rem}.display{font-size:2.25rem}
  .pagehead{align-items:flex-start;margin-bottom:20px}.pagehead .actions{width:100%;margin-left:0}.pagehead .actions .btn{flex:1 1 auto}
  .panel{padding:20px;border-radius:18px}
  .record-grid{grid-template-columns:1fr;gap:0}
  .record-grid dt{grid-column:1;padding:13px 0 2px;border-bottom:0}
  .record-grid dd{grid-column:1;padding:0 0 13px}
  .record-grid dd:last-child{padding-bottom:0}
  .stack-form,.stack-form.compact{grid-template-columns:1fr;max-width:none}
  .stack-form>.check,.stack-form>.form-actions{grid-column:1}
  .stack-form .btn,.stack-form.compact>.btn{width:100%}
  .dependency-grid,.finali-hub{grid-template-columns:1fr}
  .finali-hub a{min-height:112px;padding:20px}
  .filter-grid{grid-template-columns:1fr}.filter-actions,.filter-note{grid-column:1}.filter-actions .btn{flex:1 1 140px}
  .fm-nav{width:100%;overflow-x:auto;flex-wrap:nowrap}.fm-nav a{white-space:nowrap}
  .fm-panel dl,.fm-grid dl{grid-template-columns:1fr}.fm-panel dt,.fm-grid dt{padding-bottom:0;border-bottom:0}.fm-panel dd,.fm-grid dd{padding-top:2px}
  .wrap .fo-nav{overflow-x:auto;flex-wrap:nowrap;margin-left:-16px;margin-right:-16px;padding:0 16px 8px;scrollbar-width:none}.fo-nav::-webkit-scrollbar{display:none}
  .fo-nav .btn{width:auto;flex:0 0 auto;white-space:nowrap;box-shadow:none}
  .fm-panel{padding:20px;border-radius:18px}
  .tablewrap:has(table.mobile-cards),.fm-scroll:has(table.mobile-cards){border:0;background:transparent;box-shadow:none;overflow:visible}
  table.mobile-cards{display:block!important;overflow:visible!important;white-space:normal!important;border:0!important;background:transparent!important}
  table.mobile-cards thead,.mobile-cards .mobile-header-row{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  table.mobile-cards tbody{display:grid;gap:12px;width:100%}
  table.mobile-cards tr:not(.mobile-header-row){display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:7px 16px;box-shadow:var(--shadow);white-space:normal}
  table.mobile-cards td{display:grid!important;grid-template-columns:minmax(104px,38%) minmax(0,1fr);gap:12px;width:100%!important;padding:11px 0!important;border-bottom:1px solid #edf0f5!important;white-space:normal!important;overflow-wrap:anywhere;text-align:left!important}
  table.mobile-cards td:last-child{border-bottom:0!important}
  table.mobile-cards td::before{content:attr(data-label);color:var(--muted);font-size:.7rem;font-weight:750;letter-spacing:.045em;text-transform:uppercase;line-height:1.35}
  table.mobile-cards td[colspan]{display:block!important}
  table.mobile-cards td[colspan]::before{display:none}
  table.mobile-scroll{display:block;overflow-x:auto;white-space:nowrap;border:1px solid var(--line);border-radius:16px}
  .list-summary{justify-content:center}
}
@media(max-width:390px){
  .topbrand .brandtext b,.topbrand .brandtext .red{font-size:.9rem}
  .panel{padding:18px}
  .stack-form .btn,.filter-actions .btn,.pagehead .btn{width:100%}
  .fm-nav .btn,.fm-nav a{width:auto}
}