/*
 * Pagine di Keycloak nel corpo della card di login del backoffice (dopo sapel.css).
 * Dentro l'iframe il fondo è trasparente: si vede il vetro della card della pagina.
 */

html,
body.sapel-kc {
  background: transparent;
}

body.sapel-kc {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* Misurato da sapel.js: flow-root tiene dentro i margini del primo e
   dell'ultimo elemento, così l'iframe è alto quanto il contenuto */
#sapel-kc-contenuto {
  display: flow-root;
}

/* Nell'iframe: spazio per l'anello di focus dei campi (box-shadow di 3px), che
   il bordo dell'iframe taglierebbe. L'iframe sporge di altrettanto
   (.sapel-login-frame in sapel.css), così il modulo resta allineato al titolo */
body.sapel-kc:not(.sapel-kc-pagina) #sapel-kc-contenuto {
  padding: 4px;
}

#sapel-kc-contenuto > h3 {
  margin-top: 0.75rem;
}

/* Aperta da sola (es. conferma dell'uscita): sfondo e card come la pagina di login */
body.sapel-kc.sapel-kc-pagina {
  max-width: 30rem;
  margin: 10vh auto;
  padding: 2.5rem;
  border-radius: 1.5rem;
  overflow: visible;
  background-color: color-mix(in oklab, #fff 5%, transparent);
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

html:has(body.sapel-kc-pagina) {
  min-height: 100%;
  background-color: oklch(27.8% 0.033 256.848);
}

.sapel-kc a {
  color: oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue));
}

/* Errori, avvisi e conferme di Keycloak */
.sapel-kc-messaggio--error,
.sapel-kc-errore {
  color: #ff8a9b;
}

.sapel-kc-messaggio--warning {
  color: #ffd27a;
}

.sapel-kc-messaggio--success,
.sapel-kc-messaggio--info {
  color: color-mix(in oklab, #fff 80%, transparent);
}

/* Pulsante secondario (Prova in un altro modo, nuovo codice) sul vetro scuro */
.sapel-kc-secondario {
  color: #fff;
  background-color: color-mix(in oklab, #fff 8%, transparent);
  border: 1px solid color-mix(in oklab, #fff 22%, transparent);
}

.sapel-kc-secondario:hover {
  color: #fff;
  background-color: color-mix(in oklab, #fff 14%, transparent);
}

/* Scelta del secondo fattore */
.sapel-kc-metodi {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sapel-kc-metodo {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  color: #fff;
  background-color: color-mix(in oklab, #fff 6%, transparent);
  border: 1px solid color-mix(in oklab, #fff 22%, transparent);
  border-radius: var(--sapel-radius);
  cursor: pointer;
}

.sapel-kc-metodo:hover {
  border-color: oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue));
}

.sapel-kc-metodo__titolo {
  font-weight: 600;
}

.sapel-kc-metodo__descrizione {
  font-size: 0.8125rem;
  color: color-mix(in oklab, #fff 65%, transparent);
}

/* Collegamento dell'app: passi, QR code e chiave */
.sapel-kc-passi {
  padding-left: 1.25rem;
  color: color-mix(in oklab, #fff 85%, transparent);
}

.sapel-kc-passi li + li {
  margin-top: 0.5rem;
}

.sapel-kc-qr {
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--sapel-radius);
}

.sapel-kc-segreto {
  display: block;
  margin: 0.5rem 0;
  font-family: var(--sapel-font-mono);
  word-break: break-all;
  color: #fff;
}