/* ADMIN CLIENTI — stile degli strumenti online SELPRO: sopra ui/klnk-ui.css (copia del DS vivo della super app) aggiunge solo ciò che il pannello
   a PC richiede. Solo le variabili di klnk-ui.css (nessun colore scritto qui), piatto, ombre nessuna, titoli di sezione 13 px peso 700 grigi.
   Prefisso ad-. Dimensioni del testo: 32 (titolo e numeri), 17, 15, 13. Misure decise da @container app, come nella super app. */
html,body{height:100%}
.app{height:100vh; height:100dvh}
/* klnk-ui.css, da 700 px, fa del .schermo una colonna che non scorre (serve ai Parametri): qui la pagina scorre dentro #schermo */
#schermo{display:block; height:100%; overflow-y:auto; overflow-x:hidden}
.ad-sprite{position:absolute; width:0; height:0}
a{color:inherit}
a:focus-visible,select:focus-visible,textarea:focus-visible,.ad-riga:focus-visible{outline:2.5px solid var(--navy); outline-offset:2px}
.ad-riga:focus-visible{outline-offset:-4px}   /* anello DENTRO la riga a 4 px dal bordo; sulla prima e sull'ultima riga il raggio segue quello della card (concentrico, vedi sotto) */
.card > .ad-riga:first-child{border-radius:var(--r-card) var(--r-card) 0 0}
.card > .ad-riga:last-child{border-radius:0 0 var(--r-card) var(--r-card)}
.card > .ad-riga:only-child{border-radius:var(--r-card)}
:root{--freccia-giu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* ---- colonna comune: testata, pagina e barra fissa hanno gli stessi bordi (16 / 24 / 32 px, larghezza massima --pagina-max) ---- */
.ad-in{max-width:var(--pagina-max); margin:0 auto; padding:0 16px}
@container app (min-width:700px){ .ad-in{padding:0 24px} }
@container app (min-width:1100px){ .ad-in{padding:0 32px} }
.ad-pagina{display:grid; gap:24px; max-width:var(--pagina-max); margin:0 auto; padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.app.con-barra .ad-pagina{padding-bottom:calc(112px + env(safe-area-inset-bottom))}   /* lo spazio per la barra fissa solo quando la barra c'è */
@container app (min-width:700px){ .ad-pagina{padding-left:24px; padding-right:24px; padding-top:32px} }
@container app (min-width:1100px){ .ad-pagina{padding-left:32px; padding-right:32px} }
#contenuto{display:flex; flex-direction:column; gap:24px; min-width:0}
#contenuto > section{min-width:0}

/* ---- testata fissa: marchio e titolo a sinistra, utente SEMPRE a destra; sotto il menu delle sezioni, sempre nello stesso posto ---- */
.ad-testata{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
.ad-testata-alta{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding-top:10px; padding-bottom:6px}
.ad-marchio{display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:var(--navy); border-radius:var(--r-ctrl)}
.ad-logo{display:block; flex:none; color:var(--navy)}
.ad-logo--bianco{color:var(--surface)}
.ad-marchio-titolo{font-size:var(--fs17); font-weight:800; color:var(--navy); white-space:nowrap}
.ad-utente{display:flex; align-items:center; gap:12px; min-width:0}
.ad-sigla{flex:none; width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--surface); display:flex; align-items:center; justify-content:center; font-size:var(--fs13); font-weight:800}
.ad-utente-link{display:flex; align-items:center; gap:12px; min-width:0; color:inherit; text-decoration:none; border-radius:12px}   /* cerchio e nome = «Il mio account» */
.ad-utente-link:hover .ad-utente-testo b{text-decoration:underline}
.ad-r-ruoli{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.ad-utente-testo{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.ad-utente-testo b{font-size:var(--fs13); font-weight:700; color:var(--ink); overflow-wrap:anywhere}
.ad-utente-testo span{font-size:var(--fs13); color:var(--muted)}
.btn-secondario.ad-esci{flex:none; width:auto; height:var(--btn-s); min-height:var(--btn-s); padding:0 16px; font-size:var(--fs13)}
@container app (max-width:699px){ .ad-utente-testo{display:none} .ad-marchio-titolo{font-size:var(--fs15)} }
/* telefono: la testata è una riga sola (marchio · Menu · cerchio); le sezioni e «Esci» stanno nel pannello dal basso (A.menuTelefono) */
.ad-destra{display:flex; align-items:center; gap:12px; min-width:0}
.ad-menu-tel{display:none}
@container app (max-width:699px){
  .ad-menu-riga,.ad-utente .ad-esci{display:none}
  .btn-secondario.ad-menu-tel{display:inline-flex; align-items:center; min-width:76px; justify-content:center}
  .ad-testata-alta{padding-bottom:10px}
  .ad-marchio{min-height:44px}
}
/* tastiera del telefono (--kb da app.js): il pannello dal basso le sta sopra e si accorcia (il corpo scorre); da 700 px la finestra centrata resta sopra */
.foglio{max-height:min(calc(100% - 32px - var(--kb,0px)), calc(var(--vvh,100dvh) - 32px))}   /* --vvh: con la tastiera aperta, il pannello non sale oltre la parte visibile */
@container app (min-width:700px){ .velo{padding-bottom:calc(24px + var(--kb,0px))} }
.ad-menu-foglio{display:flex; flex-direction:column; gap:4px}
.ad-menu-foglio .ad-voce{display:flex; align-items:center; width:100%; height:auto; min-height:var(--btn-m); padding:0 16px; text-align:left}
.ad-menu-foglio .ad-menu-sep{height:1px; background:var(--line); margin:8px 0}
.ad-menu-riga{padding-bottom:10px}
.ad-menu{display:flex; flex-wrap:wrap; gap:4px}   /* le voci vanno a capo su due righe: nessuna resta fuori e senza segno */
.ad-voce{flex:none; height:var(--btn-s); padding:0 14px; border-radius:var(--r-pill); font-size:var(--fs15); font-weight:700; color:var(--ink); white-space:nowrap; transition:background .12s}
/* dieci voci (super amministratore, con Firmware) a 1024 px: un po' meno aria dentro le voci, così stanno su una riga */
@media (max-width:1120px){ .ad-menu{gap:2px} .ad-voce{padding:0 10px} }
@media (hover:hover){ .ad-voce:not(.attiva):hover{background:var(--chip)} }
.ad-voce.attiva{background:var(--navy); color:var(--surface)}

/* ---- testo della pagina: indietro, titolo (il solo H1), riga di sotto, stato e celle dei dati principali ---- */
.ad-pag-testa{display:flex; flex-direction:column; gap:12px; min-width:0}
.ad-indietro{align-self:flex-start; display:inline-flex; align-items:center; gap:4px; min-height:36px; font-size:var(--fs15); font-weight:700; color:var(--navy); text-decoration:none}
.ad-indietro svg{transform:scaleX(-1)}
@media (hover:hover){ .ad-indietro:hover span{text-decoration:underline} }
.ad-link{align-self:flex-start; display:inline-flex; align-items:center; min-height:36px; font-size:var(--fs15); font-weight:700; color:var(--navy); text-decoration:underline}   /* un collegamento nel testo: si riconosce anche fermo */
@media (hover:hover){ .ad-link:hover{text-decoration-thickness:2px} }
.ad-pag-riga{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 16px}
.ad-pag-testo{min-width:0; flex:1 1 320px}
.ad-pag-testo h1{font-size:var(--fs22); font-weight:800; line-height:1.15; color:var(--navy); overflow-wrap:anywhere}
.ad-pag-sotto{font-size:var(--fs15); color:var(--muted); margin-top:6px}
.ad-pag-coda{flex:none}
@container app (min-width:700px){ .ad-pag-testo h1{font-size:var(--fs32)} }
.ad-celle{display:flex; gap:1px; max-width:100%; width:fit-content; border:1px solid var(--line); border-radius:var(--r-ctrl); overflow:hidden; background:var(--line)}
.ad-cella{display:flex; flex-direction:column; gap:2px; min-width:0; padding:10px 18px; background:var(--surface)}
.ad-cella-val{font-size:var(--fs17); font-weight:800; line-height:1.15; color:var(--navy); overflow-wrap:anywhere}
.ad-cella-eti{font-size:var(--fs13); color:var(--muted)}

/* ---- etichette di stato, avvisi, stati vuoti ---- */
.ad-tag{display:inline-flex; align-items:center; font-size:var(--fs13); font-weight:700; border-radius:var(--r-pill); padding:3px 10px; background:var(--chip); color:var(--muted); white-space:nowrap}
.ad-tag--ok{background:var(--okbg); color:var(--ok)}
.ad-tag--warn{background:var(--warnbg); color:var(--warn)}
.ad-tag--bad{background:var(--badbg); color:var(--bad)}
.ad-tag--info{background:var(--infobg); color:var(--info)}
.ad-errore{display:flex; align-items:flex-start; gap:10px; font-size:var(--fs13); font-weight:700; border-radius:var(--r-ctrl); padding:12px; background:var(--badbg); color:var(--bad)}
.ad-errore svg{margin-top:1px}
.riep-avviso--info{background:var(--infobg); color:var(--info); margin:0}   /* avviso del DS (klnk-ui.css .riep-avviso) con la tinta info */
.ad-errore[hidden]{display:none}
.ad-vuoto{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:40px 20px; text-align:center}
.ad-vuoto h2{font-size:var(--fs17); font-weight:800; color:var(--navy)}
.ad-vuoto p{font-size:var(--fs15); color:var(--muted); margin:6px auto 0; max-width:52ch}
.ad-carico{display:flex; flex-direction:column; align-items:center; padding:56px 0; font-size:var(--fs15); color:var(--muted)}
.ad-sez-riga{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.ad-sez-riga span:last-child{font-weight:600}

/* ---- messaggio breve in basso: sopra la barra fissa, circa 3 secondi ---- */
.ad-msg{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:56; width:max-content; max-width:min(560px, calc(100% - 32px));
  background:var(--navy); color:var(--surface); font-size:var(--fs15); font-weight:700; line-height:1.3; text-align:center; padding:12px 20px; border-radius:var(--r-ctrl);
  border:1.5px solid color-mix(in srgb, var(--surface) 35%, transparent)}   /* si vede anche sul fondo navy della pagina di accesso */
.app.con-barra .ad-msg{bottom:calc(92px + env(safe-area-inset-bottom))}
.ad-msg--errore{background:var(--badbg); color:var(--bad); border:1.5px solid color-mix(in srgb, var(--bad) 30%, transparent)}

/* ---- barra fissa (bordi del DS: klnk-ui.css) e pulsanti ---- */
@container app (min-width:700px) and (max-width:1099px){ .barra-fissa{padding-left:24px; padding-right:24px} }   /* stessi bordi della pagina anche fra 700 e 1099 px (da 1100 li dà klnk-ui.css) */
.barra-fissa button{display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap}
.btn-enorme:disabled,.btn-secondario:disabled{opacity:.45; cursor:default}
.btn-secondario.ad-peric{background:var(--badbg); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent)}
.btn-secondario.ad-piccolo{flex:none; height:var(--btn-s); min-height:var(--btn-s); padding:0 14px; font-size:var(--fs13)}
.ad-testo-conferma{font-size:var(--fs15); line-height:1.45}
.foglio-corpo .ad-errore{margin-top:12px}
.ad-campi-fin{display:flex; flex-direction:column; gap:16px; padding-top:4px}

/* ---- ricerca e filtri a pillole (la scelta attiva è bianca con bordo blu, come negli elenchi della super app) ---- */
.ad-filtri{display:flex; flex-direction:column; gap:12px}
.ad-filtri .ricerca{margin-bottom:0; max-width:520px}
.ad-filtri .ricerca input{font-size:var(--fs15)}
.ad-pills{display:flex; flex-wrap:wrap; gap:8px}
.ad-pill{display:inline-flex; align-items:center; gap:8px; min-height:var(--btn-m); padding:0 16px; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
  color:var(--ink); font-size:var(--fs15); font-weight:700; white-space:nowrap}
.ad-pill-n{font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.ad-pill[aria-pressed="true"]{border-color:var(--navy); color:var(--navy)}
.ad-pill[aria-pressed="true"] .ad-pill-n{color:var(--navy)}
@media (hover:hover){ .ad-pill[aria-pressed="false"]:hover{background:var(--tenue)} }

/* ---- riepilogo: riquadri numerici cliccabili, fondo tinta piatta ---- */
.ad-tessere{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@container app (min-width:1000px){ .ad-tessere{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px} }
.ad-tessera{display:flex; flex-direction:column; gap:4px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); text-decoration:none; color:var(--ink)}
.ad-tessera--ok{background:var(--okbg)} .ad-tessera--warn{background:var(--warnbg)} .ad-tessera--bad{background:var(--badbg)} .ad-tessera--info{background:var(--infobg)}
.ad-t-num{font-size:var(--fs22); font-weight:800; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums}
.ad-tessera--ok .ad-t-num{color:var(--ok)} .ad-tessera--warn .ad-t-num{color:var(--warn)} .ad-tessera--bad .ad-t-num{color:var(--bad)} .ad-tessera--info .ad-t-num{color:var(--info)}
@container app (min-width:700px){ .ad-t-num{font-size:var(--fs32)} }
.ad-t-tit{font-size:var(--fs15); font-weight:700}
.ad-t-sub{font-size:var(--fs13); color:var(--muted)}
@media (hover:hover){ .ad-tessera:hover{border-color:var(--navy)} }

/* ---- elenchi a righe: nome e codice a sinistra, dati con l'etichetta sotto, stato, freccia solo dove la riga porta in un'altra pagina ---- */
.ad-riga{display:grid; align-items:center; gap:10px 16px; min-height:68px; padding:14px 16px; text-decoration:none; color:inherit; border-top:1px solid var(--line)}
.card > .ad-riga:first-child{border-top:0}
@media (hover:hover){ a.ad-riga:hover{background:var(--tenue)} }
.ad-r-nome{grid-area:n; display:flex; flex-direction:column; gap:2px; min-width:0}
.ad-r-nome b{font-size:var(--fs15); font-weight:700; display:flex; align-items:center; flex-wrap:wrap; gap:6px; overflow-wrap:anywhere}
.ad-sub{font-size:var(--fs13); color:var(--muted); overflow-wrap:anywhere}
.ad-r-celle{grid-area:x; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.ad-c{display:flex; flex-direction:column; gap:2px; min-width:0}
.ad-c b{font-size:var(--fs15); font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ad-c span{font-size:var(--fs13); color:var(--muted)}
.ad-r-stato{grid-area:s; justify-self:end}
.ad-chev{grid-area:c; display:flex; color:var(--muted)}
.ad-riga--lic{grid-template-columns:minmax(0,1fr) auto 20px; grid-template-areas:"n s c" "x x x"}
.ad-riga--az{grid-template-columns:minmax(0,1fr) minmax(0,140px) 20px; grid-template-areas:"n x c"}
.ad-riga--az .ad-r-celle{grid-template-columns:minmax(0,1fr)}
@container app (min-width:1000px){ .ad-riga--lic{grid-template-columns:minmax(0,2.4fr) minmax(0,3.6fr) 120px 20px; grid-template-areas:"n x s c"} }

/* ---- profilo: gruppi a card (come «Cosa comprende» della super app), righe dei diritti, postazioni, storico ---- */
.ad-gruppi{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start}
@container app (min-width:1100px){ .ad-gruppi{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ad-gruppo{display:flex; flex-direction:column; min-width:0}
.ad-gruppo-tit{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px 6px; font-size:var(--fs13); font-weight:700; color:var(--muted)}
.ad-gruppo-tit span:last-child{font-weight:600}
.ad-gruppo-tit + .ad-d{border-top:0}
.ad-d{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; min-height:68px; padding:12px 16px; border-top:1px solid var(--line)}
.card > .ad-d:first-child{border-top:0}
.ad-d-testo{flex:1 1 220px; min-width:0}
.ad-d-nome{font-size:var(--fs15); font-weight:700; overflow-wrap:anywhere}
.ad-d-destra{display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-left:auto}
.ad-d-num{font-size:var(--fs17); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums}
.ad-d-num small{font-size:var(--fs13); font-weight:700; color:var(--muted); margin-left:3px}
.ad-d-testo .ad-sub{display:block; margin-top:2px}
.ad-val{font-size:var(--fs15); font-weight:700; overflow-wrap:anywhere}
.ad-in-riga{display:flex; align-items:center; gap:10px}
.ad-in-riga .ad-input{flex:1 1 auto; min-width:0}
.ad-modulo > div:empty{display:none}
.ad-quando{font-size:var(--fs13); color:var(--muted); font-weight:600}

/* ---- moduli: campi su due o tre colonne dentro una card; le scelte a due voci sono segmenti ---- */
.ad-form{display:grid; grid-template-columns:minmax(0,1fr); gap:16px 20px; padding:20px}
@container app (min-width:700px){ .ad-form{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container app (min-width:1000px){ .ad-form--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ad-campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.ad-campo--largo,.ad-form > .ad-errore{grid-column:1 / -1}
.ad-eti{font-size:var(--fs13); font-weight:700; color:var(--muted)}
.ad-aiuto{font-size:var(--fs13); color:var(--muted)}
.ad-input{width:100%; min-height:48px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:var(--fs15)}
textarea.ad-input{padding:12px 14px; min-height:96px; resize:vertical; line-height:1.4}
.ad-input:disabled{opacity:.45; cursor:default}
@media (pointer:coarse){ .ad-input,.ricerca input{font-size:16px} }   /* il telefono non ingrandisce il campo */
.ad-sel{display:block}
/* scelta fra molte voci: una riga con la freccia che apre l'elenco di scelta del DS (.elenco-scelte / .riga-scelta, klnk-ui.css), mai il <select> del browser */
.ad-sel-btn{display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; font-weight:600; cursor:pointer}
.ad-sel-testo{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ad-sel-btn::after{content:""; flex:none; width:16px; height:16px; background:var(--muted); transition:transform .15s;
  -webkit-mask:var(--freccia-giu) center/contain no-repeat; mask:var(--freccia-giu) center/contain no-repeat}
.ad-sel-btn[aria-expanded="true"]::after{transform:rotate(180deg)}
.ad-sel-lista{margin-top:8px; max-height:min(280px, 40vh); overflow-y:auto; overscroll-behavior:contain}
.ad-sel-lista[hidden]{display:none}
.ad-sel-lista .riga-scelta{text-align:left}
.ad-sel-lista .riga-scelta:focus-visible{outline-offset:-4px; border-radius:calc(var(--r-ctrl) - 4px)}   /* anello dentro la riga, concentrico */
@media (hover:hover){ .ad-sel-lista .riga-scelta:hover{background:var(--tenue)} }
.ad-form .pillole{margin:0}
.ad-form .pillole button{min-height:44px; font-size:var(--fs15)}
.ad-card-pie{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:0 20px 20px}
.ad-card-pie .ad-aiuto{flex:1 1 240px}

/* ---- licenza appena creata: il codice è il dato del cliente, grande e selezionabile con un tocco ---- */
.ad-esito{display:flex; flex-direction:column; gap:12px; padding:24px 20px}
.ad-codice{font-size:var(--fs32); font-weight:800; line-height:1.15; color:var(--navy); font-variant-numeric:tabular-nums; user-select:all; overflow-wrap:anywhere}

/* ---- accesso: pagina a tutto schermo con il fondo navy della pagina di collegamento, un solo riquadro bianco ---- */
.ad-accesso{min-height:100%; background:var(--navy); display:flex; flex-direction:column; align-items:center; gap:24px; padding:max(32px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom))}
.ad-accesso-testa{display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:8px}
.ad-prodotto{font-size:var(--fs17); font-weight:800; color:var(--surface)}
.ad-riquadro{width:100%; max-width:460px; background:var(--surface); color:var(--ink); border-radius:var(--r-card); padding:24px 20px}
.ad-tit{font-size:var(--fs22); font-weight:800; line-height:1.2; color:var(--navy)}
.ad-sotto{font-size:var(--fs15); color:var(--muted); margin-top:8px}
.ad-modulo{display:flex; flex-direction:column; gap:16px; margin-top:20px}
.ad-riquadro .ad-input{min-height:52px}
.ad-riquadro .riep-avviso,.ad-riquadro .ad-errore{margin-top:16px}
.ad-modulo .ad-errore{margin-top:0}
.ad-riquadro .btn-enorme,.ad-riquadro .btn-secondario{width:100%; flex:none}
.ad-qr{align-self:center; display:block; width:200px; height:200px; padding:8px; border:1px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface)}   /* il codice QR da inquadrare: sempre su fondo chiaro */
.ad-esito .ad-modulo{margin-top:0}   /* l'attivazione dentro una scheda dell'account: lo spazio lo dà già la scheda */
@container app (min-width:700px){ .ad-accesso{justify-content:center} .ad-riquadro{padding:28px} }

/* ---- piani, catalogo, registro, amministratori, aziende: pezzi in più sopra le righe .ad-d ---- */
.ad-fs{border:0; padding:0; margin:0; min-width:0}
.ad-fs:disabled .pillole button,.ad-fs:disabled .ad-input{opacity:.6}
.ad-d .pillole{flex:none; margin:0; min-width:230px}
.ad-d .pillole button{min-height:40px; font-size:var(--fs13)}
.ad-d .pillole button[aria-checked="true"]::before{content:none; display:none}   /* segmenti compatti da 13 px nelle righe: senza spunta, come le card compatte del DS (.card-param .pillole) */
.ad-d .pillole button[aria-checked="true"]{font-weight:800}
.ad-d-extra{flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px}
.ad-d-extra[hidden]{display:none}
.ad-d-extra .ad-input{width:140px; min-height:44px}
.ad-d-extra .ad-sel{min-width:200px}
.ad-d-extra .ad-sel .ad-input{width:100%}   /* il pulsante della scelta è anche .ad-input: non prende i 140px dei campi numerici */
/* telefono: i controlli vanno a capo da sinistra (non restano spostati a destra) e il campo di testo prende lo spazio che resta accanto al tasto */
@container app (max-width:699px){ .ad-d-extra{justify-content:flex-start} .ad-d-extra input[type="text"].ad-input{flex:1 1 140px; min-width:0} .ad-d-extra .ad-sel{flex:1 1 200px} }
.ad-d-nome .ad-tag{margin-left:8px}
.ad-d-meta{display:flex; flex-wrap:wrap; gap:8px 24px}
.ad-gruppi.ad-gruppi--uno{grid-template-columns:minmax(0,1fr)}
.ad-filtri-campi{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 16px; max-width:1000px}
.ad-nota-fine{padding:0 4px}
.ad-riga--azm{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"n v b"}
.ad-riga--azm > .ad-vai{grid-area:v}
.ad-riga--azm > button{grid-area:b}
.ad-vai{display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:inherit}
@media (hover:hover){ .ad-vai:hover .ad-c b{text-decoration:underline} }
.ad-tab-scroll{overflow-x:auto}
.ad-tab{width:100%; border-collapse:collapse; font-size:var(--fs15)}
.ad-tab th,.ad-tab td{padding:12px 16px; border-top:1px solid var(--line); text-align:center; vertical-align:middle}
.ad-tab thead th{border-top:0; font-size:var(--fs13); font-weight:700; color:var(--muted); white-space:nowrap}
.ad-tab th[scope="row"]{text-align:left; font-weight:600; min-width:260px}
.ad-tab td svg{color:var(--navy)}
.ad-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---- schermi touch: bersagli da 44 px (voci del menu, Esci, Modifica/Scollega, indietro, segmenti nelle righe) ---- */
@media (pointer:coarse){
  .ad-voce,.btn-secondario.ad-esci,.btn-secondario.ad-piccolo,.ad-indietro,.ad-link,.ad-d .pillole button{min-height:var(--btn-m)}
  .ad-utente-link{min-width:var(--btn-m); min-height:var(--btn-m); justify-content:center}   /* il cerchio resta da 40, la zona da toccare è 44 */
}

/* ---- barra fissa con due tasti (profilo: «Altre azioni» + «Salva le modifiche»): a telefono il riassunto va sopra, i due tasti sotto, sulla stessa riga ---- */
@container app (max-width:559px){
  .barra-fissa:has(button + button){flex-wrap:wrap; gap:8px 10px}
  .barra-fissa:has(button + button) .bf-testo{flex:1 1 100%}
  .barra-fissa:has(button + button) button{padding:0 16px; white-space:normal; line-height:1.15}
  .barra-fissa:has(button + button) .btn-enorme{flex:1 1 0; min-width:0}
  .app.con-barra:has(#barra button + button) .ad-pagina{padding-bottom:calc(136px + env(safe-area-inset-bottom))}
  .app.con-barra:has(#barra button + button) .ad-msg{bottom:calc(120px + env(safe-area-inset-bottom))}
}

/* ---- «Altre azioni»: righe d'azione dentro la finestra (elenco, righe alte uguali, una riga piccola che dice cosa succede, la freccia perché ogni riga apre la conferma,
   le azioni che tolgono per ultime in rosso tenue) ---- */
.foglio-azioni [hidden]{display:none}
.ad-azioni{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); overflow:hidden}
.ad-az-riga{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:76px; padding:10px 14px 10px 16px; text-align:left; color:var(--ink)}
.ad-az-riga + .ad-az-riga{border-top:1px solid var(--line)}
.ad-az-testo{display:flex; flex-direction:column; gap:2px; min-width:0}
.ad-az-testo b{font-size:var(--fs15); font-weight:700}
.ad-az-testo span{font-size:var(--fs13); font-weight:500; color:var(--muted)}
.ad-az-riga svg{flex:none; color:var(--muted)}
.ad-az-riga--peric{background:var(--badbg); color:var(--bad)}
.ad-az-riga--peric .ad-az-testo span,.ad-az-riga--peric svg{color:var(--bad)}
@media (hover:hover){ .ad-az-riga:hover{background:var(--tenue)} .ad-az-riga--peric:hover{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))} }
.ad-az-riga:focus-visible{outline-offset:-4px; border-radius:calc(var(--r-ctrl) - 4px)}

/* ---- firmware: elenco per prodotto, avvisi, impronta, elenco delle licenze della riserva ---- */
#fw-el,#fw-av{display:flex; flex-direction:column; gap:24px; min-width:0} #fw-av{gap:8px} #fw-av:empty{display:none}
.ad-fw-av{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px}
/* scelta del file: il tasto del pannello al posto di quello del browser (l'input resta, invisibile, per tastiera e lettori di schermo) */
.ad-file{position:relative; display:flex; align-items:center; gap:12px; min-width:0}
.ad-file-in{position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; overflow:hidden}
.ad-file label{display:inline-flex; align-items:center; cursor:pointer; white-space:nowrap}
.ad-file-in:focus-visible + label{outline:2.5px solid var(--navy); outline-offset:2px}
.ad-file-nome{font-size:var(--fs13); color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ad-nowrap{white-space:nowrap}
.ad-hash{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:var(--fs13); line-height:1.5; overflow-wrap:anywhere}
.ad-fw-lista{max-height:min(320px,45vh); overflow-y:auto; overscroll-behavior:contain} .ad-fw-lista .riga-scelta[hidden]{display:none}
@media (hover:hover){ .ad-fw-lista .riga-scelta:hover{background:var(--tenue)} }
.ad-campi-fin .ricerca,#contenuto > .riep-avviso{margin:0}

/* scelta della lingua sotto la scheda di accesso (fondo navy): pillole, quella scelta bianca piena */
.ad-lingue{display:flex; justify-content:center; gap:4px; margin-top:18px}
.ad-lingue button{min-width:96px; height:var(--btn-s); padding:0 14px; border-radius:var(--r-pill); color:rgba(255,255,255,.78); font-size:var(--fs14,14px); font-weight:600}
.ad-lingue button[aria-checked="true"]{background:var(--surface); color:var(--navy)}
.ad-lingue button:focus-visible{outline-color:var(--surface)}
@media (hover:hover){ .ad-lingue button[aria-checked="false"]:hover{background:rgba(255,255,255,.12); color:var(--surface)} }
/* «Le tue app»: gli avvisi dei Manuali sotto il ruolo, un collegamento per riga (pezzo 13) */
.ad-app-avvisi{display:flex; flex-wrap:wrap; gap:0 16px; margin-top:4px}