/*
 * Pagine di accesso (login, logout): sfondo a onde sonore e card di vetro.
 * Lo sfondo animato e' img/login_onde.svg, generato da cli/genera_sfondo_login.php.
 */

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 20px 16px;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Avorio caldo con tre aloni appena accennati; le onde sono in img/login_onde.svg */
	background:
		radial-gradient(60vmax 45vmax at 15% 10%, rgba(143, 196, 125, .28), transparent 60%),
		radial-gradient(55vmax 40vmax at 90% 85%, rgba(233, 162, 58, .22), transparent 60%),
		radial-gradient(50vmax 40vmax at 85% 15%, rgba(122, 166, 201, .20), transparent 60%),
		#f6f4ef;
	overflow-x: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------------
   Onde sonore animate (generate da cli/genera_sfondo_login.php).
   La scia di luce sotto le onde passa dietro al box e rende visibile
   il vetro.
   ------------------------------------------------------------------ */
.bg-onde {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.login-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
}

/* ------------------------------------------------------------------
   Card di vetro
   ------------------------------------------------------------------ */
.login-box {
	--mx: 30%;
	--my: 0%;
	position: relative;
	padding: 38px 36px 30px;
	border-radius: 28px;
	color: #1f2a37;
	background: linear-gradient(145deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, .12) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	/* filo scuro esterno per staccarsi dal fondo chiaro, ombre morbide,
	   luce interna sul bordo alto */
	box-shadow:
		0 0 0 1px rgba(40, 40, 60, .07),
		0 30px 80px -24px rgba(60, 50, 30, .30),
		0 8px 24px -10px rgba(60, 50, 30, .18),
		inset 0 1px 1px rgba(255, 255, 255, 1),
		inset 0 0 0 1px rgba(255, 255, 255, .35),
		inset 0 0 40px rgba(255, 255, 255, .25);
	animation: enter .7s cubic-bezier(.2, .8, .2, 1) both;
}

/* Browser senza backdrop-filter: vetro piu' opaco per restare leggibile */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.login-box { background: rgba(255, 255, 255, .88); }
}

/* Bordo sfumato: luminoso in alto a sinistra, quasi invisibile in basso a destra */
.login-box::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.2px;
	pointer-events: none;
	background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .6));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Grana + riflesso che segue il mouse */
.login-box::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 45%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: .55;
	mix-blend-mode: soft-light;
}

.login-inner {
	position: relative;
	z-index: 1;
}

.login-inner.shake {
	animation: shake .45s cubic-bezier(.36, .07, .19, .97) .5s both;
}

@keyframes enter { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes shake {
	15%, 55% { transform: translateX(-7px); }
	35%, 75% { transform: translateX(7px); }
	90% { transform: translateX(-2px); }
}

/* ------------------------------------------------------------------
   Intestazione
   ------------------------------------------------------------------ */
.login-header {
	text-align: center;
	margin-bottom: 26px;
}

.login-header img {
	max-width: 160px;
	height: auto;
	filter: drop-shadow(0 4px 12px rgba(255, 255, 255, .5));
}

.login-header p {
	margin: 10px 0 0;
	font-size: 14px;
	color: #3b4a5c;
}

/* ------------------------------------------------------------------
   Messaggi
   ------------------------------------------------------------------ */
.login-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	margin-bottom: 18px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.login-alert i { margin-top: 2px; }

.login-alert.error {
	color: #9f1f16;
	background: rgba(255, 225, 220, .78);
	border: 1px solid rgba(230, 110, 100, .5);
}

.login-alert.info {
	color: #1d4f86;
	background: rgba(220, 236, 255, .78);
	border: 1px solid rgba(110, 160, 230, .5);
}

.login-alert.success {
	color: #2c6b28;
	background: rgba(222, 242, 214, .8);
	border: 1px solid rgba(120, 180, 100, .5);
}

/* Testo introduttivo sotto l'intestazione (recupero password) */
.login-testo {
	margin: 0 2px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #2f3d4e;
}

/* Link secondari: "Password dimenticata?", "Torna all'accesso" */
.forgot-link,
.login-link a {
	font-size: 14px;
	font-weight: 500;
	color: #3f3f44;
	text-decoration: none;
}

.forgot-link:hover,
.login-link a:hover {
	text-decoration: underline;
}

.login-link {
	margin: 20px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------------
   Campi
   ------------------------------------------------------------------ */
.form-group {
	margin-bottom: 16px;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.input-wrapper > i:first-child {
	position: absolute;
	left: 17px;
	color: #5b6b7e;
	font-size: 15px;
	transition: color .2s ease;
}

.input-wrapper input {
	width: 100%;
	padding: 15px 48px 15px 46px;
	font-size: 15px;
	color: #1a2330;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .65);
	background: rgba(255, 255, 255, .62);
	box-shadow: inset 0 2px 4px rgba(15, 23, 42, .08), 0 1px 0 rgba(255, 255, 255, .6);
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.input-wrapper input::placeholder {
	color: #6b7a8c;
}

.input-wrapper input:focus {
	outline: none;
	background: rgba(255, 255, 255, .78);
	border-color: rgba(92, 92, 97, .55);
	box-shadow: inset 0 2px 4px rgba(15, 23, 42, .06), 0 0 0 4px rgba(92, 92, 97, .12);
}

.input-wrapper:focus-within > i:first-child {
	color: #3f3f44;
}

.input-wrapper.has-error input {
	border-color: rgba(220, 70, 60, .65);
	background: rgba(255, 240, 238, .6);
}

.input-wrapper.has-error > i:first-child {
	color: #c9372c;
}

.toggle-password {
	position: absolute;
	right: 10px;
	background: none;
	border: none;
	color: #5b6b7e;
	cursor: pointer;
	padding: 8px;
	font-size: 16px;
	transition: color .2s ease;
}

.toggle-password:hover {
	color: #3f3f44;
}

.form-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 2px 22px;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #2f3d4e;
	user-select: none;
}

.remember-me input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: #5c5c61;
}

/* ------------------------------------------------------------------
   Pulsante
   ------------------------------------------------------------------ */
.btn-login {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 15px;
	border: none;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, #5c5c61 0%, #666666 100%);
	box-shadow: 0 10px 24px -8px rgba(40, 40, 45, .55), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(0, 0, 0, .15);
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Riflesso sulla meta' alta */
.btn-login::before {
	content: "";
	position: absolute;
	inset: 0 0 50% 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
}

/* Lampo che attraversa al passaggio del mouse */
.btn-login::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
}

.btn-login:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -8px rgba(40, 40, 45, .6), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(0, 0, 0, .15);
}

.btn-login:hover::after {
	left: 120%;
}

.btn-login:active {
	transform: translateY(0);
}

.btn-login span {
	position: relative;
}

/* ------------------------------------------------------------------
   Logout
   ------------------------------------------------------------------ */
.logout-icon {
	width: 64px;
	height: 64px;
	margin: 4px auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 28px;
	color: #3f8f3a;
	background: rgba(220, 240, 210, .75);
	border: 1px solid rgba(120, 180, 100, .45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 20px -10px rgba(63, 143, 58, .5);
}

.logout-title {
	margin: 0 0 6px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: #1a2330;
}

.logout-text {
	margin: 0 0 18px;
	text-align: center;
	font-size: 14px;
	color: #3b4a5c;
}

/* Barra che si svuota nei secondi prima del ritorno al login */
.logout-countdown {
	height: 4px;
	margin: 0 0 22px;
	border-radius: 2px;
	overflow: hidden;
	background: rgba(92, 92, 97, .12);
}

.logout-countdown span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #5fb04a, #e9a23a, #de5a4c);
	transform-origin: left;
	animation: countdown 5s linear forwards;
}

@keyframes countdown { to { transform: scaleX(0); } }

/* Il pulsante e' un link: stesso aspetto di .btn-login */
a.btn-login {
	display: block;
	text-align: center;
	text-decoration: none;
}

@media (max-width: 480px) {
	.login-box {
		padding: 30px 22px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.login-box,
	.login-inner.shake,
	.logout-countdown span {
		animation: none;
	}
}