/* Branded, responsive login page while keeping Frappe's native auth flow. */
body:has(.for-login) {
	min-height: 100vh;
	background:
		radial-gradient(circle at 12% 18%, rgb(230 57 70 / 16%), transparent 34rem),
		linear-gradient(135deg, #111722 0%, #202633 55%, #111722 100%);
}

body:has(.for-login) .page-content-wrapper {
	display: flex;
	min-height: 100vh;
	align-items: center;
	padding: 40px 24px;
}

body:has(.for-login) .page-breadcrumbs,
body:has(.for-login) .page-header-wrapper {
	display: none;
}

body:has(.for-login) section.for-signup.signup-disabled {
	display: none !important;
}

body:has(.for-login) #page-login > .page-content-wrapper > main.container {
	width: min(1120px, 100%);
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
}

body:has(.for-login) #page-login .page_content {
	width: 100%;
	margin: 0;
}

body:has(.for-login) section.for-login:not(.hide) {
	width: 100%;
	min-height: min(680px, calc(100vh - 80px));
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.82fr);
	align-items: center;
	gap: clamp(28px, 6vw, 88px);
	direction: ltr;
}

body:has(.for-login) section.for-login:not(.hide)::before {
	content: "REDLINE\A BUSINESS OPERATIONS\A\A A secure workspace for your team";
	grid-column: 1;
	grid-row: 1;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(34px, 6vw, 78px);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 10px;
	background:
		linear-gradient(135deg, rgb(20 27 38 / 92%), rgb(30 37 49 / 82%)),
		url("/assets/red_theme/images/Redsvg.svg?v=20261026-3") no-repeat 78% 78% / min(38%, 250px);
	box-shadow: 0 24px 70px rgb(0 0 0 / 24%);
	color: #fff;
	font-family: "Cairo", "Inter", sans-serif;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.02em;
	text-align: left;
	white-space: pre-line;
}

body:has(.for-login) section.for-login::before::first-line {
	font-size: clamp(2.6rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.09em;
}

body:has(.for-login) .login-content {
	width: 100%;
	max-width: 460px;
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid #e7e9ee;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 54px rgb(8 15 28 / 22%);
	direction: rtl;
	text-align: right;
}

body:has(.for-login) section.for-login:not(.hide) > .login-content {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}

body:has(.for-login) .login-content .page-card-head {
	gap: 18px;
	text-align: right;
}

body:has(.for-login) .login-content .app-logo {
	width: 58px;
	height: 58px;
	padding: 8px;
	border: 1px solid #f2dfe1;
	border-radius: 6px;
	background: #fff7f7;
	object-fit: contain;
}

body:has(.for-login) .login-content .page-card-head h4 {
	color: #202633;
	font-family: "Cairo", "Inter", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.4;
}

body:has(.for-login) .login-content .page-card-subtitle {
	color: #697383;
	font-size: 0.98rem;
	line-height: 1.7;
}

body:has(.for-login) .login-content .form-group label {
	color: #394354;
	font-weight: 600;
}

body:has(.for-login) .login-content .form-control {
	min-height: 48px;
	border: 1px solid #d9dee7;
	border-radius: 4px;
	background: #fff;
	color: #202633;
	box-shadow: none;
}

body:has(.for-login) .login-content .form-control:focus {
	border-color: #e63946;
	box-shadow: 0 0 0 3px rgb(230 57 70 / 12%);
}

body:has(.for-login) .login-content .es-button[data-variant="solid"] {
	min-height: 48px;
	border: 1px solid #d52d3b;
	border-radius: 4px;
	background: #e63946;
	color: #fff;
	font-family: "Cairo", "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 6px 16px rgb(230 57 70 / 18%);
}

body:has(.for-login) .login-content .es-button[data-variant="solid"]:hover:not(:disabled) {
	border-color: #c62836;
	background: #d92f3d;
}

body:has(.for-login) .login-content a {
	color: #cf2938;
	text-decoration: none;
}

body:has(.for-login) .login-content a:hover {
	color: #a91f2b;
	text-decoration: underline;
}

@media (max-width: 760px) {
	body:has(.for-login) .page-content-wrapper {
		padding: 20px 14px 28px;
	}

	body:has(.for-login) section.for-login:not(.hide) {
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	body:has(.for-login) section.for-login:not(.hide)::before {
		grid-column: 1;
		grid-row: 1;
		min-height: 148px;
		padding: 22px 26px;
		border-radius: 6px;
		background-size: auto, 94px;
		font-size: 0.9rem;
		line-height: 1.5;
	}

	body:has(.for-login) section.for-login::before::first-line {
		font-size: 1.75rem;
	}

	body:has(.for-login) section.for-login:not(.hide) > .login-content {
		grid-column: 1;
		grid-row: 2;
		max-width: 520px;
		padding: 26px 22px;
	}
}

@media (max-width: 380px) {
	body:has(.for-login) .page-content-wrapper {
		padding-inline: 10px;
	}

	body:has(.for-login) section.for-login:not(.hide)::before {
		min-height: 126px;
		padding: 18px;
		background-size: auto, 72px;
		font-size: 0.8rem;
	}

	body:has(.for-login) .login-content .page-card-head h4 {
		font-size: 1.5rem;
	}
}