/* The sign-in page in the Green Care field design, so signing in does not look like a different product from the Hub.
 *
 * Frappe renders /login (and its sign-up / forgot-password panels) as an ordinary website page, styled by Frappe's
 * login bundle and by the site's website theme. This file is added to every website page through web_include_css in
 * hooks.py, so EVERY rule is scoped to body[data-path="login"] - nothing here can touch another page. The colours and
 * fonts are the same as public/css/field-ui.css (kept as a copy on purpose: that file styles html/body globally and
 * must not be loaded site-wide). The site theme forces heading fonts and link colours, hence the !important and the
 * restated hover colours below. Archivo is loaded at 400-500 only: emphasis is 500.
 * The font families are named "GCA Archivo" / "GCA Fraunces" so they cannot clash with a font of the same name that
 * the site itself declares on its other pages. */

@font-face {
	font-family: "GCA Archivo";
	src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "GCA Fraunces";
	src: url("../fonts/fraunces-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body[data-path="login"] {
	--gc-paper: #eef1e6;
	--gc-raised: #f9fbf4;
	--gc-ink: #1b2118;
	--gc-soft: #4e5a48;
	--gc-faint: #667260;
	--gc-line: #cbd3bc;
	--gc-leaf: #3d6b35;
	--gc-deep: #1f3a1b;
	--gc-on-deep: #f9fbf4;
	--gc-clay: #96503c;
	--gc-clay-soft: #f3e1db;
	--gc-tint: #e4ebdb;
	--gc-font: "GCA Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
	--gc-display: "GCA Fraunces", Georgia, "Times New Roman", "Noto Sans Devanagari", serif;

	margin: 0;
	background: var(--gc-paper);
	color: var(--gc-ink);
	font-family: var(--gc-font);
	font-size: 15px;
	line-height: 1.45;
	-webkit-tap-highlight-color: transparent;
}
body[data-path="login"] #page-login * { box-sizing: border-box; }

/* the deep-green band across the top, with the card overlapping it - the same composition as the Hub */
body[data-path="login"] #page-login {
	min-height: 100vh;
	min-height: 100dvh;
	background: linear-gradient(var(--gc-deep) 0, var(--gc-deep) 230px, transparent 230px);
}
body[data-path="login"] #page-login .page-content-wrapper,
body[data-path="login"] #page-login main.container,
body[data-path="login"] #page-login .page_content { padding: 0; max-width: none; }
body[data-path="login"] #page-login .page-breadcrumbs,
body[data-path="login"] #page-login .page-header-wrapper { display: none; }

body[data-path="login"] #page-login .page-card,
body[data-path="login"] #page-login .login-content.page-card {
	width: auto;
	max-width: 420px;
	margin: 72px auto 32px;
	padding: 28px 24px 24px;
	background: var(--gc-raised);
	border: 1px solid var(--gc-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(31, 58, 27, 0.06), 0 14px 30px -14px rgba(31, 58, 27, 0.32);
}

body[data-path="login"] #page-login .page-card-head { padding: 0; margin: 0 0 20px; text-align: center; border: 0; background: none; }
body[data-path="login"] #page-login .page-card-head .app-logo { display: block; max-height: 56px; width: auto; max-width: 70%; margin: 0 auto 14px; }
body[data-path="login"] #page-login .page-card-head h4 {
	margin: 0;
	font-family: var(--gc-display) !important;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--gc-ink);
}
body[data-path="login"] #page-login .page-card-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--gc-soft); }

body[data-path="login"] #page-login .page-card-body { padding: 0; }
body[data-path="login"] #page-login .form-group { margin: 0 0 14px; gap: 0; }
body[data-path="login"] #page-login .form-label {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 500;
	color: var(--gc-soft);
}
body[data-path="login"] #page-login .form-control,
body[data-path="login"] #page-login input.form-control {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--gc-line);
	border-radius: 12px;
	background: var(--gc-paper);
	color: var(--gc-ink);
	font: inherit;
	font-size: 16px; /* 16px: iPhones zoom into smaller inputs */
	box-shadow: none;
}
/* these two fields have an icon on the left (and the password one an eye on the right) */
body[data-path="login"] #page-login .email-field .form-control,
body[data-path="login"] #page-login .password-field .form-control { padding-left: 40px; padding-right: 42px; }
body[data-path="login"] #page-login .form-control::placeholder { color: var(--gc-faint); }
body[data-path="login"] #page-login .form-control:focus {
	outline: 0;
	border-color: var(--gc-leaf);
	background: var(--gc-paper);
	box-shadow: 0 0 0 3px rgba(61, 107, 53, 0.18);
}
body[data-path="login"] #page-login .email-field svg,
body[data-path="login"] #page-login .password-field svg { color: var(--gc-faint); stroke: currentColor; }
body[data-path="login"] #page-login .field-error { margin: 4px 0 0; font-size: 12.5px; color: var(--gc-clay); }

body[data-path="login"] #page-login .forgot-password-message { margin: 8px 0 0; text-align: right; }
body[data-path="login"] #page-login .forgot-password-message a { font-size: 13px; }

body[data-path="login"] #page-login .page-card-actions { padding: 6px 0 0; }
body[data-path="login"] #page-login .btn.btn-block,
body[data-path="login"] #page-login .btn-login,
body[data-path="login"] #page-login .btn-signup {
	display: flex; align-items: center; justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--gc-deep);
	color: var(--gc-on-deep);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	box-shadow: none;
}
body[data-path="login"] #page-login .btn.btn-block:hover,
body[data-path="login"] #page-login .btn.btn-block:focus,
body[data-path="login"] #page-login .btn-login:hover,
body[data-path="login"] #page-login .btn-signup:hover { background: var(--gc-deep); color: var(--gc-on-deep); }
body[data-path="login"] #page-login .btn.btn-block:active { transform: scale(0.99); }
body[data-path="login"] #page-login .btn.btn-block[disabled],
body[data-path="login"] #page-login .btn-signup[disabled] { background: var(--gc-line); color: var(--gc-faint); opacity: 1; cursor: not-allowed; }

/* links: the theme colours every link and its hover; say it again here */
body[data-path="login"] #page-login .page-card a,
body[data-path="login"] #page-login .page-card a:hover,
body[data-path="login"] #page-login .page-card a:visited { color: var(--gc-leaf); font-weight: 500; text-decoration: none; }
body[data-path="login"] #page-login .sign-up-message { margin: 18px 0 0; font-size: 14px; text-align: center; color: var(--gc-soft); }

body[data-path="login"] #page-login .login-error-banner {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--gc-clay-soft);
	color: var(--gc-clay);
	font-size: 13.5px;
}
body[data-path="login"] #page-login .login-success-banner {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--gc-tint);
	color: var(--gc-deep);
	font-size: 13.5px;
}
body[data-path="login"] #page-login .resend-link { margin: 0 0 12px; font-size: 13px; text-align: center; color: var(--gc-soft); }

@media (max-width: 480px) {
	body[data-path="login"] #page-login { background: linear-gradient(var(--gc-deep) 0, var(--gc-deep) 190px, transparent 190px); }
	body[data-path="login"] #page-login .page-card,
	body[data-path="login"] #page-login .login-content.page-card { margin: 48px 14px 24px; padding: 24px 18px 20px; }
}