/* Elenco delle utenze di prova sotto il modulo di accesso.
   Aggiunta nostra, non presente nell'app della software house: serve solo
   a mostrare la copia locale senza dover ricordare quattro password.
   Sta su due colonne perché la card di accesso non ha spazio in verticale. */

#ac-demo { display: none; margin-top: 12px; }
#ac-root[data-mode="login"] #ac-demo { display: block; }

#ac-demo .dm-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .3); margin-bottom: 6px;
}
#ac-demo .dm-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent);
}
#ac-demo .dm-head em { font-style: normal; color: rgba(255, 255, 255, .22); }

/* L'elenco cresce a ogni registrazione: oltre tre file si scorre, così la
   card di accesso non si allunga all'infinito. */
#ac-demo .dm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 160px; overflow-y: auto; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(158, 224, 141, .35) transparent;
}
#ac-demo .dm-grid::-webkit-scrollbar { width: 6px; }
#ac-demo .dm-grid::-webkit-scrollbar-thumb {
  background: rgba(158, 224, 141, .3); border-radius: 3px;
}
#ac-demo .dm-grid::-webkit-scrollbar-track { background: transparent; }

#ac-demo .dm-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 6px 10px; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 9px;
  background: rgba(255, 255, 255, .028);
  font: inherit; color: inherit;
  transition: background .16s ease, border-color .16s ease;
}
#ac-demo .dm-row:hover {
  background: rgba(158, 224, 141, .09);
  border-color: rgba(158, 224, 141, .3);
}

#ac-demo .dm-ruolo {
  display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3;
  color: rgba(255, 255, 255, .86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ac-demo .dm-mail,
#ac-demo .dm-pwd {
  display: block; font-size: 10.5px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ac-demo .dm-mail { color: rgba(255, 255, 255, .38); }

/* clienti registrati dal portale (salvati in stato/registrazioni.json) */
#ac-demo .dm-row.nuovo { border-color: rgba(158, 224, 141, .26); }
#ac-demo .dm-tag {
  margin-left: 6px; padding: 1px 5px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #0b1408; background: #9EE08D; vertical-align: 1px;
}
#ac-demo .dm-pwd { color: #9EE08D; font-weight: 600; }

/* La card cresce di 150px: entro i 720px di finestra ci sta ancora tutta.
   Sotto no, e la loro root è overflow:hidden — qui la si lascia scorrere. */
#ac-root[data-mode="login"] { overflow-y: auto; }

/* ---------- mostra/nascondi password ----------
   Il campo password della loro .ac-field ha padding-right 16: si riduce lo
   spazio del testo per fare posto al pulsante, senza toccare gli altri campi. */
.ac-field:has(> .ac-occhio) input { padding-right: 46px; }

.ac-occhio {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .4);
  transition: color .18s ease, background .18s ease;
}
.ac-occhio:hover { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); }
.ac-occhio:focus-visible {
  outline: none; color: #9EE08D;
  box-shadow: 0 0 0 3px rgba(92, 178, 81, .3);
}
.ac-occhio[aria-pressed="true"] { color: #9EE08D; }

.ac-occhio .oc-off { display: none; }
.ac-occhio[aria-pressed="true"] .oc-on { display: none; }
.ac-occhio[aria-pressed="true"] .oc-off { display: block; }