/*
 * crossauth.css
 *
 * Stili per il flusso autorizzazione cross-device via QR.
 * Lato PC (login page): QR canvas, countdown, stato polling.
 * Lato mobile (profilo): video camera, pannello conferma, esito.
 *
 * @module    CrossAuth
 * @version   2.0.0
 * @since     2026-08-10
 * @depends   variables.css
 */

/* ── PC: wrapper QR ─────────────────────────────────────────────────────────── */

/*
  COMPONENTE: Wrapper QR code sul PC
  USO: contenitore centrato con QR canvas + countdown + stato polling
  DIPENDENZE CSS: variables.css → --glass-bg, --radius-sm
*/
.crossauth-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 4px;
}

/* Il QR richiede sfondo bianco per leggibilità su sfondi scuri */
.crossauth-qr-wrap > div > canvas,
.crossauth-qr-wrap > div > img {
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
}

.crossauth-countdown {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  text-align: center;
}

.crossauth-countdown--warning { color: var(--color-warning); }
.crossauth-countdown--expired  { color: var(--color-error); }

.crossauth-status {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  min-height: 1.4em;
}

.crossauth-status--approved {
  color: var(--color-success);
  font-weight: 600;
}

/* ── Mobile: conferma e risultato ───────────────────────────────────────────── */

/*
  COMPONENTE: Pannello info dispositivo richiedente
  USO: mostrato nella schermata di conferma prima dell'approvazione
  VARIANTI: dl grid per IP/Browser
*/
.crossauth-device-info {
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.crossauth-device-info strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
}

.crossauth-device-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}

.crossauth-device-info dt { color: var(--text-muted); }
.crossauth-device-info dd { margin: 0; word-break: break-all; }

/*
  COMPONENTE: Azioni conferma (Approva / Annulla)
  USO: riga pulsanti nella schermata di conferma
*/
.crossauth-confirm__actions {
  display: flex;
  gap: 8px;
}

.crossauth-confirm__actions .btn { flex: 1; }

.crossauth-result {
  text-align: center;
  font-size: 0.95rem;
  padding: 8px 0;
}

.crossauth-result--success { color: var(--color-success); }
.crossauth-result--error   { color: var(--color-error); }
.crossauth-result--info    { color: var(--color-info); }