/*
 * Sign-in / 2FA pages only (auth/login.blade.php, auth/tfa.blade.php).
 * Color tokens (--auth-*) are injected by resources/views/auth/partials/head.blade.php from config/brand.php.
 */

/* 1. Page backdrop */
body#kt_body.bg-body {
	background-color: var(--auth-backdrop) !important;
	background-image: radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--auth-accent) 8%, transparent), transparent 70%);
	background-repeat: no-repeat;
	font-family: "Manrope", "Poppins", Helvetica, sans-serif;
}

body#kt_body.bg-body ::selection {
	background-color: color-mix(in srgb, var(--auth-accent) 18%, transparent);
}

/* 2. Card */
.auth-card {
	width: min(440px, calc(100vw - 32px));
	background-color: #FFFFFF;
	border: 1px solid #E3E7EF;
	border-color: color-mix(in srgb, var(--auth-ink) 9%, #FFFFFF);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 26, 43, 0.05), 0 24px 48px -24px rgba(15, 26, 43, 0.14);
	padding: 40px;
	animation: authRise 320ms ease-out both;
}

@keyframes authRise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-card {
		animation: none;
	}
	.form-control.auth-input.auth-otp__box.is-filled {
		animation: none;
	}
}

@media (max-width: 480px) {
	.auth-card {
		padding: 32px 24px;
	}
}

/* 3. Typography */
.auth-card__logo {
	margin-bottom: 28px;
}

.auth-card__logo img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	object-position: left center;
}

/* Font sizes are authored in px on purpose: style.bundle.css forces html/body
 * to font-size 13px !important (12px below 768px), so rem here would render
 * ~19-25% smaller than designed. */
.auth-card__title {
	font-family: "Space Grotesk", "Manrope", Helvetica, sans-serif;
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--auth-ink);
	margin-bottom: 6px;
}

.auth-card__subtitle {
	font-size: 14px;
	color: var(--auth-muted);
	margin-bottom: 28px;
}

.auth-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	color: var(--auth-ink);
	margin-bottom: 6px;
}

.auth-card__foot {
	font-size: 12px;
	color: var(--auth-muted);
	text-align: center;
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid #EDF0F5;
	border-top-color: color-mix(in srgb, var(--auth-ink) 6%, #FFFFFF);
}

.auth-card__foot .la {
	font-size: 14px;
	margin-right: 4px;
	vertical-align: -1px;
}

/* 4. Inputs
 * Inputs stay DIRECT children of .fv-row so Bootstrap's `.is-invalid ~ .invalid-feedback`
 * and FormValidation's row-appended messages both keep working — the eye button is
 * absolute-positioned against the fixed label (20px + 6px) and input (48px) metrics. */
.auth-field {
	position: relative;
}

.form-control.auth-input {
	height: 48px;
	padding: 0 16px;
	font-size: 16px; /* >= 16px also prevents iOS Safari auto-zoom on focus */
	font-weight: 500;
	color: var(--auth-ink);
	background-color: #FFFFFF;
	border: 1px solid #D6DBE5;
	border-color: color-mix(in srgb, var(--auth-ink) 16%, #FFFFFF);
	border-radius: 10px;
	box-shadow: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-control.auth-input::placeholder {
	color: var(--auth-muted);
	opacity: 0.7;
}

.form-control.auth-input:hover:not(:focus):not(.is-invalid) {
	border-color: color-mix(in srgb, var(--auth-ink) 30%, #FFFFFF);
}

/* !important needed: style.bundle.css declares .form-control { box-shadow: none !important } */
.form-control.auth-input:focus {
	color: var(--auth-ink);
	background-color: #FFFFFF;
	border-color: var(--auth-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent) 14%, transparent) !important;
}

.form-control.auth-input.is-invalid {
	border-color: var(--bs-danger, #F1416C);
}

.form-control.auth-input.is-invalid:focus {
	border-color: var(--bs-danger, #F1416C);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-danger, #F1416C) 12%, transparent) !important;
}

.form-control.auth-input--password {
	padding-right: 48px;
}

.form-control.auth-input--password.is-invalid {
	background-image: none;
}

.auth-card .invalid-feedback {
	font-size: 12px;
	color: #D9214E; /* Metronic's #F1416C is 3.68:1 on white — below AA */
	margin-top: 6px;
}

/* 5. Password visibility toggle */
.auth-eye {
	position: absolute;
	top: 32px;
	right: 6px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--auth-muted);
	transition: color 120ms ease;
}

.auth-eye:hover {
	color: var(--auth-ink);
}

/* transparent outline stays honored (and repainted) in forced-colors mode, where box-shadow is stripped */
.auth-eye:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--auth-accent);
}

.auth-eye .la {
	font-size: 17px;
}

/* 6. Primary button (keeps Metronic .btn indicator mechanics; only colors/shape are ours) */
.btn.auth-btn {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: var(--auth-accent);
	border: 0;
	border-radius: 10px;
	transition: background-color 120ms ease, transform 80ms ease;
}

.btn.auth-btn:hover:not(:disabled) {
	color: #FFFFFF;
	background-color: var(--auth-accent-deep);
}

.btn.auth-btn:active:not(:disabled) {
	color: #FFFFFF;
	background-color: var(--auth-accent-deep);
	transform: translateY(1px);
}

.btn.auth-btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--auth-accent);
}

.btn.auth-btn:disabled {
	color: #FFFFFF;
	opacity: 0.7;
}

/* 7. Links */
.auth-card a {
	color: var(--auth-accent);
	font-weight: 600;
	text-decoration: none;
}

.auth-card a:hover {
	color: var(--auth-accent-deep);
	text-decoration: underline;
}

/* 8. 2FA specifics */
.auth-otp {
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-control.auth-input.auth-otp__box {
	flex: 1 1 0;
	min-width: 0;
	max-width: 52px;
	padding: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.form-control.auth-input.auth-otp__box.is-invalid {
	background-image: none;
}

.form-control.auth-input.auth-otp__box.is-filled {
	border-color: var(--auth-ink);
	animation: authOtpSnap 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes authOtpSnap {
	0% {
		transform: scale(0.92);
	}
	60% {
		transform: scale(1.04);
	}
	100% {
		transform: scale(1);
	}
}

/* Ctrl+A "select all" across the six boxes: mirror the focus ring on every box */
.form-control.auth-input.auth-otp__box.is-selected {
	border-color: var(--auth-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent) 14%, transparent) !important;
}

/* Reserved slot so the check appearing never reflows the boxes; SVG = Metronic's .is-valid checkmark (style.bundle.css) */
.auth-otp__check {
	flex: 0 0 22px;
	height: 22px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2350CD89' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	visibility: hidden;
}

.auth-otp.is-complete .auth-otp__check {
	visibility: visible;
}

.auth-otp.is-complete .form-control.auth-input.auth-otp__box {
	border-color: #50CD89;
}

.auth-otp.is-complete .form-control.auth-input.auth-otp__box:focus {
	border-color: var(--auth-accent);
}

.auth-card__hint {
	font-size: 12px;
	color: var(--auth-muted);
	margin-top: 8px;
}

.auth-card__hint #timer-for-logout {
	font-weight: 600;
	color: var(--auth-ink);
}