/*
 * EIEIO — login page + website/portal styling (Frappe v16).
 * Loaded through `web_include_css` AFTER eieio-theme.css (which supplies the tokens).
 *
 * Layout: split screen. A fixed brand panel on the left (navy, soft brand glow,
 * floating 3D module icons, tagline) and the sign-in card on the right.
 * Below 992px the panel is hidden and the card is centred.
 */

:root {
	--eieio-panel-w: 46vw;
	--eieio-asset: "/assets/eieio_erpnext_ui/images/eieio";
}

/* Neutralise Frappe's espresso solid button on web pages: brand red */
.es-button {
	--bt-solid-bg: var(--btn-primary);
	--bt-solid-bg-hover: var(--btn-primary-hover);
	--bt-solid-bg-active: var(--eieio-red-deep);
	--bt-solid-fg: #ffffff;
}
.es-button[data-variant="solid"] {
	border-radius: var(--eieio-radius-control);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(179, 22, 28, 0.25);
}
.es-button:focus-visible {
	box-shadow: var(--focus-default);
	outline: none;
}

/* ---------------------------------------------------------- login layout -- */
body:has(section.for-login) {
	background: var(--bg-color);
}

body:has(section.for-login) .page-content-wrapper {
	min-height: 100vh;
}
body:has(section.for-login) main.container {
	flex: 0 1 440px;
	max-width: 440px;
	padding: 0;
	margin: 0;
}
body:has(section.for-login) .page-breadcrumbs,
body:has(section.for-login) .page-header-wrapper {
	display: none;
}

/* Brand panel */
body:has(section.for-login)::before {
	content: "";
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--eieio-panel-w);
	z-index: 0;
	background:
		/* floating 3D module icons */
		url("/assets/eieio_erpnext_ui/images/eieio/01_dashboard.svg") 9% 38% / 190px no-repeat,
		url("/assets/eieio_erpnext_ui/images/eieio/03_sales_orders.svg") 66% 30% / 150px no-repeat,
		url("/assets/eieio_erpnext_ui/images/eieio/05_inventory_warehouse.svg") 34% 56% / 140px no-repeat,
		url("/assets/eieio_erpnext_ui/images/eieio/07_accounting_finance.svg") 90% 58% / 120px no-repeat,
		/* brand glows */
		radial-gradient(60% 50% at 85% 8%, rgba(255, 49, 49, 0.35), transparent 70%),
		radial-gradient(55% 45% at 5% 100%, rgba(0, 191, 99, 0.26), transparent 70%),
		radial-gradient(45% 35% at 50% 40%, rgba(255, 189, 89, 0.16), transparent 70%),
		linear-gradient(160deg, #1a2538 0%, #101827 100%);
}

/* Brand content injected by eieio-web.js (.eieio-login-brand) */
.eieio-login-brand {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--eieio-panel-w);
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(32px, 5vw, 64px);
	color: #ffffff;
	pointer-events: none;
}
.eieio-login-brand .eieio-brand-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.eieio-login-brand .eieio-brand-row img {
	height: 44px;
	width: auto;
}
.eieio-login-brand .eieio-brand-name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.14em;
}
.eieio-login-brand .eieio-brand-sub {
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.62);
	margin-top: 2px;
}
.eieio-login-brand h2 {
	margin: 0 0 14px;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #ffffff;
}
.eieio-login-brand h2 span {
	color: var(--eieio-peach); /* 10.8:1 on navy */
}
.eieio-login-brand p {
	margin: 0;
	max-width: 34ch;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

body:has(section.for-login) .page-content-wrapper {
	position: relative;
	z-index: 2;
	margin-left: var(--eieio-panel-w);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

body:has(section.for-login) .page-card,
body:has(section.for-login) .login-content {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	box-shadow: var(--eieio-shadow-pop);
	padding: 36px 36px 28px;
	width: 100%;
	max-width: 420px;
}

body:has(section.for-login) .app-logo {
	height: 56px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

body:has(section.for-login) .page-card-head h4 {
	letter-spacing: -0.02em;
}

body:has(section.for-login) .form-control {
	height: 42px;
	border-radius: var(--eieio-radius-control);
	background: var(--gray-50);
	border: 1px solid var(--gray-300);
}
body:has(section.for-login) .form-control:focus {
	background: var(--card-bg);
	border-color: var(--eieio-peach);
	box-shadow: var(--focus-default);
}
body:has(section.for-login) .es-button[data-variant="solid"] {
	height: 42px;
	font-size: 15px;
}
body:has(section.for-login) a:not(.es-button) {
	color: var(--ink-blue-link); /* brand red; lighter red in dark mode for contrast */
}
body:has(section.for-login) .sign-up-message a {
	font-weight: 600;
}
body:has(section.for-login) .es-button:not([data-variant="solid"]) {
	color: var(--ink-blue-link);
}
body:has(section.for-login) .login-content {
	min-height: 0;
	height: auto;
}

/* Tablet / phone: drop the panel, keep a brand strip on top of the card */
@media (max-width: 991.98px) {
	body:has(section.for-login)::before {
		inset: 0 0 auto 0;
		width: 100%;
		height: 6px;
		background: linear-gradient(90deg, var(--eieio-red) 0 33.3%, var(--eieio-peach) 33.3% 66.6%, var(--eieio-green) 66.6% 100%);
	}
	.eieio-login-brand {
		display: none;
	}
	body:has(section.for-login) .page-content-wrapper {
		margin-left: 0;
		padding: 24px 16px;
		align-items: flex-start;
	}
	body:has(section.for-login) .page-card,
	body:has(section.for-login) .login-content {
		padding: 28px 20px 22px;
		border-radius: 16px;
		box-shadow: var(--eieio-shadow-card);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body:has(section.for-login) .login-content {
		animation: eieio-rise 0.35s ease-out both;
	}
	@keyframes eieio-rise {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: none; }
	}
}

/* Website / portal pages ------------------------------------------------------ */
.web-footer,
.page-header {
	border-color: var(--border-color);
}
.navbar.navbar-light {
	background: var(--navbar-bg);
}

/* ---- Login contrast ------------------------------------------------------------------------------
   Measured on the real page: field labels 4.17:1 (#7c7c7c), "Forgot password?" 3.36:1 and
   "Login with Email Link" 3.03:1 (Frappe link blue #0d8ef8), and the sign-up-disabled message 4.17:1. Darker grey and a deep blue
   for links. (The "Send Link" button measured 2.57:1 only while disabled, which WCAG exempts.) */
body:has(section.for-login) label.text-ink-gray-5 {
	color: #5f6b7d;
}
/* Frappe sets .text-muted with !important, so this needs it too. */
body:has(section.for-login) .text-muted,
.sign-up-message {
	color: #5f6b7d !important;
}
body:has(section.for-login) .page-card a:not(.es-button),
body:has(section.for-login) .page-card .btn-login-option {
	color: #0a5bb5;
}