/* Copyright (c) 2026, Titansoft Limited and contributors
   License: see license.txt

   Imagine-branded skin for the Frappe /login page (sign in, sign up,
   forgot password and email-link views). Loaded on every web page via
   web_include_css, so every rule is gated on body[data-path="login"]
   and nothing leaks into the supplier portal or other website pages. */

body[data-path="login"] {
	--iw-brand: #4798c1;
	--iw-brand-strong: #3a86b0;
	--iw-brand-dark: #2f7299;
	--iw-ink: #0f172a;

	min-height: 100vh;
	background: linear-gradient(135deg, #4798c1 0%, #2f7299 55%, #1c4a66 100%) fixed;
}

body[data-path="login"] .page-content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding: 32px 16px;
}

/* ── Card ────────────────────────────────────────────────────── */
body[data-path="login"] .page-card {
	max-width: 440px;
	padding: 32px 30px 30px;
	gap: 24px;
	background-color: #ffffff;
	border: none;
	border-radius: 20px;
	box-shadow: 0 20px 48px rgba(8, 32, 48, 0.35);
}

/* ── Logo + heading ──────────────────────────────────────────── */
body[data-path="login"] .page-card-head {
	align-items: center;
	gap: 14px;
}

/* Whatever logo the site has set (Website Settings / Navbar Settings). */
body[data-path="login"] .page-card-head img.app-logo {
	height: auto;
	max-height: 48px;
	max-width: 180px;
	width: auto;
}

/* Set on the text itself - the head carries a .text-left utility that is
   !important, so centring the container alone does nothing. */
body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-subtitle {
	text-align: center;
}

body[data-path="login"] .page-card-head h4 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--iw-ink);
}

body[data-path="login"] .page-card-head .page-card-subtitle {
	font-size: 14px;
	color: #525866;
}

/* ── Fields ──────────────────────────────────────────────────── */
body[data-path="login"] .page-card .page-card-body label,
body[data-path="login"] .page-card .page-card-body a[href="#forgot"] {
	font-size: 14px;
	color: #6b7280;
}

body[data-path="login"] .page-card .page-card-body a[href="#forgot"]:hover,
body[data-path="login"] .sign-up-message a:hover {
	color: var(--iw-brand-dark);
}

body[data-path="login"] .page-card .page-card-body input[type="text"],
body[data-path="login"] .page-card .page-card-body input[type="email"],
body[data-path="login"] .page-card .page-card-body input[type="password"] {
	height: 32px;
	padding-left: 36px;
	font-size: 14px;
	background-color: #f1f3f1;
	border: 1px solid #e3e6e3;
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body[data-path="login"] .page-card .page-card-body input[type="text"]:focus,
body[data-path="login"] .page-card .page-card-body input[type="email"]:focus,
body[data-path="login"] .page-card .page-card-body input[type="password"]:focus {
	background-color: #ffffff;
	border-color: var(--iw-brand);
	box-shadow: 0 0 0 3px rgba(71, 152, 193, 0.22);
	outline: none;
}

/* Leading field icons - the stock template no longer ships any. */
body[data-path="login"] .page-card .page-card-body .email-field,
body[data-path="login"] .page-card .page-card-body .password-field {
	position: relative;
	width: 100%;
}

body[data-path="login"] .page-card .page-card-body .email-field::before,
body[data-path="login"] .page-card .page-card-body .password-field::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: #7c8580;
	pointer-events: none;
	z-index: 2;
	-webkit-mask: var(--iw-field-icon) center / contain no-repeat;
	mask: var(--iw-field-icon) center / contain no-repeat;
}

body[data-path="login"] .page-card .page-card-body .email-field {
	--iw-field-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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

body[data-path="login"] .page-card .page-card-body .password-field {
	--iw-field-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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ── Buttons ─────────────────────────────────────────────────── */
body[data-path="login"] .page-card .page-card-actions {
	margin-top: 4px;
}

body[data-path="login"] .page-card .es-button {
	--es-bt-h: 32px;
	font-size: 14px;
	border-radius: 8px;
}

body[data-path="login"] .page-card .es-button[data-variant="solid"] {
	--bt-solid-bg: var(--iw-brand-strong);
	--bt-solid-bg-hover: var(--iw-brand-dark);
	--bt-solid-bg-active: var(--iw-brand-dark);
	--bt-solid-fg: #ffffff;
	--bt-focus: 3px solid rgba(71, 152, 193, 0.35);
	font-weight: 500;
}

body[data-path="login"] .page-card .social-logins .social-login-buttons .login-button-wrapper {
	padding: 0;
}

/* ── Phones: keep the floating card instead of the stock full-bleed ── */
@media (max-width: 575.98px) {
	body[data-path="login"] .page-content-wrapper {
		padding: 24px 0;
	}

	body[data-path="login"] .page-card {
		min-height: 0;
		padding: 28px 20px 24px;
	}
}