/* LOGIN THEME
   Responsive / Compact UI
*/

body[data-path="login"] {
	--primary: #16b34a;
	--primary-dark: #10963d;
	--text: #162549;
	--muted: #6f7b9b;
	--border: #dfe4f3;

	margin: 0;
	min-height: 100vh;

	background:
		radial-gradient(
			circle at top,
			rgba(22, 179, 74, .08),
			transparent 40%
		),
		#f7faf8 !important;

	font-family: Inter, sans-serif;
}


/* LOGIN PAGE CONTAINER */

body[data-path="login"] .page-card-container {
	min-height: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	padding: 15px !important;

	box-sizing: border-box;
}


/* LOGO */

body[data-path="login"] .page-card-head {
	text-align: center;

	padding-bottom: 14px !important;

	margin: 0 !important;
}

body[data-path="login"] .page-card-head img {
	width: 190px !important;
	max-width: 190px !important;

	height: auto !important;
	max-height: 65px !important;

	object-fit: contain;
}


/* Hide Frappe default login heading */

body[data-path="login"] #login-heading,
body[data-path="login"] .page-card-head h4 {
	display: none !important;
}


/* LOGIN CARD Reduced card width only */

body[data-path="login"] .page-card {
	width: 100% !important;

	max-width: 400px !important;

	box-sizing: border-box !important;

	padding: 5px 20px 25px 20px !important;

	background: #fff;

	border-radius: 20px;

	border: 1px solid #e8ebf5;

	box-shadow:
		0 15px 40px rgba(0, 0, 0, .08);

	animation: fadeIn .4s ease;
}


/* CUSTOM HEADER */

body[data-path="login"] .fh-header {
	text-align: center;

	margin-bottom: 25px !important;
}

body[data-path="login"] .fh-header h3 {
	margin: 0;

	color: var(--text);

	font-size: 30px !important;

	font-weight: 700;

	line-height: 1.2;
}

body[data-path="login"] .fh-header p {
	margin-top: 2px;

	margin-bottom: 0;

	color: var(--muted);

	font-size: 15px !important;

	line-height: 1.4;
}


/* FORM GROUPS */

body[data-path="login"] .form-group {
	position: relative;

	margin-bottom: 18px !important;
}


/* LABELS */

body[data-path="login"] .fh-label {
	display: block;

	margin-bottom: 7px !important;

	font-size: 13px !important;

	line-height: 1.3;

	font-weight: 600;

	color: #222;
}


/* INPUTS */

body[data-path="login"] .form-control {
	width: 100% !important;

	height: 48px !important;

	min-height: 48px !important;

	box-sizing: border-box !important;

	border-radius: 9px !important;

	border: 1px solid var(--border) !important;

	background: #fff !important;

	font-size: 14px !important;

	padding-left: 42px !important;

	padding-right: 55px !important;

	transition: .2s ease;
}

body[data-path="login"] .form-control:hover {
	border-color: #c7d0ea !important;
}

body[data-path="login"] .form-control:focus {
	border-color: var(--primary) !important;

	box-shadow:
		0 0 0 3px rgba(22, 179, 74, .12) !important;
}


/* INPUT ICON */

body[data-path="login"]
.for-login
.page-card
.page-card-body
.field-icon {

	position: absolute;

	left: 10px;

	top: 50% !important;

	transform: translateY(-50%) !important;

	width: 16px;

	height: 16px;

	z-index: 2;

	pointer-events: none;
}


/* PASSWORD SHOW */

body[data-path="login"]
.for-login
.page-card
.page-card-body
.toggle-password {

	position: absolute;

	right: 12px;

	top: 50% !important;

	transform: translateY(-50%) !important;

	font-size: 12px !important;

	line-height: 1;

	color: #7d8ab3;

	font-weight: 600;

	cursor: pointer;

	z-index: 3;
}


/* FORGOT PASSWORD */

body[data-path="login"] .forgot-password-message {
	margin-top: 4px !important;
}

body[data-path="login"] .forgot-password-message a {
	color: #054f1b !important;

	text-decoration: none;

	font-size: 13px !important;

	font-weight: 500;
}

body[data-path="login"] .forgot-password-message a:hover {
	color: var(--primary) !important;

	text-decoration: underline;
}


/* LOGIN BUTTON */

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {

	width: 100% !important;

	height: 52px !important;

	min-height: 52px !important;

	box-sizing: border-box !important;

	border: none !important;

	border-radius: 9px !important;

	margin-top: 16px !important;

	background:
		linear-gradient(
			90deg,
			#20c437,
			#15b530
		) !important;

	color: #fff !important;

	font-size: 15px !important;

	font-weight: 700;

	transition: .25s;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {

	transform: translateY(-2px);

	box-shadow:
		0 10px 25px rgba(21, 181, 48, .25);
}


/* OR DIVIDER */

body[data-path="login"] .login-divider {
	display: none !important;
}


/* EMAIL LINK */

body[data-path="login"] .btn-default {

	width: 100% !important;

	height: 48px !important;

	min-height: 48px !important;

	border-radius: 9px !important;

	border: 1px solid #d8dff1;

	background: #fff;

	font-size: 14px !important;

	font-weight: 600;

	transition: .2s;
}

body[data-path="login"] .btn-default:hover {

	background: #f6fff8;

	border-color: var(--primary);

	color: var(--primary);
}


/* FOOTER */

body[data-path="login"] .fh-footer {

	margin-top: 18px !important;

	text-align: center;

	font-size: 13px !important;

	color: #6b7280;
}

body[data-path="login"] .fh-footer a {

	color: var(--primary);

	font-weight: 600;

	text-decoration: none;
}

body[data-path="login"] .fh-footer a:hover {
	text-decoration: underline;
}


/* HIDE TOP LEFT NAVBAR LOGO (ONLY LOGIN PAGE) */

body[data-path="login"] .navbar-brand {
	display: none !important;
}


/* HIDE DEFAULT FOOTER */

body[data-path="login"] footer {
	display: none !important;
}


/* LOGIN ACTIONS */

body[data-path="login"] .page-card-actions {
	margin-bottom: 25px !important;
}


/* FORGOT PASSWORD PAGE */

body[data-path="login"] .for-forgot .email-field {
	position: relative;

	margin-top: 15px !important;
}

body[data-path="login"]
.for-forgot
.email-field
.field-icon {

	top: 16px !important;

	left: 10px !important;
}


/* ANIMATION */

@keyframes fadeIn {

	from {
		opacity: 0;

		transform: translateY(10px);
	}

	to {
		opacity: 1;

		transform: translateY(0);
	}
}


/* DESKTOP - 1280px */

@media (max-width: 1280px) {

	body[data-path="login"] .page-card {
		max-width: 460px !important;

		padding: 30px 35px !important;
	}

	body[data-path="login"] .page-card-head img {
		width: 180px !important;
	}

	body[data-path="login"] .fh-header h3 {
		font-size: 28px !important;
	}

	body[data-path="login"] .form-control {
		height: 46px !important;
		min-height: 46px !important;
	}

	body[data-path="login"] .btn-login,
	body[data-path="login"] .btn-primary {
		height: 50px !important;
		min-height: 50px !important;
	}
}


/* TABLET - 1024px */

@media (max-width: 1024px) {

	body[data-path="login"] .page-card {
		max-width: 440px !important;

		padding: 28px 32px !important;
	}

	body[data-path="login"] .page-card-head img {
		width: 170px !important;
	}

	body[data-path="login"] .fh-header {
		margin-bottom: 22px !important;
	}

	body[data-path="login"] .fh-header h3 {
		font-size: 26px !important;
	}

	body[data-path="login"] .fh-header p {
		font-size: 14px !important;
	}

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


/* MOBILE - 768px */

@media (max-width: 768px) {

	body[data-path="login"] .page-card-container {
		padding: 15px !important;

		justify-content: center;
	}

	body[data-path="login"] .page-card {
		width: 100% !important;

		max-width: 430px !important;

		padding: 26px 24px !important;

		border-radius: 16px !important;
	}

	body[data-path="login"] .page-card-head img {
		width: 160px !important;

		max-height: 55px !important;
	}

	body[data-path="login"] .fh-header {
		margin-bottom: 20px !important;
	}

	body[data-path="login"] .fh-header h3 {
		font-size: 24px !important;
	}

	body[data-path="login"] .fh-header p {
		font-size: 13px !important;
	}

	body[data-path="login"] .form-control {
		height: 46px !important;

		min-height: 46px !important;

		font-size: 14px !important;
	}

	body[data-path="login"] .btn-login,
	body[data-path="login"] .btn-primary {
		height: 48px !important;

		min-height: 48px !important;

		font-size: 17px !important;
	}
}


/* SMALL MOBILE - 480px */

@media (max-width: 480px) {

	body[data-path="login"] .page-card-container {
		padding: 10px !important;
	}

	body[data-path="login"] .page-card {
		max-width: 100% !important;

		padding: 22px 18px !important;

		border-radius: 14px !important;
	}

	body[data-path="login"] .page-card-head {
		padding-bottom: 8px !important;
	}

	body[data-path="login"] .page-card-head img {
		width: 140px !important;
	}

	body[data-path="login"] .fh-header h3 {
		font-size: 21px !important;
	}

	body[data-path="login"] .fh-header p {
		font-size: 12px !important;
	}

	body[data-path="login"] .fh-label {
		font-size: 12px !important;
	}

	body[data-path="login"] .form-control {
		height: 44px !important;

		min-height: 44px !important;

		font-size: 13px !important;
	}

	body[data-path="login"] .btn-login,
	body[data-path="login"] .btn-primary {
		height: 46px !important;

		min-height: 46px !important;

		font-size: 16px !important;
	}
}


/* LOGIN ICON POSITION */

body[data-path="login"]
.for-login
.page-card
.page-card-body
.field-icon {
	position: absolute;

	left: 10px;

	top: 50% !important;

	transform: translateY(-50%) !important;
}

body[data-path="login"]
.for-login
.page-card
.page-card-body
.toggle-password {
	top: 50% !important;

	transform: translateY(-50%) !important;
}


/* Hide top-left navbar logo only on Login page */

body[data-path="login"] .navbar-brand {
	display: none !important;
}


/* Forgot Password - Email Icon */

body[data-path="login"] .for-forgot .email-field {
	position: relative;
}

body[data-path="login"] .for-forgot .email-field .field-icon {
	top: 10px !important;

	left: 10px !important;
}

body[data-path="login"] .for-forgot .email-field {
	margin-top: 20px !important;
}


/* Hide OR divider */

body[data-path="login"] .login-divider {
	display: none !important;
}


/* Size between sign in and page card */

body[data-path="login"] .page-card-actions {
	margin-bottom: 30px !important;
}


/* COMPACT LOGIN INPUTS */

body[data-path="login"] .page-card .form-control {
	height: 38px !important;

	min-height: 38px !important;

	padding-top: 8px !important;

	padding-bottom: 8px !important;
}


/* Compact Login Button */

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
	height: 38px !important;

	min-height: 38px !important;
}