/* SQUARE: public web pages (login page included). */
.page-card-head img.app-logo,
.login-content img.app-logo {
	max-height: 48px;
	width: auto;
}

/* ============================================================================
 * Login page branding. Scoped to body[data-path="login"] so no other web page
 * is affected. Purely cosmetic: background, card polish, teal primary button.
 * ============================================================================ */
body[data-path="login"] {
	background:
		radial-gradient(900px 520px at 12% -12%, rgba(0, 128, 128, 0.18), transparent 60%),
		radial-gradient(700px 420px at 100% 115%, rgba(47, 182, 182, 0.14), transparent 60%),
		linear-gradient(135deg, #eef6f6 0%, #f7fafa 45%, #ffffff 100%);
	background-attachment: fixed;
}

body[data-path="login"] .login-content.page-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* Teal accent strip on top of the card. */
body[data-path="login"] .login-content.page-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #008080 0%, #2fb6b6 100%);
}

/* Primary "Continue" button in brand teal; alternative login options stay neutral.
 * Specificity is raised past Frappe's nested .page-card .page-card-actions .btn-login rule
 * (which paints it gray-900), without resorting to !important. */
body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option) {
	background: #008080;
	border-color: #008080;
	color: #fff;
}

body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option):hover,
body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option):focus,
body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option):active {
	background: #006666;
	border-color: #006666;
	color: #fff;
}