/* ────────────────────────────────────────────────────────────────────────────
   /assets/css/login.css
   Stile della pagina di login: immagine di sfondo a tutta pagina,
   card centrata con logo/titolo in testa al form.
   ──────────────────────────────────────────────────────────────────────────── */

html, body
{
	height: 100%;
	margin: 0;
}

body.login-page
{
	background-image: url('../images/login.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.login-card
{
	width: 100%;
	max-width: 360px;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 1rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Logo e testi affiancati su una riga: il blocco titolo+sottotitolo sta
   a fianco del logo, non sotto, e i due elementi sono centrati
   verticalmente tra loro. Rispetto alla disposizione in colonna si
   recuperano circa 60px di altezza, che servono al QR del setup 2FA. */
.login-card__brand
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	text-align: left;
	margin-bottom: 0.5rem;
}

/* Il blocco dei testi non deve allargarsi oltre il necessario, così la
   coppia logo+testi resta centrata nella card. */
.login-card__testi
{
	min-width: 0;
}

.login-card__logo
{
	max-width: 64px;
	max-height: 64px;
	flex-shrink: 0;
}

.login-card__subtitle
{
	font-size: 0.875rem;
	color: #6c757d;
	margin: 0;
}

/* Variante più larga per pagine con più contenuto (es. setup 2FA con QR). */
.login-card--larga
{
	max-width: 420px;
}

/* ─────────────────────────────────────────────────────────────────────
   Secret TOTP cliccabile (pannello di setup 2FA)

   Il valore è mostrato in gruppi di 4 cifre per leggibilità, mentre il
   testo effettivamente copiato (senza spazi) vive nel tag <cc-text>
   nascosto. L'intero contenitore è cliccabile: testo e icona copiano
   entrambi, come da specifica.
   ───────────────────────────────────────────────────────────────────── */

/* Nasconde il tag custom di CopyClip già al primo paint. Il plugin
   inietta la stessa regola, ma solo quando il JavaScript entra in
   esecuzione: nel frattempo il valore lampeggerebbe visibile e
   duplicato. */
cc-text
{
	display: none;
}

.secret-totp
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.35rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	background-color: #f8f9fa;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.secret-totp:hover
{
	background-color: #eef0f2;
	border-color: #adb5bd;
}

/* Font monospazio esplicito: il valore va letto carattere per carattere
   quando viene digitato a mano nell'app di autenticazione. */
.secret-totp__valore
{
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: #212529;
	padding: 0;
	background: none;
}

.secret-totp__icona
{
	font-size: 0.9rem;
	color: #6c757d;
	transition: color 0.15s ease;
}

.secret-totp:hover .secret-totp__icona
{
	color: #212529;
}

/* ─────────────────────────────────────────────────────────────────────
   QR del setup 2FA

   L'SVG generato da genera_qr_totp_svg() ha un viewBox e nessuna
   dimensione fissa: la grandezza a schermo si decide qui. Essendo
   vettoriale resta nitido a qualsiasi valore, e su schermi stretti
   rimpicciolisce da sé senza uscire dalla card.
   ───────────────────────────────────────────────────────────────────── */
.qr-totp svg
{
	width: 100%;
	max-width: 147px;
	height: auto;
	display: block;
	margin: 0 auto;

	/* Sfondo bianco sull'SVG stesso e non sul contenitore: così si
	   ingrandisce insieme al QR quando viene scalato, invece di restare
	   un rettangolo delle dimensioni originali dietro un QR più grande.
	   Il padding fa da "quiet zone", il margine chiaro che i lettori di
	   QR si aspettano attorno al codice e che TCPDF non genera: finché
	   lo sfondo era trasparente ci pensava il bianco della card, ora che
	   è esplicito va reso intenzionale. */
	background-color: #ffffff;
	padding: 6px;
	border-radius: 4px;

	/* Il cursore sparisce sopra il QR: non c'è nulla da cliccare, e
	   l'ingrandimento all'hover è già di per sé il riscontro visivo. */
	cursor: none;

	/* position + transition preparano l'ingrandimento della regola sotto:
	   senza position lo z-index in hover non avrebbe effetto. */
	position: relative;
	transform-origin: center center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Ingrandimento al passaggio del mouse, per leggere il QR senza doverlo
   inquadrare da vicino. Lo z-index alto è indispensabile: un elemento
   scalato resta nel proprio livello di impilamento e finirebbe sotto al
   testo del secret e al form sottostante. */
.qr-totp svg:hover
{
	transform: scale(2);
	z-index: 30;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}