/* =========================================================
   ML-NMS Cyber Login Page
   Screenshot-matched login theme for Frappe web login.
   Visual-only: does not change authentication backend.
   ========================================================= */

body[data-path="login"],
body.for-login {
	min-height: 100vh !important;
	margin: 0 !important;
	overflow-x: hidden !important;
	background:
		radial-gradient(circle at 50% 8%, rgba(0, 153, 255, 0.22), transparent 18%),
		radial-gradient(circle at 15% 35%, rgba(0, 135, 255, 0.20), transparent 24%),
		radial-gradient(circle at 85% 36%, rgba(0, 135, 255, 0.20), transparent 24%),
		linear-gradient(180deg, #020d1a 0%, #03101f 42%, #020912 100%) !important;
	color: #dff6ff !important;
	font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body[data-path="login"]::before,
body.for-login::before {
	content: "";
	position: fixed;
	inset: 18px;
	z-index: 0;
	pointer-events: none;
	border: 2px solid rgba(0, 174, 255, 0.72);
	border-radius: 14px;
	box-shadow:
		0 0 12px rgba(0, 174, 255, 0.90),
		0 0 34px rgba(0, 128, 255, 0.45),
		inset 0 0 26px rgba(0, 174, 255, 0.18);
}

body[data-path="login"]::after,
body.for-login::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(0, 174, 255, 0.85) 0 2px, transparent 3px),
		linear-gradient(115deg, transparent 0 14%, rgba(0, 102, 255, 0.18) 15%, transparent 16% 100%),
		linear-gradient(65deg, transparent 0 20%, rgba(0, 102, 255, 0.15) 21%, transparent 22% 100%),
		linear-gradient(180deg, transparent 72%, rgba(0, 97, 255, 0.12) 73%, transparent 74%),
		linear-gradient(90deg, rgba(0, 174, 255, 0.035) 1px, transparent 1px),
		linear-gradient(0deg, rgba(0, 174, 255, 0.03) 1px, transparent 1px);
	background-size:
		130px 130px,
		340px 340px,
		300px 300px,
		70px 70px,
		42px 42px,
		42px 42px;
	background-position:
		40px 70px,
		left 90px top 90px,
		right 120px top 100px,
		center bottom,
		center bottom,
		center bottom;
	opacity: 0.64;
	mask-image: radial-gradient(circle at center, rgba(0,0,0,0.5), rgba(0,0,0,0.95));
}

body[data-path="login"] .navbar,
body[data-path="login"] header,
body[data-path="login"] footer,
body.for-login .navbar,
body.for-login header,
body.for-login footer {
	display: none !important;
}

body[data-path="login"] .page-card-layout,
body.for-login .page-card-layout {
	position: relative !important;
	z-index: 1 !important;
	min-height: 100vh !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 34px 18px !important;
	background: transparent !important;
}

body[data-path="login"] .page-card-layout::before,
body.for-login .page-card-layout::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(0, 72, 180, 0.28), transparent 72%),
		repeating-linear-gradient(90deg, rgba(0, 129, 255, 0.14) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(0deg, rgba(0, 129, 255, 0.10) 0 1px, transparent 1px 30px);
	transform: perspective(760px) rotateX(64deg);
	transform-origin: bottom center;
	opacity: 0.72;
}

body[data-path="login"] .page-card-layout::after,
body.for-login .page-card-layout::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 10% 22%, rgba(0, 174, 255, 0.80) 0 2px, transparent 3px),
		radial-gradient(circle at 17% 38%, rgba(0, 174, 255, 0.80) 0 2px, transparent 3px),
		radial-gradient(circle at 8% 62%, rgba(0, 174, 255, 0.70) 0 2px, transparent 3px),
		radial-gradient(circle at 91% 24%, rgba(0, 174, 255, 0.80) 0 2px, transparent 3px),
		radial-gradient(circle at 86% 47%, rgba(0, 174, 255, 0.80) 0 2px, transparent 3px),
		radial-gradient(circle at 94% 69%, rgba(0, 174, 255, 0.70) 0 2px, transparent 3px);
	opacity: 0.72;
}

body[data-path="login"] .page-card,
body.for-login .page-card {
	position: relative !important;
	z-index: 2 !important;
	width: min(700px, 92vw) !important;
	max-width: 700px !important;
	margin: 250px auto 82px !important;
	padding: 36px 38px 30px !important;
	background: rgba(3, 15, 31, 0.78) !important;
	border: 2px solid rgba(0, 174, 255, 0.75) !important;
	border-radius: 16px !important;
	box-shadow:
		0 0 16px rgba(0, 174, 255, 0.96),
		0 0 44px rgba(0, 93, 255, 0.40),
		inset 0 0 24px rgba(0, 174, 255, 0.10) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

body[data-path="login"] .page-card::before,
body.for-login .page-card::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -270px;
	width: min(760px, 96vw);
	height: 245px;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg width='760' height='245' viewBox='0 0 760 245' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='g'%3E%3CfeGaussianBlur stdDeviation='3' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%2300aaff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'%3E%3Crect x='330' y='10' width='76' height='64' rx='7'/%3E%3Cpath d='M350 55 L365 38 L379 47 L397 25'/%3E%3Cpath d='M367 74 v20 M346 96 h42'/%3E%3Ccircle cx='421' cy='66' r='23'/%3E%3Cpath d='M438 83 l28 28'/%3E%3C/g%3E%3Ctext x='380' y='155' text-anchor='middle' font-size='58' font-weight='900' font-family='Arial, Helvetica, sans-serif' fill='%2319a8ff' filter='url(%23g)' letter-spacing='5'%3EML-NMS%3C/text%3E%3Ctext x='380' y='198' text-anchor='middle' font-size='27' font-family='Arial, Helvetica, sans-serif' fill='%23f4fbff' letter-spacing='6'%3EMachine Learning Based%3C/text%3E%3Ctext x='380' y='230' text-anchor='middle' font-size='27' font-family='Arial, Helvetica, sans-serif' fill='%23f4fbff' letter-spacing='4'%3ENetwork Monitoring System%3C/text%3E%3Cline x1='16' y1='154' x2='180' y2='154' stroke='%2300aaff' stroke-width='2' opacity='.8'/%3E%3Ccircle cx='184' cy='154' r='4' fill='%2300aaff'/%3E%3Cline x1='576' y1='154' x2='744' y2='154' stroke='%2300aaff' stroke-width='2' opacity='.8'/%3E%3Ccircle cx='572' cy='154' r='4' fill='%2300aaff'/%3E%3C/svg%3E");
}

body[data-path="login"] .page-card::after,
body.for-login .page-card::after {
	content: "🛡  Secure login protected by ML-NMS security\a\a© 2025 Machine Learning Based Network Monitoring System. All rights reserved.";
	position: absolute;
	left: 50%;
	bottom: -94px;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	white-space: pre;
	color: rgba(223, 246, 255, 0.86);
	font-size: 15px;
	line-height: 2;
	text-shadow: 0 0 10px rgba(0, 174, 255, 0.36);
}

body[data-path="login"] .page-card-head,
body.for-login .page-card-head {
	display: block !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-head-title,
body.for-login .page-card-head h4,
body.for-login .page-card-head .page-card-head-title {
	color: #1ba8ff !important;
	font-size: 25px !important;
	font-weight: 850 !important;
	text-align: left !important;
	letter-spacing: 0 !important;
	margin: 0 0 6px !important;
	line-height: 1.2 !important;
	text-shadow: 0 0 14px rgba(0, 174, 255, 0.50);
}

body[data-path="login"] .page-card-head h4::after,
body[data-path="login"] .page-card-head .page-card-head-title::after,
body.for-login .page-card-head h4::after,
body.for-login .page-card-head .page-card-head-title::after {
	content: "Please sign in to continue to your account";
	display: block;
	margin-top: 8px;
	color: rgba(223, 246, 255, 0.82);
	font-size: 16px;
	font-weight: 500;
	text-shadow: none;
}

body[data-path="login"] .form-group,
body.for-login .form-group {
	margin-bottom: 20px !important;
	position: relative !important;
}

body[data-path="login"] .form-group label,
body.for-login .form-group label {
	display: none !important;
}

body[data-path="login"] .form-control,
body.for-login .form-control {
	height: 66px !important;
	width: 100% !important;
	background: rgba(3, 15, 31, 0.72) !important;
	border: 1px solid rgba(0, 132, 255, 0.32) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2px;
	padding: 0 58px 0 72px !important;
	box-shadow: inset 0 0 18px rgba(0, 74, 180, 0.12) !important;
	outline: none !important;
}

body[data-path="login"] .form-control:focus,
body.for-login .form-control:focus {
	border-color: rgba(0, 174, 255, 0.80) !important;
	box-shadow:
		0 0 0 3px rgba(0, 174, 255, 0.10),
		inset 0 0 18px rgba(0, 74, 180, 0.14) !important;
}

body[data-path="login"] .form-control::placeholder,
body.for-login .form-control::placeholder {
	color: rgba(255, 255, 255, 0.82) !important;
}

body[data-path="login"] .form-group:has(input[type="text"])::before,
body[data-path="login"] .form-group:has(input[type="email"])::before,
body[data-path="login"] .form-group:has(input[name="usr"])::before,
body.for-login .form-group:has(input[type="text"])::before,
body.for-login .form-group:has(input[type="email"])::before,
body.for-login .form-group:has(input[name="usr"])::before {
	content: "♙";
	position: absolute;
	left: 23px;
	top: 14px;
	z-index: 2;
	color: #008cff;
	font-size: 34px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(0, 174, 255, 0.50);
}

body[data-path="login"] .form-group:has(input[type="password"])::before,
body.for-login .form-group:has(input[type="password"])::before {
	content: "▣";
	position: absolute;
	left: 23px;
	top: 17px;
	z-index: 2;
	color: #008cff;
	font-size: 27px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(0, 174, 255, 0.50);
}

body[data-path="login"] .password-field .link-btn,
body[data-path="login"] .input-with-feedback .link-btn,
body.for-login .password-field .link-btn,
body.for-login .input-with-feedback .link-btn {
	right: 20px !important;
	color: #008cff !important;
	font-size: 21px !important;
}

body[data-path="login"] .forgot-password-message,
body.for-login .forgot-password-message {
	float: right !important;
	margin: -8px 0 18px !important;
}

body[data-path="login"] .forgot-password-message a,
body[data-path="login"] a[href*="forgot"],
body.for-login .forgot-password-message a,
body.for-login a[href*="forgot"] {
	color: #1ba8ff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

body[data-path="login"] .mlnms-login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: -6px 0 22px;
	color: rgba(223, 246, 255, 0.86);
	font-size: 16px;
}

body[data-path="login"] .mlnms-remember {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: rgba(223, 246, 255, 0.88);
	user-select: none;
}

body[data-path="login"] .mlnms-remember-box {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #008cff;
	color: #008cff;
	border-radius: 3px;
	box-shadow: 0 0 8px rgba(0, 174, 255, 0.35);
	font-size: 16px;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .page-card .btn-primary,
body.for-login .btn-login,
body.for-login .page-card .btn-primary {
	width: 100% !important;
	height: 68px !important;
	border: 1px solid rgba(0, 174, 255, 0.75) !important;
	border-radius: 8px !important;
	background: linear-gradient(90deg, #087dff 0%, #009dff 100%) !important;
	color: #ffffff !important;
	font-size: 22px !important;
	font-weight: 850 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	box-shadow:
		0 0 18px rgba(0, 174, 255, 0.80),
		0 0 36px rgba(0, 95, 255, 0.38) !important;
	margin-top: 4px !important;
	position: relative !important;
}

body[data-path="login"] .btn-login::after,
body[data-path="login"] .page-card .btn-primary::after,
body.for-login .btn-login::after,
body.for-login .page-card .btn-primary::after {
	content: "→";
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-52%);
	font-size: 34px;
	font-weight: 300;
}

body[data-path="login"] .login-divider,
body[data-path="login"] .page-card .divider,
body.for-login .login-divider,
body.for-login .page-card .divider {
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
	margin: 19px 0 !important;
	color: rgba(0, 174, 255, 0.82) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
}

body[data-path="login"] .login-divider::before,
body[data-path="login"] .login-divider::after,
body[data-path="login"] .page-card .divider::before,
body[data-path="login"] .page-card .divider::after,
body.for-login .login-divider::before,
body.for-login .login-divider::after,
body.for-login .page-card .divider::before,
body.for-login .page-card .divider::after {
	content: "" !important;
	height: 1px !important;
	flex: 1 !important;
	background: linear-gradient(90deg, transparent, rgba(0, 174, 255, 0.55), transparent) !important;
}

body[data-path="login"] .mlnms-email-link,
body.for-login .mlnms-email-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 64px !important;
	border: 1px solid rgba(0, 174, 255, 0.72) !important;
	border-radius: 8px !important;
	color: #1ba8ff !important;
	font-size: 19px !important;
	font-weight: 750 !important;
	text-decoration: none !important;
	background: rgba(3, 15, 31, 0.40) !important;
	box-shadow: inset 0 0 18px rgba(0, 74, 180, 0.11);
}

body[data-path="login"] .mlnms-email-link::before,
body.for-login .mlnms-email-link::before {
	content: "✉";
	font-size: 29px;
	margin-right: 18px;
	font-weight: 400;
}

body[data-path="login"] .sign-up-message,
body[data-path="login"] .social-logins,
body[data-path="login"] .login-with-email-link,
body.for-login .sign-up-message,
body.for-login .social-logins,
body.for-login .login-with-email-link {
	display: none !important;
}

body[data-path="login"] .indicator,
body.for-login .indicator {
	color: #dff6ff !important;
}

@media (max-width: 860px) {
	body[data-path="login"]::before,
	body.for-login::before {
		inset: 10px;
	}

	body[data-path="login"] .page-card,
	body.for-login .page-card {
		width: min(92vw, 560px) !important;
		margin-top: 215px !important;
		padding: 28px 22px 26px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -220px;
		width: 94vw;
		height: 205px;
	}

	body[data-path="login"] .form-control,
	body.for-login .form-control {
		height: 60px !important;
		font-size: 18px !important;
		padding-left: 62px !important;
	}

	body[data-path="login"] .btn-login,
	body[data-path="login"] .page-card .btn-primary,
	body.for-login .btn-login,
	body.for-login .page-card .btn-primary {
		height: 62px !important;
		font-size: 19px !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		font-size: 12px;
		bottom: -86px;
	}
}


/* =========================================================
   ML-NMS LOGIN FIT FIX
   Makes the full cyber login fit inside normal laptop screens.
   ========================================================= */

body[data-path="login"],
body.for-login {
	overflow-y: auto !important;
}

body[data-path="login"] .page-card-layout,
body.for-login .page-card-layout {
	align-items: flex-start !important;
	justify-content: center !important;
	min-height: 100vh !important;
	padding: 18px 18px 24px !important;
}

body[data-path="login"] .page-card,
body.for-login .page-card {
	width: min(620px, 88vw) !important;
	max-width: 620px !important;
	margin: 310px auto 72px !important;
	padding: 26px 34px 24px !important;
	border-radius: 14px !important;
}

body[data-path="login"] .page-card::before,
body.for-login .page-card::before {
	top: -285px !important;
	width: min(660px, 92vw) !important;
	height: 260px !important;
	background-size: contain !important;
}

body[data-path="login"] .page-card::after,
body.for-login .page-card::after {
	bottom: -74px !important;
	font-size: 14px !important;
	line-height: 1.75 !important;
}

body[data-path="login"] .page-card-head,
body.for-login .page-card-head {
	margin-bottom: 16px !important;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-head-title,
body.for-login .page-card-head h4,
body.for-login .page-card-head .page-card-head-title {
	font-size: 24px !important;
	margin-bottom: 4px !important;
}

body[data-path="login"] .page-card-head h4::after,
body[data-path="login"] .page-card-head .page-card-head-title::after,
body.for-login .page-card-head h4::after,
body.for-login .page-card-head .page-card-head-title::after {
	font-size: 16px !important;
	margin-top: 8px !important;
}

body[data-path="login"] .form-group,
body.for-login .form-group {
	margin-bottom: 16px !important;
}

body[data-path="login"] .form-control,
body.for-login .form-control {
	height: 56px !important;
	font-size: 20px !important;
	padding-left: 68px !important;
	padding-right: 54px !important;
	background: rgba(3, 15, 31, 0.72) !important;
	color: #ffffff !important;
	border-color: rgba(0, 174, 255, 0.55) !important;
}

body[data-path="login"] .form-control:-webkit-autofill,
body[data-path="login"] .form-control:-webkit-autofill:hover,
body[data-path="login"] .form-control:-webkit-autofill:focus,
body.for-login .form-control:-webkit-autofill,
body.for-login .form-control:-webkit-autofill:hover,
body.for-login .form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: #ffffff !important;
	box-shadow: 0 0 0 1000px rgba(3, 15, 31, 0.92) inset !important;
	caret-color: #ffffff !important;
	transition: background-color 9999s ease-in-out 0s !important;
}

body[data-path="login"] .form-group:has(input[type="text"])::before,
body[data-path="login"] .form-group:has(input[type="email"])::before,
body[data-path="login"] .form-group:has(input[name="usr"])::before,
body.for-login .form-group:has(input[type="text"])::before,
body.for-login .form-group:has(input[type="email"])::before,
body.for-login .form-group:has(input[name="usr"])::before {
	top: 10px !important;
	font-size: 31px !important;
}

body[data-path="login"] .form-group:has(input[type="password"])::before,
body.for-login .form-group:has(input[type="password"])::before {
	top: 14px !important;
	font-size: 25px !important;
}

body[data-path="login"] .mlnms-login-options {
	margin: -4px 0 18px !important;
	font-size: 16px !important;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .page-card .btn-primary,
body.for-login .btn-login,
body.for-login .page-card .btn-primary {
	height: 58px !important;
	font-size: 20px !important;
	margin-top: 0 !important;
}

body[data-path="login"] .login-divider,
body[data-path="login"] .page-card .divider,
body.for-login .login-divider,
body.for-login .page-card .divider {
	margin: 14px 0 !important;
	font-size: 17px !important;
}

body[data-path="login"] .mlnms-email-link,
body.for-login .mlnms-email-link {
	height: 56px !important;
	font-size: 18px !important;
}

@media (max-height: 820px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		margin-top: 285px !important;
		padding: 22px 32px 22px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -260px !important;
		height: 238px !important;
		width: min(610px, 90vw) !important;
	}

	body[data-path="login"] .form-control,
	body.for-login .form-control {
		height: 52px !important;
		font-size: 19px !important;
	}

	body[data-path="login"] .form-group,
	body.for-login .form-group {
		margin-bottom: 14px !important;
	}

	body[data-path="login"] .btn-login,
	body[data-path="login"] .page-card .btn-primary,
	body.for-login .btn-login,
	body.for-login .page-card .btn-primary {
		height: 54px !important;
	}

	body[data-path="login"] .mlnms-email-link,
	body.for-login .mlnms-email-link {
		height: 52px !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		bottom: -66px !important;
		font-size: 13px !important;
	}
}

@media (max-width: 860px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		width: min(600px, 90vw) !important;
		margin-top: 270px !important;
		padding: 22px 22px 22px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -248px !important;
		height: 226px !important;
		width: 90vw !important;
	}
}


/* =========================================================
   FINAL RESPONSIVE LOGIN FIT OVERRIDE
   Forces the whole ML-NMS login screen to fit laptop/tablet/mobile.
   This overrides previous fixed-height spacing.
   ========================================================= */

body[data-path="login"],
body.for-login {
	overflow: hidden !important;
	min-height: 100vh !important;
}

body[data-path="login"] .page-card-layout,
body.for-login .page-card-layout {
	min-height: 100vh !important;
	height: 100vh !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 0 14px !important;
	overflow: hidden !important;
}

/* Main login card: now uses viewport height instead of fixed oversized spacing */
body[data-path="login"] .page-card,
body.for-login .page-card {
	width: min(560px, 88vw) !important;
	max-width: 560px !important;
	margin-top: clamp(170px, 29vh, 235px) !important;
	margin-bottom: 0 !important;
	padding: clamp(16px, 2.2vh, 24px) clamp(22px, 3vw, 34px) clamp(14px, 2vh, 22px) !important;
	border-radius: 14px !important;
}

/* Logo/header block: smaller and tied to viewport */
body[data-path="login"] .page-card::before,
body.for-login .page-card::before {
	top: calc(-1 * clamp(158px, 26vh, 225px)) !important;
	width: min(570px, 86vw) !important;
	height: clamp(145px, 24vh, 210px) !important;
	background-size: contain !important;
	background-position: center bottom !important;
}

/* Footer: keep visible and compact */
body[data-path="login"] .page-card::after,
body.for-login .page-card::after {
	bottom: calc(-1 * clamp(48px, 8vh, 68px)) !important;
	font-size: clamp(10px, 1.7vh, 13px) !important;
	line-height: 1.55 !important;
}

/* Header text inside card */
body[data-path="login"] .page-card-head,
body.for-login .page-card-head {
	margin: 0 0 clamp(10px, 1.7vh, 16px) !important;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-head-title,
body.for-login .page-card-head h4,
body.for-login .page-card-head .page-card-head-title {
	font-size: clamp(20px, 3vh, 24px) !important;
	margin: 0 0 3px !important;
}

body[data-path="login"] .page-card-head h4::after,
body[data-path="login"] .page-card-head .page-card-head-title::after,
body.for-login .page-card-head h4::after,
body.for-login .page-card-head .page-card-head-title::after {
	font-size: clamp(13px, 2vh, 16px) !important;
	margin-top: 5px !important;
}

/* Inputs: compact but still premium */
body[data-path="login"] .form-group,
body.for-login .form-group {
	margin-bottom: clamp(10px, 1.8vh, 14px) !important;
}

body[data-path="login"] .form-control,
body.for-login .form-control {
	height: clamp(44px, 7vh, 54px) !important;
	font-size: clamp(16px, 2.6vh, 20px) !important;
	padding-left: 62px !important;
	padding-right: 46px !important;
	border-radius: 8px !important;
	background: rgba(3, 15, 31, 0.86) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Autofill should not turn yellow/cream */
body[data-path="login"] input:-webkit-autofill,
body[data-path="login"] input:-webkit-autofill:hover,
body[data-path="login"] input:-webkit-autofill:focus,
body.for-login input:-webkit-autofill,
body.for-login input:-webkit-autofill:hover,
body.for-login input:-webkit-autofill:focus {
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff !important;
	box-shadow: 0 0 0 1000px rgba(3, 15, 31, 0.96) inset !important;
	border: 1px solid rgba(0, 174, 255, 0.55) !important;
	transition: background-color 9999s ease-in-out 0s !important;
}

/* Input icons */
body[data-path="login"] .form-group:has(input[type="text"])::before,
body[data-path="login"] .form-group:has(input[type="email"])::before,
body[data-path="login"] .form-group:has(input[name="usr"])::before,
body.for-login .form-group:has(input[type="text"])::before,
body.for-login .form-group:has(input[type="email"])::before,
body.for-login .form-group:has(input[name="usr"])::before {
	top: clamp(7px, 1.4vh, 11px) !important;
	left: 22px !important;
	font-size: clamp(25px, 4vh, 30px) !important;
}

body[data-path="login"] .form-group:has(input[type="password"])::before,
body.for-login .form-group:has(input[type="password"])::before {
	top: clamp(9px, 1.7vh, 14px) !important;
	left: 23px !important;
	font-size: clamp(21px, 3.5vh, 25px) !important;
}

/* Remember/Forgot row */
body[data-path="login"] .mlnms-login-options {
	margin: -2px 0 clamp(10px, 1.8vh, 15px) !important;
	font-size: clamp(13px, 2vh, 16px) !important;
}

body[data-path="login"] .mlnms-remember-box {
	width: clamp(17px, 2.8vh, 22px) !important;
	height: clamp(17px, 2.8vh, 22px) !important;
	font-size: clamp(12px, 2vh, 16px) !important;
}

/* Buttons */
body[data-path="login"] .btn-login,
body[data-path="login"] .page-card .btn-primary,
body.for-login .btn-login,
body.for-login .page-card .btn-primary {
	height: clamp(46px, 7vh, 56px) !important;
	font-size: clamp(17px, 2.7vh, 20px) !important;
	margin-top: 0 !important;
}

body[data-path="login"] .btn-login::after,
body[data-path="login"] .page-card .btn-primary::after,
body.for-login .btn-login::after,
body.for-login .page-card .btn-primary::after {
	right: 24px !important;
	font-size: clamp(24px, 4.4vh, 32px) !important;
}

body[data-path="login"] .login-divider,
body[data-path="login"] .page-card .divider,
body.for-login .login-divider,
body.for-login .page-card .divider {
	margin: clamp(8px, 1.7vh, 13px) 0 !important;
	font-size: clamp(14px, 2.2vh, 17px) !important;
}

body[data-path="login"] .mlnms-email-link,
body.for-login .mlnms-email-link {
	height: clamp(44px, 6.8vh, 54px) !important;
	font-size: clamp(15px, 2.4vh, 18px) !important;
}

/* Fix any Frappe element escaping above the card */
body[data-path="login"] .for-login,
body.for-login .for-login {
	max-height: 100vh !important;
	overflow: hidden !important;
}

/* Short laptop screens / browser zoom */
@media (max-height: 700px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		width: min(520px, 86vw) !important;
		margin-top: 155px !important;
		padding: 14px 28px 14px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -145px !important;
		height: 132px !important;
		width: min(480px, 82vw) !important;
	}

	body[data-path="login"] .page-card-head h4,
	body[data-path="login"] .page-card-head .page-card-head-title,
	body.for-login .page-card-head h4,
	body.for-login .page-card-head .page-card-head-title {
		font-size: 20px !important;
	}

	body[data-path="login"] .page-card-head h4::after,
	body[data-path="login"] .page-card-head .page-card-head-title::after,
	body.for-login .page-card-head h4::after,
	body.for-login .page-card-head .page-card-head-title::after {
		font-size: 13px !important;
	}

	body[data-path="login"] .form-control,
	body.for-login .form-control {
		height: 42px !important;
		font-size: 16px !important;
	}

	body[data-path="login"] .btn-login,
	body[data-path="login"] .page-card .btn-primary,
	body.for-login .btn-login,
	body.for-login .page-card .btn-primary,
	body[data-path="login"] .mlnms-email-link,
	body.for-login .mlnms-email-link {
		height: 42px !important;
		font-size: 15px !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		bottom: -48px !important;
		font-size: 10px !important;
		line-height: 1.45 !important;
	}
}

/* Very short screens */
@media (max-height: 610px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		transform: scale(0.88) !important;
		transform-origin: top center !important;
		margin-top: 122px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -128px !important;
		height: 118px !important;
	}
}

/* Tablet */
@media (max-width: 900px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		width: min(540px, 88vw) !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		width: min(520px, 84vw) !important;
	}
}

/* Mobile portrait */
@media (max-width: 560px) {
	body[data-path="login"]::before,
	body.for-login::before {
		inset: 8px !important;
	}

	body[data-path="login"] .page-card,
	body.for-login .page-card {
		width: 88vw !important;
		margin-top: 145px !important;
		padding: 14px 16px 14px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -132px !important;
		width: 84vw !important;
		height: 122px !important;
	}

	body[data-path="login"] .mlnms-login-options {
		flex-direction: row !important;
		gap: 8px !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		width: 92vw !important;
		font-size: 9px !important;
	}
}


/* =========================================================
   FINAL FOOTER READABILITY FIX
   Keeps footer visible, readable, and not cut off.
   ========================================================= */

body[data-path="login"],
body.for-login {
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

body[data-path="login"] .page-card-layout,
body.for-login .page-card-layout {
	height: auto !important;
	min-height: 100vh !important;
	overflow: visible !important;
	padding-bottom: 84px !important;
}

/* Move card slightly up to give footer breathing room */
body[data-path="login"] .page-card,
body.for-login .page-card {
	margin-top: clamp(215px, 32vh, 260px) !important;
	margin-bottom: 86px !important;
}

/* Make footer clean, readable, and inside screen area */
body[data-path="login"] .page-card::after,
body.for-login .page-card::after {
	content: "🛡  Secure login protected by ML-NMS security\a© 2026 Machine Learning Based Network Monitoring System. Developed by Solomon.";
	position: absolute !important;
	left: 50% !important;
	bottom: -72px !important;
	transform: translateX(-50%) !important;
	width: min(760px, 94vw) !important;
	text-align: center !important;
	white-space: pre-line !important;
	color: #dff6ff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.2px !important;
	text-shadow:
		0 0 8px rgba(0, 174, 255, 0.55),
		0 0 18px rgba(0, 93, 255, 0.28) !important;
	opacity: 1 !important;
}

/* Browser zoom / shorter laptop screens */
@media (max-height: 760px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		margin-top: 195px !important;
		margin-bottom: 82px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -160px !important;
		height: 142px !important;
		width: min(440px, 76vw) !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		bottom: -66px !important;
		font-size: 12px !important;
		line-height: 1.55 !important;
	}
}

/* Very short screens: keep footer visible but compact */
@media (max-height: 650px) {
	body[data-path="login"] .page-card-layout,
	body.for-login .page-card-layout {
		padding-bottom: 70px !important;
	}

	body[data-path="login"] .page-card,
	body.for-login .page-card {
		margin-top: 160px !important;
		margin-bottom: 74px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -132px !important;
		height: 116px !important;
		width: min(390px, 74vw) !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		bottom: -58px !important;
		font-size: 11px !important;
		line-height: 1.45 !important;
	}
}

/* Mobile footer */
@media (max-width: 560px) {
	body[data-path="login"] .page-card {
		margin-bottom: 82px !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		width: 92vw !important;
		bottom: -68px !important;
		font-size: 10.5px !important;
		line-height: 1.5 !important;
	}
}


/* =========================================================
   EXACT CLEAN LOGIN SCREEN LOCK
   Final target: logo + login card + readable footer only.
   Removes welcome text, Frappe cube/default logo, outer frame,
   extra headers, and keeps everything visible.
   ========================================================= */

/* Remove every extra Frappe/default heading/logo/header item */
body[data-path="login"] .page-card-head,
body.for-login .page-card-head,
body[data-path="login"] .page-card-head *,
body.for-login .page-card-head *,
body[data-path="login"] .navbar,
body.for-login .navbar,
body[data-path="login"] header,
body.for-login header,
body[data-path="login"] footer,
body.for-login footer,
body[data-path="login"] .app-logo,
body.for-login .app-logo,
body[data-path="login"] .login-logo,
body.for-login .login-logo,
body[data-path="login"] .brand-logo,
body.for-login .brand-logo,
body[data-path="login"] img[src*="frappe"],
body.for-login img[src*="frappe"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Remove outer glowing rectangle/frame completely */
body[data-path="login"]::before,
body.for-login::before {
	display: none !important;
}

/* Page must not crop footer */
body[data-path="login"],
body.for-login {
	min-height: 100vh !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background:
		radial-gradient(circle at 50% 6%, rgba(0, 153, 255, 0.16), transparent 22%),
		radial-gradient(circle at 16% 50%, rgba(0, 135, 255, 0.14), transparent 27%),
		radial-gradient(circle at 86% 50%, rgba(0, 135, 255, 0.14), transparent 27%),
		linear-gradient(180deg, #020d1a 0%, #03101f 50%, #020912 100%) !important;
}

/* Clean centered layout */
body[data-path="login"] .page-card-layout,
body.for-login .page-card-layout {
	min-height: 100vh !important;
	height: auto !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 0 14px 92px !important;
	background: transparent !important;
	overflow: visible !important;
}

/* Smaller balanced form card exactly like provided screenshot */
body[data-path="login"] .page-card,
body.for-login .page-card {
	position: relative !important;
	z-index: 5 !important;
	width: min(336px, 78vw) !important;
	max-width: 336px !important;
	margin-top: clamp(145px, 31vh, 170px) !important;
	margin-bottom: 76px !important;
	padding: 12px 72px 12px !important;
	border-radius: 8px !important;
	background: rgba(3, 15, 31, 0.84) !important;
	border: 1.5px solid rgba(0, 174, 255, 0.80) !important;
	box-shadow:
		0 0 14px rgba(0, 174, 255, 0.78),
		0 0 34px rgba(0, 93, 255, 0.32),
		inset 0 0 18px rgba(0, 174, 255, 0.08) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}

/* ML-NMS logo block only */
body[data-path="login"] .page-card::before,
body.for-login .page-card::before {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	top: -122px !important;
	transform: translateX(-50%) !important;
	width: min(350px, 76vw) !important;
	height: 110px !important;
	background-repeat: no-repeat !important;
	background-position: center bottom !important;
	background-size: contain !important;
	pointer-events: none !important;
	background-image: url("data:image/svg+xml,%3Csvg width='420' height='150' viewBox='0 0 420 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2.8' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%2300aaff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' filter='url(%23glow)'%3E%3Crect x='177' y='3' width='52' height='41' rx='5'/%3E%3Cpath d='M188 32 L198 22 L207 27 L222 12'/%3E%3Cpath d='M203 44 v13 M190 58 h32'/%3E%3Ccircle cx='241' cy='38' r='18'/%3E%3Cpath d='M254 51 l23 23'/%3E%3C/g%3E%3Ctext x='210' y='94' text-anchor='middle' font-size='38' font-weight='900' font-family='Arial, Helvetica, sans-serif' fill='%2319a8ff' filter='url(%23glow)' letter-spacing='4'%3EML-NMS%3C/text%3E%3Ctext x='210' y='123' text-anchor='middle' font-size='16' font-family='Arial, Helvetica, sans-serif' fill='%23f4fbff' letter-spacing='5'%3EMachine Learning Based%3C/text%3E%3Ctext x='210' y='143' text-anchor='middle' font-size='16' font-family='Arial, Helvetica, sans-serif' fill='%23f4fbff' letter-spacing='3'%3ENetwork Monitoring System%3C/text%3E%3Cline x1='5' y1='93' x2='85' y2='93' stroke='%2300aaff' stroke-width='1.5' opacity='.85'/%3E%3Ccircle cx='88' cy='93' r='3' fill='%2300aaff'/%3E%3Cline x1='335' y1='93' x2='415' y2='93' stroke='%2300aaff' stroke-width='1.5' opacity='.85'/%3E%3Ccircle cx='332' cy='93' r='3' fill='%2300aaff'/%3E%3C/svg%3E") !important;
}

/* Readable footer, not cut off */
body[data-path="login"] .page-card::after,
body.for-login .page-card::after {
	content: "🛡  Secure login protected by ML-NMS security\a© 2026 Machine Learning Based Network Monitoring System. Developed by Solomon.";
	position: absolute !important;
	left: 50% !important;
	bottom: -48px !important;
	transform: translateX(-50%) !important;
	width: min(520px, 92vw) !important;
	text-align: center !important;
	white-space: pre-line !important;
	color: #dff6ff !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-shadow:
		0 0 7px rgba(0, 174, 255, 0.58),
		0 0 14px rgba(0, 93, 255, 0.30) !important;
	opacity: 1 !important;
}

/* Compact form controls */
body[data-path="login"] .form-group,
body.for-login .form-group {
	margin-bottom: 8px !important;
}

body[data-path="login"] .form-control,
body.for-login .form-control {
	height: 38px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding-left: 38px !important;
	padding-right: 34px !important;
	border-radius: 4px !important;
	background: rgba(3, 15, 31, 0.94) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 1px solid rgba(0, 174, 255, 0.55) !important;
	box-shadow: inset 0 0 12px rgba(0, 74, 180, 0.13) !important;
}

body[data-path="login"] input:-webkit-autofill,
body[data-path="login"] input:-webkit-autofill:hover,
body[data-path="login"] input:-webkit-autofill:focus,
body.for-login input:-webkit-autofill,
body.for-login input:-webkit-autofill:hover,
body.for-login input:-webkit-autofill:focus {
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff !important;
	box-shadow: 0 0 0 1000px rgba(3, 15, 31, 0.98) inset !important;
	border: 1px solid rgba(0, 174, 255, 0.55) !important;
}

/* Neat input icons */
body[data-path="login"] .form-group:has(input[type="text"])::before,
body[data-path="login"] .form-group:has(input[type="email"])::before,
body[data-path="login"] .form-group:has(input[name="usr"])::before,
body.for-login .form-group:has(input[type="text"])::before,
body.for-login .form-group:has(input[type="email"])::before,
body.for-login .form-group:has(input[name="usr"])::before {
	content: "♙" !important;
	top: 8px !important;
	left: 15px !important;
	font-size: 18px !important;
	color: #009dff !important;
}

body[data-path="login"] .form-group:has(input[type="password"])::before,
body.for-login .form-group:has(input[type="password"])::before {
	content: "▣" !important;
	top: 10px !important;
	left: 16px !important;
	font-size: 15px !important;
	color: #009dff !important;
}

body[data-path="login"] .password-field .link-btn,
body[data-path="login"] .input-with-feedback .link-btn,
body.for-login .password-field .link-btn,
body.for-login .input-with-feedback .link-btn {
	right: 10px !important;
	font-size: 10px !important;
	color: rgba(223, 246, 255, 0.75) !important;
}

/* Remember row */
body[data-path="login"] .mlnms-login-options {
	margin: 0 0 8px !important;
	font-size: 10px !important;
	gap: 8px !important;
}

body[data-path="login"] .mlnms-remember {
	gap: 5px !important;
}

body[data-path="login"] .mlnms-remember-box {
	width: 13px !important;
	height: 13px !important;
	font-size: 9px !important;
	border-radius: 2px !important;
}

body[data-path="login"] .mlnms-forgot-link {
	color: #1ba8ff !important;
	text-decoration: none !important;
}

/* Login and email buttons */
body[data-path="login"] .btn-login,
body[data-path="login"] .page-card .btn-primary,
body.for-login .btn-login,
body.for-login .page-card .btn-primary {
	height: 34px !important;
	font-size: 13px !important;
	font-weight: 850 !important;
	letter-spacing: 0.8px !important;
	border-radius: 4px !important;
	margin-top: 0 !important;
}

body[data-path="login"] .btn-login::after,
body[data-path="login"] .page-card .btn-primary::after,
body.for-login .btn-login::after,
body.for-login .page-card .btn-primary::after {
	right: 14px !important;
	font-size: 22px !important;
}

body[data-path="login"] .login-divider,
body[data-path="login"] .page-card .divider,
body.for-login .login-divider,
body.for-login .page-card .divider {
	margin: 8px 0 !important;
	font-size: 10px !important;
}

body[data-path="login"] .mlnms-email-link,
body.for-login .mlnms-email-link {
	height: 32px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	border-radius: 4px !important;
}

body[data-path="login"] .mlnms-email-link::before,
body.for-login .mlnms-email-link::before {
	font-size: 15px !important;
	margin-right: 10px !important;
}

/* Mobile: same clean design, only narrower */
@media (max-width: 560px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		width: 72vw !important;
		padding: 12px 34px !important;
		margin-top: 150px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -118px !important;
		width: 76vw !important;
		height: 105px !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		bottom: -50px !important;
		font-size: 9px !important;
		width: 88vw !important;
	}

	body[data-path="login"] .mlnms-login-options {
		font-size: 9px !important;
	}
}

/* Short laptop screens */
@media (max-height: 650px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		margin-top: 132px !important;
		margin-bottom: 68px !important;
	}

	body[data-path="login"] .page-card::before,
	body.for-login .page-card::before {
		top: -108px !important;
		height: 96px !important;
		width: min(315px, 72vw) !important;
	}

	body[data-path="login"] .page-card::after,
	body.for-login .page-card::after {
		bottom: -44px !important;
		font-size: 9px !important;
	}
}