/* M-Val portal login — centred card on a gradient of the two logo colours (red to navy).
   Scoped to body:has(.page-card); the Frappe template & JS are untouched (2FA / reset / email-link keep working).
   Targets the v16 login markup (.es-button, .email-field / .password-field wrappers, no icon elements). */

body:has(.page-card) {
	min-height: 100vh;
	background:
		radial-gradient(1000px 520px at 14% 6%, rgba(255, 255, 255, .10), transparent 55%),
		radial-gradient(1250px 780px at 50% 112%, rgba(11, 47, 80, .80), transparent 60%),
		radial-gradient(900px 620px at 6% 98%, rgba(16, 66, 111, .55), transparent 62%),
		linear-gradient(165deg, #a21d25 0%, #7a1c33 36%, #2b3360 62%, #10426f 100%);
	background-attachment: fixed;
}

/* Center the card */
body:has(.page-card) .page-content-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
body:has(.page-card) main, body:has(.page-card) .page_content { width: 100%; max-width: none; }
body:has(.page-card) .for-login, body:has(.page-card) .for-email-login, body:has(.page-card) .for-login-with-email-link,
body:has(.page-card) .for-forgot, body:has(.page-card) .for-signup { width: 100%; }

/* Card */
body:has(.page-card) .page-card {
	width: 100%;
	max-width: 440px;
	min-height: 0;
	margin: 0 auto;
	background: #ffffff;
	border: none;
	border-radius: 20px;
	padding: 34px 30px 30px;
	gap: 26px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 30px 70px rgba(0, 0, 0, .30);
}

/* Head: centred logo, bold heading, muted subtitle */
body:has(.page-card) .page-card-head { align-items: center; text-align: center; gap: 14px; border: none; padding: 0; margin: 0; }
body:has(.page-card) .page-card-head img.app-logo { height: 46px; max-height: none; width: auto; margin: 0 auto; display: block; }
body:has(.page-card) .page-card-head-text { gap: 6px; }
body:has(.page-card) .page-card-head-text h4 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #152029; text-align: center; }
body:has(.page-card) .page-card-subtitle { color: #5b6672; font-size: 14px; text-align: center; }

/* Fields */
body:has(.page-card) .form-signin { gap: 22px; }
body:has(.page-card) .page-card-body { padding: 0; gap: 14px; }
body:has(.page-card) .form-group { text-align: left; }
body:has(.page-card) .form-group label { font-size: 13.5px; color: #6b7682; }
body:has(.page-card) .email-field, body:has(.page-card) .password-field { position: relative; width: 100%; }
body:has(.page-card) .page-card .page-card-body input.form-control {
	width: 100%;
	height: 30px;
	padding: 4px 10px 4px 34px;
	border: 1px solid #e4e8ee;
	border-radius: 8px;
	font-size: 14px;
	background: #f2f4f6;
	color: #152029;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
body:has(.page-card) .page-card .page-card-body .password-field input.form-control { padding-right: 34px; }
body:has(.page-card) .page-card .page-card-body input.form-control::placeholder { color: #9aa4ae; }
body:has(.page-card) .page-card .page-card-body input.form-control:focus {
	border-color: #10426f; background: #fff; box-shadow: 0 0 0 3px rgba(16, 66, 111, .16); outline: none;
}
body:has(.page-card) .page-card .page-card-body .form-group.invalid input.form-control { border-color: #d13b3b; }

/* Leading field icons (envelope / padlock) — the v16 template ships none, so they are drawn here */
body:has(.page-card) .email-field::before, body:has(.page-card) .password-field::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	background-color: #7d8792;
	pointer-events: none;
	z-index: 2;
	-webkit-mask: var(--pm-login-icon) center / contain no-repeat;
	mask: var(--pm-login-icon) center / contain no-repeat;
}
body:has(.page-card) .email-field {
	--pm-login-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}
body:has(.page-card) .password-field {
	--pm-login-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
body:has(.page-card) .email-field:focus-within::before, body:has(.page-card) .password-field:focus-within::before { background-color: #10426f; }
body:has(.page-card) .page-card .page-card-body .password-field .toggle-password { right: 10px; stroke: #7d8792; }

/* Forgot link — muted, right-aligned under the password */
body:has(.page-card) a[href="#forgot"] { color: #6b7682 !important; font-size: 13.5px; font-weight: 400; text-decoration: none; }
body:has(.page-card) a[href="#forgot"]:hover { color: #a21d25 !important; text-decoration: underline; }

/* Buttons */
body:has(.page-card) .page-card .es-button {
	height: 30px; width: 100%; padding: 0 16px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 500; box-shadow: none; text-decoration: none;
	transition: background .15s, transform .05s;
}
body:has(.page-card) .page-card .es-button[data-variant="solid"] { background: #10426f !important; border: none; color: #fff !important; }
body:has(.page-card) .page-card .es-button[data-variant="solid"]:hover { background: #0b2f50 !important; }
body:has(.page-card) .page-card .es-button[data-variant="solid"]:active { transform: translateY(1px); }
body:has(.page-card) .page-card .es-button[data-variant="solid"]:disabled { opacity: .55; cursor: not-allowed; }
body:has(.page-card) .page-card .es-button.btn-login-option { border: 1px solid #e4e8ee; background: #fff !important; color: #152029 !important; }
body:has(.page-card) .page-card .es-button.btn-login-option:hover { background: #f3f4f6 !important; }

/* Footer links (Sign up / Back to sign in / Resend) */
body:has(.page-card) .sign-up-message { text-align: center; font-size: 13.5px; color: #5b6672; margin-top: 0; }
body:has(.page-card) .sign-up-message a, body:has(.page-card) .btn-resend-link { color: #a21d25 !important; font-weight: 700; text-decoration: none; }
body:has(.page-card) .sign-up-message a:hover, body:has(.page-card) .btn-resend-link:hover { text-decoration: underline; }
body:has(.page-card) .web-footer, body:has(.page-card) footer { display: none; }

@media (max-width: 480px) {
	body:has(.page-card) .page-card { padding: 28px 22px 24px; border-radius: 18px; }
	body:has(.page-card) .page-card-head img.app-logo { height: 40px; }
	body:has(.page-card) .page-card-head-text h4 { font-size: 22px; }
}