/* ==========================================================================
   SCL WEB / LOGIN THEME
   Reaches the login page and public website — app_include_css never gets
   here, this is the file that does. Same token values as scl_desk.css;
   duplicated (not imported) because Desk and Website load separate
   asset bundles in Frappe.
   ========================================================================== */
:root {
	--scl-dark: #033529;
	--scl-primary: #28aa6c;
	--scl-primary-dark: #1d7d50;
	--scl-accent: #f2a20d;
	--scl-background: #f7f9f8;
	--scl-surface: #ffffff;
	--scl-text: #0a1f19;
}

/* --------------------------------------------------------------------------
   Login background — the blurred watermark layer. Matches stock Frappe's
   own login template selectors (`body.login-page`, `.for-login`), so it
   stays correct regardless of which app serves the login page.
   The watermark lives in its own ::before layer so the blur filter never
   touches the login card or the text sitting on top of it.
   -------------------------------------------------------------------------- */
body.login-page,
body[data-path="login"] {
	position: relative;
	background: var(--scl-dark);
	/* No overflow:hidden here — it clipped the Website Settings footer
	   (which sits below the 100vh login section). Flex column below pins
	   the footer to the bottom of the viewport instead. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* The watermark lives in its own ::before layer so the blur filter never
   touches the login card or the text sitting on top of it. Body-level so it
   fills the whole viewport (no white bands around the .for-login section). */
body.login-page::before,
body[data-path="login"]::before {
	content: "";
	position: fixed;
	inset: -40px; /* overscan so the blur never reveals a hard edge */
	background-image: url("/assets/scl_branding/images/scl_login_bg.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(6px);
	opacity: 0.9;
	pointer-events: none;
	z-index: 0;
}

/* Keep the login card + everything inside it above the watermark layer */
.for-login .login-content,
.for-login .card,
.for-login form,
.for-login .app-logo,
.for-login .page-card-head {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Login card — single centered panel, logo + tagline + form. Only the SCL
   logo is carried over from the previous theme; everything else on the
   screen is this branded card on the watermark background.
   -------------------------------------------------------------------------- */
.for-login {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 0;
	flex: 1 0 auto;
	background: transparent; /* body provides the dark bg + watermark */
}

/* Login shell fills the viewport minus the footer; the footer (Website
   Settings) stays visible at the bottom without scrolling. */
#page-login {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
#page-login .for-login {
	flex: 1 0 auto;
}
body[data-path="login"] .web-footer {
	flex-shrink: 0;
	border: 0; /* no border line above the footer */
}

.for-login .login-content,
.for-login .page-card {
	background-color: var(--scl-surface);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(3, 53, 41, 0.35);
	max-width: 380px;
	margin: 0 auto;
	padding: 32px 28px;
}

.for-login .page-card-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 8px;
	margin-bottom: 16px;
}

.for-login .page-card-head img.app-logo,
.login-content .app-logo,
.page-card-head .app-logo {
	max-height: 56px;
	margin: 0 auto 14px;
	display: block;
}

.for-login .page-card-head-text h4 {
	font-size: 20px;
	font-weight: 600;
	color: var(--scl-text);
	margin: 0 0 2px;
}

/* Tagline under the logo — injected via scl_web.js */
.scl-login-tagline {
	color: var(--scl-text);
	opacity: 0.68;
	font-size: 0.85rem;
	text-align: center;
	margin-bottom: 1.25rem;
}

/* Button + links derive from SCL primary */
.for-login .btn-login,
.for-login .btn-primary {
	background-color: var(--scl-primary) !important;
	border-color: var(--scl-primary) !important;
}
.for-login .btn-login:hover {
	background-color: var(--scl-primary-dark) !important;
}
.for-login a {
	color: var(--scl-primary);
}
.for-login input:focus {
	border-color: var(--scl-primary) !important;
	box-shadow: 0 0 0 2px rgba(40, 170, 108, 0.15) !important;
}

/* --------------------------------------------------------------------------
   Public website (portal pages, forms)
   -------------------------------------------------------------------------- */
.website-header,
.navbar-web {
	background-color: var(--scl-dark);
}
.website-header a,
.navbar-web a {
	color: #ffffff;
}
.web-footer {
	background: var(--scl-dark);
}
.btn-primary {
	background-color: var(--scl-primary);
	border-color: var(--scl-primary);
}