/* Salaam Cardiology Center — sign-in page, on top of xpeedium_desk's xp_login.css.
   Per-site file (/files/salaam-login.css), linked from Website Settings → Head HTML
   AFTER xp_login.css, so the shared app stays byte-identical to erp-demo.

   Left: blue brand panel — logo in a white circle, name, Somali line, tagline,
   heartbeat line under it, address at the bottom. Right: the form, light or dark following
   the device (prefers-color-scheme), correct from the first frame.

   Texts come from Head HTML variables:
     --xp-login-logo  --xp-login-name  --sl-login-line2  --sl-login-tagline
     --sl-login-footer  --sl-login-powered                                     */

:root {
	--sl-panel-top: #0b4fb8;
	--sl-panel-mid: #0a3f99;
	--sl-panel-bottom: #062a69;

	--xl-bg: #ffffff;
	--xl-text: #0f172a;
	--xl-muted: #5b6474;
	--xl-label: #1e293b;
	--xl-field: #ffffff;
	--xl-field-border: #d5dae3;
	--xl-accent: #09449e;
	--xl-accent-hover: #073a87;
	--xl-link: #0a45a8;
	--sl-placeholder: #8a93a3;
	--sl-powered: #6b7280;
	--sl-focus: rgba(9, 68, 158, 0.18);
}
@media (prefers-color-scheme: dark) {
	:root {
		--xl-bg: #0f1623;
		--xl-text: #f1f5f9;
		--xl-muted: #94a3b8;
		--xl-label: #e2e8f0;
		--xl-field: #131c2c;
		--xl-field-border: #263247;
		--xl-accent: #2f6fd8;
		--xl-accent-hover: #2560c2;
		--xl-link: #7fb0f8;
		--sl-placeholder: #64748b;
		--sl-powered: #7c8aa3;
		--sl-focus: rgba(59, 130, 246, 0.28);
	}
}

/* computers: brand panel on the left. Wrapped so the phone layout (one column,
   slim band, the centred block hidden) stays xp_login's */
@media (min-width: 960px) {
	/* brand panel ~44% like the design (xp_login uses 1.1fr / 1fr) */
	html body #page-login section.for-login:not([style*="none"]),
	html body #page-login section.for-email-login:is([style*="block"], [style*="flex"]),
	html body #page-login section.for-forgot:is([style*="block"], [style*="flex"]),
	html body #page-login section.for-signup:is([style*="block"], [style*="flex"]),
	html body #page-login section.for-login-with-email-link:is([style*="block"], [style*="flex"]) {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
	}

	/* panel: blue gradient, heartbeat line, address at the bottom ----------------- */
	html body #page-login section[class*="for-"]::before {
		content: var(--sl-login-footer);
		display: flex !important;
		align-items: flex-end;
		justify-content: center;
		box-sizing: border-box;
		min-height: 100vh;
		padding: 0 24px 40px;
		font: 400 13px/1.4 Inter, "Segoe UI", system-ui, sans-serif;
		letter-spacing: 0;
		text-align: center;
		color: rgba(226, 236, 255, 0.72);
		background:
			radial-gradient(700px 420px at 50% -10%, rgba(59, 130, 246, 0.35), transparent 65%),
			linear-gradient(180deg, var(--sl-panel-top) 0%, var(--sl-panel-mid) 52%, var(--sl-panel-bottom) 100%);
		border-right: 0;
	}

	/* logo circle + name + Somali line + tagline, centred on the panel. Solvronix
	   keeps the <h4> (only swaps its text) and inserts its own logo, which stays hidden */
	html body #page-login section[class*="for-"] > .page-card-head {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: center;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		padding-top: 110px !important;
		/* the heartbeat line hangs under the tagline (not at the panel bottom), so the
		   two never collide on short screens; 2000px wide, centred, clipped to the column */
		padding-bottom: 130px !important;
		background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='100' viewBox='0 0 2000 100'><path d='M0 50 H940 L952 28 L964 50 H990 L1000 4 L1016 96 L1030 50 H1060 L1072 40 L1084 50 H2000' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='2' stroke-linejoin='round'/></svg>") center bottom / 2000px 100px no-repeat !important;
		text-align: center !important;
	}
	html body #page-login section[class*="for-"] > .page-card-head::before {
		content: "";
		display: block;
		width: 154px;
		height: 154px;
		max-width: none;
		margin: 0 0 20px;
		border-radius: 50%;
		background: #ffffff var(--xp-login-logo) center / 128px 128px no-repeat;
		box-shadow: 0 14px 34px rgba(2, 12, 40, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.06);
	}
	html body #page-login section[class*="for-"] > .page-card-head > h4 {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		color: transparent !important;
	}
	html body #page-login section[class*="for-"] > .page-card-head > h4::before {
		content: var(--xp-login-name);
		display: block;
		padding: 0 24px;
		font: 700 30px/1.2 Inter, "Segoe UI", system-ui, sans-serif;
		letter-spacing: -0.015em;
		color: #ffffff;
	}
	html body #page-login section[class*="for-"] > .page-card-head > h4::after {
		content: var(--sl-login-line2);
		display: block;
		margin-top: 6px;
		padding: 0 24px;
		font: 500 17px/1.4 Inter, "Segoe UI", system-ui, sans-serif;
		color: rgba(226, 236, 255, 0.9);
	}
	html body #page-login section[class*="for-"] > .page-card-head::after {
		content: var(--sl-login-tagline);
		display: block;
		max-width: none;
		margin: 14px 24px 0;
		font: 400 15px/1.5 Inter, "Segoe UI", system-ui, sans-serif;
		color: rgba(226, 236, 255, 0.78);
	}
}

/* form column ------------------------------------------------------------------- */
/* Solvronix fixes the card at 420px inline; side padding gives the design's ~340px form */
html body #page-login section[class*="for-"] > .login-content.page-card,
html body #page-login section[class*="for-"] > .page-card {
	padding: 0 40px !important;
}
html body #page-login section[class*="for-"] > .page-card::before {
	font: 700 26px/1.2 Inter, "Segoe UI", system-ui, sans-serif !important;
}
html body #page-login section.for-login > .page-card::before {
	content: "Sign in";
}
html body #page-login section.for-login > .page-card > form::before {
	content: "Use your own staff login.";
	margin-bottom: 26px;
}
html body #page-login section[class*="for-"] .form-control {
	height: 42px !important;
	border-radius: 8px !important;
	font-size: 14.5px !important;
}
html body #page-login section[class*="for-"] .form-control::placeholder {
	color: var(--sl-placeholder) !important;
}
html body #page-login section[class*="for-"] .form-control:focus {
	box-shadow: 0 0 0 3px var(--sl-focus) !important;
}
html body #page-login section[class*="for-"] .toggle-password {
	color: var(--xl-link) !important;
	font-size: 12px !important;
}
html body #page-login section[class*="for-"] .field-icon,
html body #page-login section[class*="for-"] .field-icon use {
	fill: var(--xl-muted) !important;
}
html body #page-login section[class*="for-"] .btn {
	height: 44px !important;
	border-radius: 8px !important;
}
/* "or / Login with Email Link": not in the design, and needs outgoing email */
html body #page-login section[class*="for-"] .social-logins {
	display: none !important;
}
html body #page-login section.for-login::after {
	content: var(--sl-login-powered);
	font-size: 12.5px;
	color: var(--sl-powered);
}

/* phones: a slim blue band with the round logo and the name ------------------------ */
@media (max-width: 959.98px) {
	html body #page-login section[class*="for-"]::before {
		content: var(--xp-login-name);
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		height: 88px;
		min-height: 0;
		padding: 0 20px 0 78px;
		font: 700 18px/1.2 Inter, "Segoe UI", system-ui, sans-serif;
		letter-spacing: -0.01em;
		color: #ffffff;
		text-align: left;
		background:
			var(--xp-login-logo) 20px center / 44px 44px no-repeat,
			linear-gradient(135deg, var(--sl-panel-top), var(--sl-panel-bottom));
		border: 0;
	}
}