/* Solo token di hnh-brand/tokens/brand.css: nessun colore o font scritto qui. */
:root{
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* border-box assegnato a tutti, non ereditato: dentro <details> l'ereditarietà passa da un elemento
   interno del browser che non lo ha, e i campi tornavano larghi 100% + padding (sbordando) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--color-link)}

/* Logo: area di rispetto = 0.294 × larghezza, logo centrato (BRAND.md) */
.logo-wrap{padding:calc(128px * 0.294)}
.logo-wrap .hnh-logo{width:128px}

.wrap{max-width:620px;margin:0 auto;padding:8px 20px 64px}
.wide{max-width:1240px}
/* Il margine negativo allinea il logo al testo: l'area di rispetto resta vuota, fuori dalla colonna */
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px calc(128px * -0.294)}
h1{font-size:clamp(30px,7vw,42px);line-height:1.1;margin:0 0 12px}
h2{font-size:24px;line-height:1.2;margin:0 0 4px}
p.lead{margin:0 0 32px}
.group-tag{display:inline-block;background:var(--color-bg-alt);color:var(--color-text-strong);border-radius:999px;padding:6px 14px;font-size:15px;margin-bottom:20px}

/* ---------- form ---------- */
fieldset{border:0;border-top:1px solid var(--color-rule);margin:0;padding:24px 0 8px;min-width:0}
legend{font-weight:var(--fw-body-bold);font-size:15px;padding:0 0 14px;color:var(--color-text-strong)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.grid .full{grid-column:1/-1}
@media (max-width:520px){.grid{grid-template-columns:minmax(0,1fr)}}
label{display:block;font-size:14px;margin-bottom:6px}
.opt{opacity:.8}
/* min-width:0: senza, un campo non si stringe sotto la sua larghezza "naturale" (~20 caratteri) e sborda */
input,select,textarea{width:100%;min-width:0;max-width:100%;font:inherit;font-size:17px;color:var(--color-text-strong);background:var(--color-bg);
  border:1px solid var(--color-rule);border-radius:10px;padding:12px 14px;outline:none}
textarea{min-height:80px;resize:vertical}
/* Safari su iPhone disegna i campi data con una larghezza propria e li fa sbordare: si toglie l'aspetto nativo */
input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-height:50px;text-align:left}
input[type="date"]::-webkit-date-and-time-value{text-align:left}
input:focus,select:focus,textarea:focus{border-color:var(--color-link);outline:2px solid var(--color-accent);outline-offset:1px}
/* Il brand non prevede un colore di errore: si segnala con bordo spesso e testo in grassetto */
input.bad,select.bad{border:2px solid var(--color-text-strong)}
.hint{font-size:13px;margin-top:5px}
.errmsg{font-size:14px;font-weight:var(--fw-body-bold);color:var(--color-text-strong);margin-top:5px}

.seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--color-bg);border:1px solid var(--color-rule);border-radius:12px;padding:4px;gap:4px}
.seg.two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* radio nascosti: dimensione minima, altrimenti la width:100% degli input li allarga oltre lo schermo */
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0}
.seg label{margin:0;text-align:center;padding:11px 6px;border-radius:9px;cursor:pointer;color:var(--color-text-strong);font-size:15px}
.seg input:checked+label{background:var(--hnh-blue-dark);color:var(--color-on-accent)}
.seg input:focus-visible+label{outline:2px solid var(--color-accent);outline-offset:2px}

.check{display:flex;gap:12px;align-items:flex-start;margin:22px 0 8px;font-size:15px;color:var(--color-text-strong)}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--color-accent)}
.hidden{display:none!important}

button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid transparent}
/* Testo bianco su blu: almeno 19px in grassetto (contrasto, BRAND.md) */
.btn{background:var(--color-accent);color:var(--color-on-accent);padding:14px 22px;font-weight:var(--fw-body-bold);font-size:19px}
.btn:hover{background:var(--hnh-blue-dark)}
.btn.block{width:100%;margin-top:18px}
.btn:disabled{opacity:.5;cursor:default}
.ghost{background:transparent;border-color:var(--color-rule);color:var(--color-text-strong);padding:9px 14px;font-size:15px}
.ghost:hover{border-color:var(--color-link);color:var(--color-link)}
.ghost.small{padding:5px 10px;white-space:nowrap}
button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.done{text-align:left;padding-top:24px}
.done .mark{width:56px;height:56px;border-radius:50%;background:var(--color-bg-alt);display:grid;place-items:center;margin-bottom:24px}
.done .mark svg{width:26px;height:26px;stroke:var(--color-accent)}
.notice{background:var(--color-bg-alt);color:var(--color-text-strong);border-radius:12px;padding:14px 16px;font-size:15px;margin:0 0 24px}

/* ---------- front office e amministrazione ---------- */
.cols{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start}
.cols>*{min-width:0}
@media (max-width:960px){.cols{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--color-bg-alt);border-radius:14px;padding:20px;min-width:0}
.panel+.panel{margin-top:24px}
.glist{list-style:none;margin:16px 0 0;padding:0}
.glist li button{width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:10px 12px;color:var(--color-text-strong);font-size:16px;overflow-wrap:anywhere}
.glist li button.on{background:var(--color-bg)}
.glist small{display:block;color:var(--color-text);font-size:13px}
.newg{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:8px}
.groups{margin-top:20px;border-top:1px solid var(--color-rule);padding-top:14px}
.groups summary{cursor:pointer;font-family:var(--font-heading);font-size:24px;color:var(--color-heading)}
.groups[open] .newg{margin-top:14px}
.qrbox{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qrbox>div:last-child{flex:1 1 260px;min-width:0}
#qr{background:var(--hnh-white);padding:10px;border-radius:10px;line-height:0;flex:none}
#qr img,#qr canvas{display:block}
/* Barre di strumenti: gli elementi vanno a capo invece di allargare la pagina */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar>*{min-width:0}
.stat{font-size:15px}

/* Tabelle: su schermi larghi tabella, su schermi stretti una scheda per riga (niente barre laterali) */
/* Le schede scattano in base allo spazio della tabella (container query), non alla larghezza dello schermo */
.tablewrap{margin-top:16px;container-type:inline-size}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-weight:var(--fw-body-bold);text-align:left;padding:8px 10px;border-bottom:1px solid var(--color-rule);white-space:nowrap}
td{padding:12px 10px;border-bottom:1px solid var(--color-bg-alt);vertical-align:top;color:var(--color-text-strong);overflow-wrap:anywhere}
td code{font-size:13px}
/* P.IVA e codice fiscale su una riga: spezzati non si leggono né si copiano */
td[data-label="P.IVA / CF"]{white-space:nowrap}
td .stat{overflow-wrap:break-word} /* arrivo, camera, prenotazione: a capo tra le parole, non dentro i numeri */
tr.row{cursor:pointer}
tr.row:hover td{background:var(--color-bg-alt)}
.pill{display:inline-block;font-size:13px;border-radius:999px;padding:3px 10px;background:var(--color-bg-alt);white-space:nowrap}
.pill.ok{background:var(--hnh-blue-dark);color:var(--color-on-accent)}
.detail td{background:var(--color-bg-alt)}
.detail .notice{background:var(--color-bg);border:1px solid var(--color-rule)} /* passo da fare: in evidenza sul grigio del dettaglio */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px 16px}
/* Dettaglio: etichetta sopra, valore sotto, "Copia" a lato */
.kv div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;border-bottom:1px dashed var(--color-rule);padding:6px 0;min-width:0}
.kv span{grid-column:1;color:var(--color-text);font-size:13px}
.kv b{grid-column:1;font-weight:var(--fw-body-bold);overflow-wrap:anywhere;min-width:0}
.kv .copy{grid-column:2;grid-row:1/span 2}
.copy{background:transparent;border:0;color:var(--color-link);font-size:13px;padding:2px 4px}
/* prenotazioni OPERA candidate */
.reslist{list-style:none;margin:10px 0 0;padding:0}
.reslist li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--color-rule)}
.reslist li span{flex:1;min-width:0}
.reslist small{display:block;font-size:13px;color:var(--color-text)}
.btn.compact{padding:8px 18px;flex:none}
.empty{padding:28px 0}
@container (max-width:720px){
  .rtable thead{display:none}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tr{border:1px solid var(--color-rule);border-radius:12px;padding:6px 14px;margin-bottom:10px}
  .rtable tr.detail{border-top:0;border-radius:0 0 12px 12px;margin-top:-12px;background:var(--color-bg-alt)}
  .rtable td{border:0;padding:6px 0}
  .rtable td::before{content:attr(data-label);display:block;color:var(--color-text);font-size:13px}
  .rtable td.empty::before,.rtable tr.detail td::before,.rtable td:not([data-label])::before{content:none}
  .rtable tr.row:hover td{background:transparent}
  td[data-label="P.IVA / CF"]{white-space:normal}
}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100vw - 32px);background:var(--color-text-strong);color:var(--hnh-white);padding:10px 16px;border-radius:10px;font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}

/* ---------- form ospite: scansioni ---------- */
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
@media (max-width:520px){.quick{grid-template-columns:minmax(0,1fr)}}
.qbtn{display:flex;gap:12px;align-items:center;text-align:left;background:var(--color-bg);border:1px solid var(--color-rule);color:var(--color-text-strong);padding:14px;border-radius:12px;font-size:15px;line-height:1.3}
.qbtn:hover{border-color:var(--color-link)}
.qbtn svg{width:28px;height:28px;flex:none;stroke:var(--color-accent)}
.qbtn small{display:block;color:var(--color-text);font-size:13px;margin-top:2px}
.scanmsg{font-size:14px;margin:-8px 0 18px;padding:10px 14px;border-radius:10px;background:var(--color-bg-alt);color:var(--color-text-strong)}
.scanmsg.err{font-weight:var(--fw-body-bold)}
.src{display:inline-block;font-size:12px;border-radius:999px;padding:2px 8px;margin-top:4px;background:var(--color-bg-alt)}
.src.qr{color:var(--color-link)}

/* lettura QR AdE al banco, filtri e ricerche */
.wedge{flex:1 1 220px;width:auto}
.filters .seg{flex:0 1 260px}
#dsVideo{display:block;width:100%;max-width:420px;margin-top:14px;border-radius:12px;background:var(--hnh-black)}

#printsheet{display:none;text-align:center;padding:40px}
.print-logo-wrap{padding:calc(200px * 0.294)}
.print-logo-wrap .hnh-logo{width:200px}
#printsheet h1{font-size:34px;margin:0 0 8px}
#printsheet p{font-size:18px}
#printqr{display:inline-block;margin:24px 0}
@media print{
  body{background:var(--hnh-white)}
  .noprint{display:none!important}
  #printsheet{display:block!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}