/*
 * Login page (admin + dealer), "Liquid Glass" style: clear glass surfaces over a
 * slowly drifting colour field, specular rim light, capsule controls, and a soft
 * highlight that follows the pointer (--lp-x / --lp-y set by a small inline script).
 * Plain CSS, loaded after style.css and theme.css; not part of the mix build.
 */

.login-page {
	--lp-bg: #eef1f6;
	--lp-blob-1: #5ac8fa;
	--lp-blob-2: #0a84ff;
	--lp-blob-3: #bf5af2;
	--lp-blob-4: #64d2ff;
	--lp-blob-opacity: .75;

	--lp-glass: rgba(255, 255, 255, .22);
	--lp-rim-top: rgba(255, 255, 255, .9);
	--lp-rim-bottom: rgba(255, 255, 255, .25);
	--lp-inner-shade: rgba(0, 0, 0, .06);
	--lp-shadow: 0 24px 60px rgba(20, 40, 90, .18), 0 2px 8px rgba(20, 40, 90, .08);

	--lp-text: #1d1d1f;
	--lp-text-2: rgba(29, 29, 31, .62);
	--lp-ring: rgba(10, 132, 255, .35);

	--lp-x: 50%;
	--lp-y: 0%;

	/* Phones: overflow: hidden on body locks the whole page, and 100vh is taller than what
	   Safari shows - the card sat under the browser bars with the button out of reach (worse
	   with the keyboard open). Scroll when it does not fit, size by the visible height (dvh),
	   keep clear of the notch and the home bar. */
	min-height: 100vh;
	min-height: 100dvh;
	padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--lp-text);
	background: var(--lp-bg);
	position: relative;
	overflow-x: hidden;
}

/* The canvas around the page (bars, overscroll) in the page's own colour */
html:has(> body.login-page) {
	background-color: #eef1f6;
}

:root[data-theme="dark"]:has(> body.login-page) {
	background-color: #05060a;
}

/* Colour field behind the glass: two layers of soft blobs drifting slowly */
.login-page::before,
.login-page::after {
	content: "";
	position: fixed;
	inset: -20vmax;
	z-index: 0;
	pointer-events: none;
	opacity: var(--lp-blob-opacity);
	filter: blur(60px) saturate(140%);
}

.login-page::before {
	background:
		radial-gradient(28vmax 28vmax at 22% 30%, var(--lp-blob-1), transparent 70%),
		radial-gradient(34vmax 34vmax at 78% 72%, var(--lp-blob-3), transparent 70%);
	animation: lp-drift-a 26s ease-in-out infinite alternate;
}

.login-page::after {
	background:
		radial-gradient(30vmax 30vmax at 70% 25%, var(--lp-blob-2), transparent 70%),
		radial-gradient(24vmax 24vmax at 30% 80%, var(--lp-blob-4), transparent 70%);
	animation: lp-drift-b 32s ease-in-out infinite alternate;
}

@keyframes lp-drift-a {
	to { transform: translate3d(6vmax, 4vmax, 0) rotate(12deg) scale(1.08); }
}

@keyframes lp-drift-b {
	to { transform: translate3d(-5vmax, -6vmax, 0) rotate(-10deg) scale(1.1); }
}

.login-page > .container {
	position: relative;
	z-index: 1;
}

/* Glass surface: clear fill, heavy blur, rim light top-left, darker rim bottom-right */
.login-glass {
	position: relative;
	background: var(--lp-glass);
	-webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.05);
	backdrop-filter: blur(28px) saturate(190%) brightness(1.05);
	box-shadow:
		inset 0 1px 0 var(--lp-rim-top),
		inset 1px 0 0 rgba(255, 255, 255, .35),
		inset 0 -1px 0 var(--lp-rim-bottom),
		inset 0 -12px 24px -12px var(--lp-inner-shade),
		var(--lp-shadow);
	isolation: isolate;
}

/* Gradient rim: brighter where light hits, fading along the edge */
.login-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 35%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
	z-index: 1;
}

/* Specular sheen that follows the pointer */
.login-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--lp-x) var(--lp-y), rgba(255, 255, 255, .35), transparent 45%);
	mix-blend-mode: soft-light;
	pointer-events: none;
	z-index: 1;
}

.login-card {
	border: 0;
	border-radius: 34px;
	animation: lp-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.login-card .card-body {
	position: relative;
	z-index: 2;
	padding: 2.75rem 2.25rem 2.25rem;
	text-align: center;
}

.login-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 1.25rem;
	border-radius: 22px;
	color: #fff;
	font-size: 1.85rem;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
		linear-gradient(145deg, #5ac8fa, #0a84ff 55%, #5e5ce6);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, .8),
		inset 0 -2px 6px rgba(0, 0, 60, .25),
		0 10px 24px rgba(10, 132, 255, .35);
	text-shadow: 0 1px 2px rgba(0, 0, 60, .3);
}

.login-card h1 {
	margin: 0 0 .3rem;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.1;
	color: var(--lp-text);
}

.login-brand-name {
	margin-bottom: 1.9rem;
	font-size: 1rem;
	color: var(--lp-text-2);
}

.login-field {
	margin-bottom: .7rem;
}

/* Capsule glass fields */
.login-card .form-control {
	height: 50px;
	padding: 0 1.3rem;
	border: 0;
	border-radius: 999px;
	background: rgba(120, 120, 140, .1);
	color: var(--lp-text);
	font-size: 1rem;
	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, .1),
		inset 0 -1px 0 rgba(255, 255, 255, .7),
		0 0 0 1px rgba(120, 120, 140, .14);
	transition: background-color .25s ease, box-shadow .25s ease;
}

.login-card .form-control::placeholder {
	color: var(--lp-text-2);
}

.login-card .form-control:focus {
	background: rgba(255, 255, 255, .5);
	color: var(--lp-text);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, .06),
		0 0 0 1px rgba(255, 255, 255, .6),
		0 0 0 5px var(--lp-ring);
}

.login-remember {
	display: inline-flex;
	align-items: center;
	margin: .7rem 0 1.6rem;
	color: var(--lp-text-2);
	font-size: .95rem;
	cursor: pointer;
}

/* iOS-style toggle: 44x26 track, round glassy knob, green when on (CoreUI uses !important) */
.login-remember .switch {
	width: 44px;
	height: 26px;
}

.login-remember .switch-3d .switch-label,
.login-remember .switch.switch-3d .switch-label {
	background-color: rgba(120, 120, 128, .22) !important;
	border: 0;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}

.login-remember .switch-3d .switch-handle {
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	background: linear-gradient(180deg, #fff, #f2f2f7);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(0, 0, 0, .05);
	transition: left .3s cubic-bezier(.3, 1.4, .5, 1);
}

.login-remember .switch-primary > .switch-input:checked ~ .switch-label {
	background: #34c759 !important;
}

.login-remember .switch-primary > .switch-input:checked ~ .switch-handle {
	left: 20px;
}

/* Tinted glass capsule button */
.login-submit {
	position: relative;
	height: 50px;
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -.01em;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%),
		rgba(10, 132, 255, .88);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	backdrop-filter: blur(12px) saturate(180%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -1px 0 rgba(0, 0, 80, .2),
		0 8px 20px rgba(10, 132, 255, .35);
	transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease, background-color .2s ease;
}

.login-submit:hover,
.login-submit:focus {
	color: #fff;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%),
		rgba(10, 132, 255, .95);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		inset 0 -1px 0 rgba(0, 0, 80, .2),
		0 10px 26px rgba(10, 132, 255, .45);
}

.login-submit:focus {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		0 0 0 5px var(--lp-ring);
}

.login-submit:active {
	transform: scale(.97);
}

.login-card .alert {
	border: 0;
	border-radius: 18px;
	background: rgba(255, 59, 48, .14);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
	color: #c9000f;
	text-align: left;
}

@keyframes lp-rise {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.97);
		filter: blur(6px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.login-card,
	.login-page::before,
	.login-page::after {
		animation: none;
	}
}

/* Without backdrop-filter the glass would be unreadable: fall back to frosted white */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.login-glass {
		background: rgba(255, 255, 255, .88);
	}
}

@media (max-width: 575.98px) {
	.login-card {
		border-radius: 28px;
	}

	/* compact enough for a phone with the browser bars (and fewer frames to repaint) */
	.login-card .card-body {
		padding: 1.75rem 1.25rem 1.5rem;
	}

	.login-brand-icon {
		width: 56px;
		height: 56px;
		margin-bottom: .9rem;
		border-radius: 18px;
		font-size: 1.5rem;
	}

	.login-card h1 {
		font-size: 1.6rem;
	}

	/* the drifting blur layers are heavy for a phone's GPU and flicker in Safari */
	.login-page::before,
	.login-page::after {
		animation: none;
	}
}

/* Night theme, keyed on data-theme from partials/theme-init (see theme.css). */
:root[data-theme="dark"] .login-page {
	--lp-bg: #05060a;
	--lp-blob-1: #0a84ff;
	--lp-blob-2: #5e5ce6;
	--lp-blob-3: #bf5af2;
	--lp-blob-4: #32ade6;
	--lp-blob-opacity: .55;

	--lp-glass: rgba(40, 40, 46, .28);
	--lp-rim-top: rgba(255, 255, 255, .28);
	--lp-rim-bottom: rgba(255, 255, 255, .06);
	--lp-inner-shade: rgba(0, 0, 0, .35);
	--lp-shadow: 0 30px 70px rgba(0, 0, 0, .55);

	--lp-text: #f5f5f7;
	--lp-text-2: rgba(245, 245, 247, .6);
	--lp-ring: rgba(10, 132, 255, .5);
}

:root[data-theme="dark"] .login-glass::before {
	background: linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .22));
}

:root[data-theme="dark"] .login-glass::after {
	background: radial-gradient(420px circle at var(--lp-x) var(--lp-y), rgba(255, 255, 255, .14), transparent 45%);
	mix-blend-mode: screen;
}

:root[data-theme="dark"] .login-card .form-control {
	background: rgba(255, 255, 255, .08);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, .3),
		inset 0 -1px 0 rgba(255, 255, 255, .06),
		0 0 0 1px rgba(255, 255, 255, .1);
}

:root[data-theme="dark"] .login-card .form-control:focus {
	background: rgba(255, 255, 255, .13);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, .3),
		0 0 0 1px rgba(255, 255, 255, .18),
		0 0 0 5px var(--lp-ring);
}

/* Off state only, so the green "on" track still wins */
:root[data-theme="dark"] .login-remember .switch-input:not(:checked) ~ .switch-label {
	background-color: rgba(120, 120, 128, .36) !important;
}

:root[data-theme="dark"] .login-card .alert {
	background: rgba(255, 69, 58, .18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	color: #ff6961;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	:root[data-theme="dark"] .login-glass {
		background: rgba(28, 28, 30, .92);
	}
}

/* Passkey sign-in (Face ID, Touch ID, fingerprint) under the password form */
.login-or {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 1.1rem 0 .9rem;
	color: var(--lp-text-2);
	font-size: .85rem;
}

.login-or::before,
.login-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .3;
}

.login-passkey-button {
	height: 50px;
	border-radius: 999px;
	border: 1px solid rgba(127, 127, 127, .35);
	background: rgba(255, 255, 255, .35);
	color: var(--lp-text);
	font-weight: 600;
}

.login-passkey-button:hover,
.login-passkey-button:focus {
	background: rgba(255, 255, 255, .55);
	color: var(--lp-text);
}

:root[data-theme="dark"] .login-passkey-button {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
}

:root[data-theme="dark"] .login-passkey-button:hover,
:root[data-theme="dark"] .login-passkey-button:focus {
	background: rgba(255, 255, 255, .14);
}

.login-passkey-button .fa-fingerprint {
	margin-right: .35rem;
}