:root {
  --blu: #0070c0;
  --grigio: #f2f2f2;
  --rosso: #c0392b;
  --verde: #2e8b57;
  --testo: #222;
}

* { box-sizing: border-box; }

html { height: 100%; }
body { height: auto; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--grigio);
  color: var(--testo);
}

.topbar {
  background: var(--blu);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
}
.topbar h1 { font-size: 18px; margin: 0; }
/* stessa altezza su tutte le pagine (con o senza il pulsante Esci) e titolo sempre nello stesso punto */
.topbar { min-height: 60px; }
.topbar .topbar-azioni:first-child .link-admin { min-width: 56px; }
/* "+ Dispositivo" al centro esatto della barra; su schermi stretti torna in fila tra titolo e destra */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.topbar > .topbar-azioni:first-child { grid-column: 1; justify-self: start; }
.topbar > .topbar-centro { grid-column: 2; }
.topbar > .topbar-azioni:last-child { grid-column: 3; justify-self: end; }
.topbar h1 { white-space: nowrap; }
/* schermi stretti: "+ Dispositivo" su una seconda riga, centrato */
@media (max-width: 640px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar > .topbar-azioni:last-child { grid-column: 2; grid-row: 1; }
  .topbar > .topbar-centro { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

.link-button {
  background: none;
  border: 1px solid white;
  color: white;
  border-radius: 6px;
  padding: 6px 12px;
}

.topbar-azioni { display: flex; align-items: center; gap: 10px; }

.link-admin {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.5px;
}
.link-admin:hover { color: rgba(255, 255, 255, 0.9); }

.tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid #ddd;
}
.tab-btn {
  flex: 1;
  padding: 12px;
  border: none;
  background: none;
  font-size: 15px;
}
@media (max-width: 480px) {
  .tab-btn { padding: 12px 2px; font-size: 13px; }
}
.tab-btn.active {
  border-bottom: 3px solid var(--blu);
  font-weight: 600;
  color: var(--blu);
}

/* Su telefono (verticale O orizzontale) sfrutta tutta la larghezza dello
   schermo: niente margini laterali vuoti. Il limite di lettura centrato
   scatta solo da tablet/desktop in su. */
main {
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  flex: 1; /* riempie tutto lo spazio verticale rimasto sotto barra/tab */
  display: flex;
  flex-direction: column;
}
main > .tab-content { flex: 1; display: flex; flex-direction: column; }
main > .tab-content[hidden] { display: none; } /* deve vincere sulla regola sopra */

#tab-nuova { align-items: stretch; }

@media (min-width: 700px) {
  main { max-width: 640px; margin: 0 auto; }
  main:has(#tab-report:not([hidden])) { max-width: 900px; }
}

.lista-bollette { display: flex; flex-direction: column; gap: 16px; }

.card-bolletta {
  background: white;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #d3dae3;
  border-left: 6px solid var(--blu);
  border-bottom: 6px solid var(--blu);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.importo { font-weight: 700; font-size: 17px; }
.card-sub { color: #666; font-size: 13px; margin-bottom: 10px; }

.riga-gruppo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #eee;
}
.riga-gruppo input { width: 20px; height: 20px; }

.allegati { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 10px 0; }
.btn-incolla { flex: 0 0 auto; padding: 10px 12px; white-space: nowrap; }

button {
  cursor: pointer;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  padding: 10px 14px;
}
button.secondary {
  background: #e8e8e8;
  color: var(--testo);
  flex: 1;
}
button.chiudi {
  width: 100%;
  background: var(--verde);
  color: white;
}
.azioni-admin { display: flex; gap: 8px; margin-top: 6px; }
.azioni-admin button { flex: 1; }
.azioni-admin .conferma { background: var(--verde); color: white; }
.azioni-admin .rifiuta { background: var(--rosso); color: white; }
.azioni-admin button:disabled { background: #bbb; cursor: not-allowed; }

.btn-elimina {
  width: 100%;
  margin-top: 12px;
  background: var(--rosso);
  color: white;
  padding: 12px;
}
.btn-elimina:disabled { background: #bbb; cursor: not-allowed; }

button.chiudi:disabled {
  background: #bbb;
  cursor: not-allowed;
}

.vuoto { text-align: center; color: #777; margin-top: 40px; }

.report-select { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.report-select button { flex: 1 1 auto; min-width: 120px; }

.stampa-finale {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  background: var(--verde);
  color: white;
}

.report-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.report-colonna-bollette {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.report-bolletta {
  background: white;
  border-radius: 10px;
  padding: 10px;
  overflow-x: auto;
}
.report-bolletta-header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.report-bolletta-header strong { font-size: 14px; }

/* Riquadro "Da stampare" in cima a ogni scheda della lista Bollette: ben visibile, tutto cliccabile,
   si colora di blu quando e' spuntato */
.check-stampa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid #cfd8e3;
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
}
.check-stampa input { width: 20px; height: 20px; cursor: pointer; }
.check-stampa:has(input:checked) {
  border-color: var(--blu);
  background: #e8f3fc;
  color: var(--blu);
}

.report-totali {
  background: white;
  border-radius: 10px;
  padding: 10px;
  flex: 0 0 220px;
  position: sticky;
  top: 12px;
}
.report-totali h3 { margin: 0 0 8px; font-size: 15px; }

@media (max-width: 640px) {
  .report-totali {
    position: static;
    flex-basis: auto;
    width: 100%;
    order: -1;
  }
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }

/* Semplice: una sola colonna, sempre, campi comodi e grandi. Se il
   contenuto non entra in verticale si scorre, senza cercare di forzare
   l'adattamento esatto allo schermo. */
.form-nuova-bolletta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: white;
  padding: 16px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}
.campo-cresce { display: flex; flex-direction: column; min-width: 0; }

.form-nuova-bolletta label { font-size: 15px; color: #555; margin-bottom: 4px; }
.form-nuova-bolletta select,
.form-nuova-bolletta input {
  padding: 14px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
}
.form-nuova-bolletta button {
  margin-top: 8px;
  background: var(--blu);
  color: white;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
}

/* Su alcuni browser mobile il widget nativo del campo data ha una larghezza
   interna minima che ignora "width: 100%" e sfora lo schermo (sia in
   verticale che in orizzontale). Gli si da' un 90% invece del 100%, cosi'
   resta sempre dentro allo schermo con un margine di sicurezza. */
.form-nuova-bolletta input[type="date"] {
  width: 90%;
  min-width: 0;
}

/* Pagina "Archivio allegati" (admin) */
.azioni-archivio { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.azioni-archivio button { flex: 1 1 140px; }
.azioni-archivio button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-elimina-archivio { background: var(--rosso); color: white; }
.btn-elimina-archivio:disabled { background: #bbb; cursor: not-allowed; opacity: 1; }
.riga-selezione { display: flex; gap: 12px; align-items: flex-start; }
.riga-selezione input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }

.messaggio-form { font-size: 13px; margin-top: 4px; }
.messaggio-form.ok { color: var(--verde); }
.messaggio-form.errore { color: var(--rosso); }

.login-box {
  max-width: 320px;
  margin: 80px auto;
  background: white;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  text-align: center;
}
.login-box h1 { color: var(--blu); }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.login-box button {
  background: var(--blu);
  color: white;
  padding: 10px;
}
.errore { color: var(--rosso); font-size: 13px; }

@media print {
  body { background: white; }
  .topbar, .tabs, .report-select, #tab-bollette, #tab-nuova, .allegati, .chiudi, .riga-gruppo input, .check-stampa, .stampa-finale {
    display: none !important;
  }
  main, #tab-report { max-width: none; padding: 0; }

  /* Stesso layout della schermata (e del vecchio report C#): bollette a
     sinistra, riquadro dei totali a destra, mai una sotto l'altra. */
  .report-layout { display: flex; flex-wrap: nowrap; align-items: flex-start; }
  .report-colonna-bollette { flex: 1 1 auto; }
  .report-bolletta {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
    margin-bottom: 10px;
  }
  .report-totali {
    box-shadow: none;
    border: 1px solid #ccc;
    position: static;
    float: none;
    flex: 0 0 180px;
    margin-left: 10px;
  }
}

/* Admin: tab "Regole di divisione" */
.form-nuova-bolletta .riga-radio {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--testo);
  margin-bottom: 8px;
}
.form-nuova-bolletta input[type="radio"] {
  width: 22px;
  height: 22px;
  padding: 0;
  flex: 0 0 auto;
  margin-top: 2px;
}
.riga-regola { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.riga-regola select { flex: 1 1 auto; min-width: 0; }
.form-nuova-bolletta .riga-regola input { width: 110px; flex: 0 0 auto; }
.form-nuova-bolletta .btn-togli-riga {
  margin: 0;
  padding: 12px 14px;
  background: var(--rosso);
  font-size: 16px;
  flex: 0 0 auto;
}
.riga-regola-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.riga-regola-azioni button { flex: 0 0 auto; }
.regole-totale { font-size: 15px; font-weight: 600; }
.regole-totale.errore { color: var(--rosso); }

/* Lista Bollette: una colonna sola. In alto "Da stampare" e quanti gruppi hanno pagato, poi fornitore e
   importo, fattura e scadenza, i gruppi da segnare pagati (sempre visibili, su piu' colonne se c'e'
   spazio), in basso chiusura e pulsante Dettagli; gli allegati stanno in un pannello nascosto */
.espandi-tutte {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #d3dae3;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}
.espandi-tutte input { width: 22px; height: 22px; flex: 0 0 auto; cursor: pointer; }
/* riga piu' sottile e discreta: e' un'opzione, non un contenuto */
.espandi-tutte { padding: 6px 10px; margin-bottom: 10px; font-size: 13px; color: #555; background: none; border-color: transparent; }
.espandi-tutte input { width: 18px; height: 18px; }

.tile-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }

/* Scheda bolletta: chi e quanto in grande, scadenza in chiaro, pagamenti in mezzo, il resto piccolo in fondo */
.testa-bolletta { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.testa-bolletta .nome-bolletta { font-size: 17px; }
.testa-bolletta .importo { font-size: 20px; white-space: nowrap; }
.sotto-bolletta { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 4px 0 2px; font-size: 14px; }
.card-bolletta > .fattura-bolletta { margin: 0 0 8px; }
.sotto-bolletta .scadenza { color: #444; }
.sotto-bolletta .scadenza.vicina { color: #b26a00; font-weight: 600; }
.sotto-bolletta .scadenza.scaduta { color: var(--rosso); font-weight: 700; }
.card-bolletta > button.chiudi { margin-top: 8px; padding: 12px; font-size: 15px; font-weight: 600; }
.card-bolletta > button.chiudi[hidden] { display: none; }
.card-bolletta .tile-piede { align-items: center; justify-content: space-between; margin-top: 8px; }
/* "Da stampare" a sinistra nel suo riquadro (blu quando e' spuntato), "Dettagli" a destra */
/* incastrato nell'angolo in basso a sinistra: i lati sinistro e inferiore sono il bordo della scheda,
   il riquadro disegna solo quello sopra e quello a destra (margini negativi = padding della scheda) */
.card-bolletta .tile-piede .check-stampa {
  margin: 0 0 -14px -14px;
  padding: 10px 16px 10px 14px;
  font-size: 14px;
  border: 2px solid #cfd8e3;
  border-left: none;
  border-bottom: none;
  border-radius: 0 10px 0 4px;
}
.card-bolletta .tile-piede .check-stampa:has(input:checked) { border-color: var(--blu); }
.card-bolletta .tile-piede .check-stampa input { width: 20px; height: 20px; }
.card-bolletta .tile-piede { align-items: flex-end; }
.card-bolletta .tile-piede .btn-dettagli { flex: none; padding: 7px 12px; font-size: 13px; }
.card-bolletta .dettagli > .card-sub { margin: 0 0 4px; }
.card-bolletta .gruppi .riga-gruppo { padding: 7px 2px; }
.titolo-importo { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; }
.titolo-importo .importo { font-size: 19px; white-space: nowrap; }
.card-bolletta > .card-sub { margin: 2px 0 8px; }
/* gruppi sempre in una colonna (un elenco da leggere dall'alto in basso), uguale su PC e telefono */
.gruppi { display: grid; grid-template-columns: 1fr; gap: 0 20px; margin-bottom: 12px; }
.gruppi .riga-gruppo { padding: 10px 2px; cursor: pointer; }
.gruppi .riga-gruppo input { width: 24px; height: 24px; flex: 0 0 auto; }
.gruppi .nome-gruppo { flex: 1 1 auto; min-width: 0; }
.gruppi .quota-gruppo { font-weight: 600; white-space: nowrap; }
.tile-piede { display: flex; gap: 8px; align-items: stretch; }
.tile-piede .chiudi { flex: 1 1 auto; width: auto; }
.stato-gruppi { font-size: 13px; font-weight: 600; color: var(--rosso); white-space: nowrap; }
.stato-gruppi.ok { color: var(--verde); }
.btn-dettagli { flex: 0 0 auto; padding: 10px 14px; font-size: 14px; white-space: nowrap; }
.dettagli { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #c3ccd8; }

/* Casella dei gruppi: doppio tocco per cambiare (niente zoom sul doppio tocco) e suggerimento */
.gruppi .riga-gruppo { cursor: default; }
.gruppi .riga-gruppo input { cursor: pointer; touch-action: manipulation; }
.riga-gruppo .suggerimento { font-size: 12px; font-weight: 600; color: var(--blu); white-space: nowrap; }

/* Pulsante "Copia" accanto ai numeri di fattura */
.btn-copia {
  margin-left: 4px;
  padding: 1px 8px;
  font-size: 11px;
  border-radius: 10px;
  background: #e8f3fc;
  color: var(--blu);
  border: 1px solid #b9d9f0;
  vertical-align: middle;
}
@media print {
  .btn-copia { display: none !important; }
}

/* Tab: con molte voci (amministrazione) si scorrono di lato invece di stringersi */
.tabs { overflow-x: auto; }
.tab-btn { white-space: nowrap; flex: 1 0 auto; }

/* Opzioni avanzate */
.riepilogo-avanzate { margin: 12px 2px 4px; font-weight: 600; }
.stato-bolletta {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #fdeaea;
  color: var(--rosso);
}
.stato-bolletta.chiusa { background: #e6f4ec; color: var(--verde); }
.riga-gruppo-data { flex-wrap: wrap; }
.riga-gruppo-data .nome-gruppo { flex: 1 1 120px; }
.riga-gruppo-data input[type="date"] { width: auto; height: auto; padding: 6px; font-size: 15px; }
.riga-gruppo-data .btn-salva-data { flex: 0 0 auto; padding: 8px 12px; }
.non-pagato { color: #999; font-size: 13px; }
.esito-data { font-size: 12px; }
.esito-data.ok { color: var(--verde); }
.esito-data.errore { color: var(--rosso); }

/* Amministrazione: riapertura bolletta e Anagrafiche */
.btn-riapri { width: 100%; margin-top: 12px; padding: 12px; flex: none; }
.sotto-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sotto-tabs button { flex: 1 1 auto; background: #e8e8e8; color: var(--testo); }
.sotto-tabs button.active { background: var(--blu); color: white; }
.box-anagrafica { background: white; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.box-anagrafica h3 { margin: 0 0 8px; font-size: 16px; }
.box-anagrafica .campo-cresce { margin-bottom: 8px; }
.box-anagrafica label { font-size: 14px; color: #555; margin-bottom: 4px; }
.box-anagrafica input[type="text"],
.box-anagrafica input[type="email"],
.box-anagrafica select { padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; width: 100%; }
.box-anagrafica button.primario { margin-top: 6px; background: var(--blu); color: white; padding: 12px 16px; }
.riga-anagrafica { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eee; }
.riga-anagrafica:first-child { border-top: none; }
.riga-anagrafica .descrizione { flex: 1 1 160px; min-width: 0; }
.riga-anagrafica .descrizione small { display: block; color: #777; }
.riga-anagrafica input[type="checkbox"] { width: 22px; height: 22px; }
.riga-anagrafica select { padding: 8px; font-size: 15px; max-width: 100%; }
.riga-anagrafica.spenta .descrizione { color: #999; }
.riga-anagrafica button { padding: 8px 12px; }

/* Opzioni avanzate: bolletta in una riga, dettagli a scomparsa */
#lista-storico { gap: 10px; }
#lista-storico .card-bolletta { padding: 10px 14px; border-bottom-width: 1px; }
.riga-compatta { cursor: pointer; }
.riga-compatta .card-sub { margin-bottom: 0; }
.freccia { float: right; color: var(--blu); font-size: 16px; }
.dettagli-storico { margin-top: 10px; border-top: 1px solid #eee; padding-top: 8px; }
.azioni-altre { display: flex; gap: 8px; }
.azioni-altre button { flex: 1 1 50%; }
.riga-gruppo-data .btn-salva-data.armato { background: var(--rosso); color: white; font-weight: 600; }
.allegato-mancante { color: var(--rosso); font-weight: 600; margin-bottom: 4px; }
.riga-filtro { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.riga-filtro input { width: 20px; height: 20px; }

/* Amministrazione: al posto della barra delle schede un menu a hamburger (telefono e computer) */
#contenuto-admin .tabs { display: none; }
.menu-admin-mobile { position: relative; background: white; border-bottom: 1px solid #ddd; }
#btn-menu-admin {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border-radius: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--blu);
  text-align: left;
}
#btn-menu-admin .hamburger { font-size: 22px; }
#elenco-menu-admin {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  background: white;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
@media (min-width: 700px) {
  #elenco-menu-admin { right: auto; width: 340px; }
}
#elenco-menu-admin button {
  display: block;
  width: 100%;
  padding: 16px;
  background: none;
  border-radius: 0;
  border-top: 1px solid #eee;
  font-size: 17px;
  text-align: left;
  color: var(--testo);
}
#elenco-menu-admin button.active { color: var(--blu); font-weight: 600; background: #e8f3fc; }
#elenco-menu-admin button[hidden] { display: none; } /* altrimenti "display: block" qui sopra lo mostrerebbe */
#elenco-menu-admin button.voce-esci { border-top: 2px solid #ddd; color: var(--rosso); }

/* Con molte bollette la pagina e' lunga: la barra delle schede resta sempre visibile in alto */
.tabs { position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
@media print { .tabs { position: static; } }

/* Versione del software in fondo all'Admin */
.versione-software {
  text-align: center;
  font-size: 12px;
  color: #777;
  padding: 16px;
}

/* Scheda "Utenti e dispositivi" dell'Admin */
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 8px; vertical-align: middle; }
.badge-casa { background: #e3f2e9; color: var(--verde); }
.badge-fuori { background: #fbe5e2; color: var(--rosso); }
.badge-questo { background: #e1eefa; color: var(--blu); }
.riga-dispositivo .descrizione small { margin-top: 2px; }
.azioni-dispositivo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 100%; }
.azioni-dispositivo input[type="text"] { flex: 1 1 160px; padding: 8px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; }
.azioni-dispositivo button.primario { background: var(--blu); color: white; }
.storico-dispositivo { flex: 1 1 100%; overflow-x: auto; }
.tabella-storico { border-collapse: collapse; font-size: 13px; width: 100%; }
.tabella-storico td { padding: 4px 6px; border-top: 1px solid #eee; white-space: nowrap; }
.modifica-utente { flex: 1 1 100%; padding-top: 6px; }
.box-anagrafica input[type="number"] { padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; width: 100%; }
.box-anagrafica small.card-sub { display: block; margin: 4px 0 0; }
.riga-spunta { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; color: #555; }
.riga-spunta input { width: 22px; height: 22px; }

/* Livello Consultazione (protezione accesa): niente pulsanti che modificano */
body[data-livello="consultazione"] [data-tab="nuova"],
body[data-livello="consultazione"] #tab-nuova,
body[data-livello="consultazione"] #lista-storico .check-stampa, /* in Avanzate cambierebbe il database */
body[data-livello="consultazione"] .chiudi,
body[data-livello="consultazione"] .btn-incolla,
body[data-livello="consultazione"] [data-carica],
body[data-livello="consultazione"] .btn-salva-data { display: none !important; }
body[data-livello="consultazione"] .riga-gruppo input,
body[data-livello="consultazione"] .data-pagamento { pointer-events: none; opacity: 0.7; }

/* Pagina di attesa */
.pagina-attesa { max-width: 520px; margin: 0 auto; }
.codice-verifica { font-size: 40px; font-weight: bold; letter-spacing: 4px; text-align: center; margin: 8px 0; color: var(--blu); }
.elenco-attesa { padding-left: 18px; }
.elenco-attesa li { margin-bottom: 6px; }
#blocco-recupero summary { cursor: pointer; font-weight: bold; }
#blocco-recupero input[type="password"] { padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; width: 100%; }

/* Pagina del vicino */
#totale-vicino { font-weight: bold; margin: 0 0 8px; }
.riga-vicino { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }

/* Novita' nella scheda Utenti e dispositivi */
.badge-nuovo { background: #fff1d6; color: #9a6400; }
.riga-dispositivo.novita { background: #fffaf0; }

/* Scheda "Bollette (filtri)" dell'Admin */
.griglia-filtri { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.filtri-admin input[type="date"],
.filtri-admin input[type="text"],
.filtri-admin select { padding: 10px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; width: 100%; }
.filtri-admin h3 { margin: 12px 0 6px; font-size: 15px; }
.fa-modo { max-width: 260px; margin-top: 8px; }
.azioni-filtri { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.azioni-filtri button.primario { background: var(--blu); color: white; }
.tabella-riepilogo th { text-align: left; padding: 4px 6px; font-size: 13px; color: #555; }
.tabella-riepilogo tr.evidenziata td { font-weight: bold; background: #f3f8fd; }
.stato-bolletta.da-confermare { background: #fff1d6; color: #9a6400; }
.pagato-il { color: var(--verde); font-size: 13px; }

/* Pagine per il vicino (Anagrafiche > Fornitori) */
.box-anagrafica .pagine-vicino { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; padding-left: 30px; }
.box-anagrafica .pagine-vicino label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #555; }
.box-anagrafica .pagine-vicino input[type="text"] { width: 90px; padding: 6px 8px; font-size: 14px; }
.box-anagrafica .pagine-vicino button { padding: 6px 10px; }

/* Revocati e bloccati: sezione chiusa e righe compatte */
.sezione-revocati summary { cursor: pointer; font-weight: bold; font-size: 16px; }
.sezione-revocati[open] summary { margin-bottom: 6px; }
.riga-dispositivo.compatta { padding: 4px 0; }
.riga-dispositivo.compatta .descrizione small { display: inline; margin-right: 8px; }
.riga-dispositivo.compatta .azioni-dispositivo button,
.riga-dispositivo.compatta .azioni-dispositivo select { padding: 4px 8px; font-size: 13px; }
#btn-blocca-tutti, #btn-elimina-revocati { margin-bottom: 8px; }
.box-anagrafica .riga-dispositivo.compatta select { width: auto; max-width: 220px; }

/* Invito (QR) nel Report Sergio a schermo: in fondo, QR a sinistra e testo a destra */
.report-invito { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-top: 16px; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 13px; }
.report-invito-qr { flex: 0 0 140px; width: 140px; }
.report-invito-qr svg { width: 100%; height: auto; display: block; }
.report-invito-testo { flex: 1 1 220px; min-width: 0; }
.report-invito h3 { color: var(--blu); font-size: 15px; margin: 0 0 6px; }
.report-invito p { margin: 4px 0; }
.report-invito-codice strong { font-size: 17px; letter-spacing: 1px; }
.invito-utente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; padding-left: 4px; }
.invito-utente button { padding: 4px 10px; font-size: 13px; }

/* Scheda Registro dell'Admin */
.filtri-registro { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.filtri-registro input[type="text"] { flex: 1 1 220px; padding: 8px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; }
.filtri-registro .card-sub { flex: 1 1 100%; margin: 0; }
.registro-righe { overflow-x: auto; background: white; border-radius: 10px; }
.tabella-registro th { text-align: left; padding: 6px; font-size: 13px; color: #555; border-bottom: 2px solid #ddd; }
.tabella-registro td { vertical-align: top; }
/* tabella larga quanto la pagina: i testi lunghi vanno a capo invece di allargarla (niente scorrimento laterale) */
.tabella-registro td { white-space: normal; }
.tabella-registro .reg-ora { white-space: nowrap; }
.tabella-registro .reg-indirizzo { word-break: break-all; min-width: 110px; }
.tabella-registro .reg-esito { min-width: 90px; overflow-wrap: anywhere; }
.tabella-registro .reg-metodo { color: #888; font-size: 11px; }
.tabella-registro .reg-chi { min-width: 110px; max-width: 200px; }
.tabella-registro small { color: #888; }
.tabella-registro tr:nth-child(even) td { background: #fafafa; }
.tabella-registro tr.reg-rifiutata td { background: #fdf3f2; }

/* Adesivo casa/fuori sempre davanti all'IP, mai separato da lui */
.dove { white-space: nowrap; }
.dove .badge { min-width: 38px; text-align: center; }
.badge-livello { background: #eee; color: #555; }

/* Dispositivi e utenti: titolo, sottotitolo e dati a etichette allineate */
.titolo-dispositivo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.titolo-dispositivo .numero { color: #999; font-size: 12px; }
.riga-anagrafica .sottotitolo { color: #666; font-size: 13px; margin-top: 2px; }
.dati-dispositivo { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; color: #555; }
.dati-dispositivo dt { color: #999; }
.dati-dispositivo dd { margin: 0; }
.dati-dispositivo .quando { color: #888; margin-left: 6px; white-space: nowrap; }
.dati-dispositivo dd > .quando:first-child { margin-left: 0; white-space: normal; }

/* Utenti: livello in alto a destra, dati a sinistra, pulsanti in basso a destra accanto ai dati */
/* Utenti: una riga (due per i vicini), pulsanti in fondo a destra */
/* matita di modifica a sinistra, prima del nome */
.riga-anagrafica.riga-utente { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.riga-utente .azioni-dispositivo { order: -1; }
.riga-utente button.matita { padding: 2px 6px; font-size: 14px; background: none; border: none; cursor: pointer; border-radius: 6px; }
.riga-utente button.matita:hover { background: #eee; }
.badge-info { background: #f0f0f0; color: #555; font-size: 12px; }
.riga-utente .col-invito { justify-self: end; }
.riga-utente .col-invito button.bolla-invito { border: none; cursor: pointer; font-size: 11px; padding: 1px 6px; }
.riga-utente .col-invito button.bolla-invito:hover { filter: brightness(0.95); }
/* colonne fisse (nome | da dove | dispositivi | livello): si allineano da una riga all'altra come una tabella */
.riga-utente .linea-utente { display: grid; grid-template-columns: minmax(70px, 110px) 36px 22px 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.riga-utente .nome-utente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-utente .icona-utente { white-space: nowrap; font-size: 14px; color: #555; cursor: help; text-align: center; }
/* dispositivi: icona a destra nella sua colonna, numero a sinistra nella successiva */
.riga-utente .icona-disp { text-align: right; cursor: help; margin-right: -4px; }
.riga-utente .testo-disp { text-align: left; white-space: nowrap; }
.riga-utente .col-livello { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.riga-utente .col-livello .badge { white-space: nowrap; }
.riga-utente .icona-utente sup { color: var(--verde); font-weight: bold; }
.riga-utente .icona-utente.avviso { color: #b26a00; font-weight: 600; }
.riga-utente .azioni-dispositivo { flex: none; }
.riga-utente .modifica-utente, .riga-utente .messaggio-form { grid-column: 1 / -1; }

/* Revocati: colonne fisse, si leggono in verticale */
.colonne-revocato { display: grid; grid-template-columns: minmax(0, 1fr) 130px 76px; gap: 4px 12px; align-items: center; font-size: 13px; }
.colonne-revocato .col-nome { min-width: 0; }
.colonne-revocato .col-nome small { color: #999; margin-left: 4px; }
.colonne-revocato .col-quando { color: #888; white-space: nowrap; }
/* azioni dei revocati accanto ai dati quando c'e' spazio, altrimenti sotto a destra */
.riga-dispositivo.compatta .descrizione { flex: 1 1 320px; }
.riga-dispositivo.compatta .azioni-dispositivo { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; gap: 2px; }
/* icone piccole al posto dei pulsanti (storico, riapprova, elimina) */
.riga-anagrafica .azioni-dispositivo button.icona-azione { display: inline-flex; align-items: center; padding: 5px; background: none; border: none; cursor: pointer; border-radius: 6px; color: #555; }
.riga-anagrafica .azioni-dispositivo button.icona-azione:hover { background: #eee; }
.riga-anagrafica .azioni-dispositivo button.icona-cestino { color: #c0392b; }
.riga-anagrafica .azioni-dispositivo button.icona-cestino:hover { background: #fbe5e2; }
.riga-anagrafica .azioni-dispositivo button.icona-approva { color: var(--verde); }
.riga-anagrafica .azioni-dispositivo button.icona-approva:hover { background: #e3f2e9; }
/* conferma col secondo clic: icona piena + fumetto sopra, senza cambiare la misura del pulsante */
.riga-anagrafica .azioni-dispositivo button.icona-azione { position: relative; }
.riga-anagrafica .azioni-dispositivo button.icona-cestino.in-conferma,
.riga-anagrafica .azioni-dispositivo button.icona-cestino.in-conferma:hover,
.riga-anagrafica .azioni-dispositivo button.icona-revoca.in-conferma,
.riga-anagrafica .azioni-dispositivo button.icona-revoca.in-conferma:hover { background: #c0392b; color: white; }
.riga-anagrafica .azioni-dispositivo button.icona-revoca { color: #c0392b; }
.riga-anagrafica .azioni-dispositivo button.icona-revoca:hover { background: #fbe5e2; }

/* Approvati: una riga (matita | nome | di chi | dove | quando) + icone; la casella del nome si apre sotto */
/* icone dispositivo / sistema / browser: tre caselle fisse, cosi' si allineano da una riga all'altra */
.icone-dispositivo { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.icone-dispositivo .icona-info { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; cursor: help; }
.riga-dispositivo.spenta .icone-dispositivo { opacity: .6; }
.nome-dispositivo { cursor: help; }
/* nome sempre su una riga: icone, nome (con "…" se lungo) e adesivi; numero e dettagli nel suggerimento */
.colonne-approvato .col-nome, .colonne-revocato .col-nome { display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
.colonne-approvato .col-nome .nome-dispositivo, .colonne-revocato .col-nome .nome-dispositivo { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.colonne-approvato .col-nome .badge, .colonne-revocato .col-nome .badge,
.colonne-approvato .col-nome .icone-dispositivo, .colonne-approvato .col-nome .matita { flex: none; }
.colonne-revocato .col-nome .icone-dispositivo { flex: none; }
.icone-con-scheda { display: inline-flex; flex: none; }
.pallino-questo { color: var(--blu); font-size: 12px; flex: none; cursor: help; }
/* Intestazione con le colonne per ordinare (stesse colonne delle righe) */
.intestazione-dispositivi { border-top: none; border-bottom: 2px solid #e4e4e4; padding: 2px 0 4px; }
.intestazione-dispositivi button { background: none; border: none; padding: 2px 0; margin: 0; cursor: pointer; font-size: 12px; font-weight: 600;
  color: #777; text-align: left; border-radius: 4px; white-space: nowrap; }
.intestazione-dispositivi button:hover { color: var(--blu); background: #f3f6fa; }
.intestazione-dispositivi .icone-dispositivo button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; opacity: .55; }
.intestazione-dispositivi .icone-dispositivo button svg { filter: grayscale(1); }
.intestazione-dispositivi button.ordinata { color: var(--blu); opacity: 1; }
.intestazione-dispositivi button.ordinata svg { filter: none; }
.intestazione-dispositivi button[data-verso]:not([data-verso=""])::after { content: attr(data-verso); font-size: 9px; margin-left: 2px; }
.intestazione-dispositivi .icone-dispositivo button[data-verso]:not([data-verso=""]) { position: relative; }
.intestazione-dispositivi .icone-dispositivo button[data-verso]:not([data-verso=""])::after { position: absolute; bottom: -9px; left: 6px; margin: 0; }
.intestazione-dispositivi .colonne-approvato .col-nome { padding-left: 28px; }
@media (max-width: 560px) { .intestazione-dispositivi { display: none; } }

/* i revocati non hanno la matita: stesso rientro, cosi' le icone stanno in colonna con gli approvati */
.colonne-revocato .col-nome { padding-left: 28px; }
@media (max-width: 560px) { .colonne-revocato .col-nome { padding-left: 0; } }

/* approvati e revocati con le stesse colonne (nome | di chi | dove | quando | icone): tutto allineato */
.colonne-approvato, .colonne-revocato { grid-template-columns: minmax(0, 1fr) 64px 130px 76px !important; }
.riga-dispositivo.compatta .azioni-dispositivo { width: 92px; flex: none; justify-content: flex-start; }
.colonne-approvato .col-nome small, .colonne-revocato .col-nome small { white-space: nowrap; }
.colonne-approvato .col-utente .badge { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonne-approvato { display: grid; gap: 4px 12px; align-items: center; font-size: 13px; }
.colonne-approvato .col-nome { min-width: 0; }
.colonne-approvato .col-nome small { color: #999; margin-left: 2px; }
.colonne-approvato .col-quando { color: #888; white-space: nowrap; cursor: help; }
.riga-approvato button.matita { padding: 2px 4px; font-size: 13px; background: none; border: none; cursor: pointer; border-radius: 6px; margin-right: 2px; }
.riga-approvato button.matita:hover { background: #eee; }
.riga-approvato .area-nome { flex: 1 1 100%; display: flex; gap: 6px; align-items: center; }
.riga-approvato .area-nome[hidden] { display: none; }
.riga-approvato .area-nome input { flex: 1 1 200px; padding: 6px 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; }
.riga-approvato .area-nome button.primario { background: var(--blu); color: white; padding: 6px 12px; margin: 0; }
@media (max-width: 560px) {
  .colonne-approvato, .colonne-revocato { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .colonne-approvato .col-nome, .colonne-revocato .col-nome { grid-column: 1 / -1; }
  .riga-dispositivo.compatta .azioni-dispositivo { width: auto; }
}
.fumetto-conferma { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 5; white-space: nowrap; pointer-events: none;
  background: #333; color: white; font-size: 12px; padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.fumetto-conferma::after { content: ""; position: absolute; top: 100%; right: 10px; border: 5px solid transparent; border-top-color: #333; }
.riga-dispositivo.compatta .azioni-dispositivo [hidden] { display: none; }