/* Login page in the FlipOhio phase design (docs/configuration/design-system.md): a white card on the
   grey page with the Acquire / Sell / Close stripe on top, a large heavy title, filled fields and a heavy
   pill button. Loaded on website pages (hooks.py web_include_css); every rule is scoped to the login page.
   Frappe's own login styles are nested (`.for-login .page-card .page-card-body input`), so these rules
   use the same chain under body[data-path="login"] to win. */

body[data-path="login"] {
	--rf-ink: #0b0b10;
	--rf-acquire: #2563eb;
	--rf-sell: #c2410c;
	--rf-close: #047857;
	background: #f2f2f7;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card {
	position: relative;
	overflow: hidden;
	max-width: 440px;
	min-height: 0;
	padding: 40px 36px 32px;
	border: none;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 30px 70px -30px rgba(15, 23, 42, 0.35), 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* The phase stripe across the top of the card. */
body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 8px;
	background: linear-gradient(
		90deg,
		var(--rf-acquire) 0 33.33%,
		var(--rf-sell) 33.33% 66.66%,
		var(--rf-close) 66.66% 100%
	);
}

/* Brand header: the logo (it carries the name), then the panel's title and subtitle below. */
body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 14px;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-head .app-logo {
	grid-row: 1;
	grid-column: 1;
	/* The full Flip Ohio logo (symbol over the FlipOhio wordmark) is a little wider than tall, about 1.14:1. */
	width: auto;
	height: 96px;
	max-width: 110px;
	object-fit: contain;
	margin: 0;
}

/* Frappe gives the login page Navbar Settings' logo, the mark (symbol only). When it is still our mark, show the
   full logo instead, so the card carries the name. An uploaded Company Logo is left as it is. */
body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-head .app-logo[src$="flip-ohio-mark-mono.svg"] {
	content: url("/assets/erpnext_wholesaling/images/flip-ohio-logo-mono.svg");
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-head .page-card-head-text {
	grid-column: 1 / -1;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-head h4 {
	margin-top: 18px;
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--rf-ink);
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-subtitle {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 500;
	color: #6b7280;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-body .form-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7280;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-body input.form-control {
	height: 48px;
	border: none;
	border-radius: 14px;
	background-color: #f2f2f7;
	font-size: 16px;
	font-weight: 600;
	color: var(--rf-ink);
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-body input.form-control:focus {
	background-color: #fff;
	box-shadow: 0 0 0 2px var(--rf-acquire), 0 0 0 5px rgba(37, 99, 235, 0.15);
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-body .field-icon {
	top: 50%;
	transform: translateY(-50%);
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .forgot-password-message a {
	font-weight: 600;
	color: var(--rf-acquire);
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-actions .btn {
	height: 52px;
	border: none;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-actions .btn.btn-login,
body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-actions .btn.btn-primary {
	background: var(--rf-ink);
	color: #fff;
	box-shadow: 0 10px 22px -12px rgba(11, 11, 16, 0.6);
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-actions .btn.btn-login:hover,
body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-actions .btn.btn-primary:hover {
	background: #1f1f28;
}

body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-actions .btn:not(.btn-login):not(.btn-primary) {
	background: #f2f2f7;
	color: var(--rf-ink);
}

@media (max-width: 575.98px) {
	body[data-path="login"] .page-content-wrapper {
		min-height: 0;
		padding-top: 6vh;
	}

	body[data-path="login"] .page-content-wrapper .container {
		padding-inline: 12px;
	}

	body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card {
		min-height: 0;
		margin: 0 auto;
		padding: 34px 22px 26px;
		border-radius: 26px;
	}

	body[data-path="login"] :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup) .page-card .page-card-head h4 {
		font-size: 2.1rem;
	}
}

/* "Buying or selling? Join the Buyer/Seller Portal" and "A contractor? Join the Contractor Portal" under the login
   card (login_redirect.js). */
.rf-buyer-signup,
.rf-contractor-signup {
	margin: 18px auto 0;
	text-align: center;
	color: var(--rf-muted, #6b6b76);
	font-size: 0.95rem;
}

.rf-contractor-signup {
	margin-top: 6px;
}

.rf-buyer-signup a,
.rf-contractor-signup a {
	font-weight: 800;
	color: var(--rf-ink, #0b0b10);
}