/* Two-column shell for Frappe's OWN core /login page (password login,
   forgot-password, email-link login, signup, 2FA/OTP). This does NOT
   restyle .page-card / .es-button / any of the functional classes login.js
   depends on (they already carry Frappe v17's real design tokens, which is
   the whole point of today's dashboard token work) - it only wraps the
   untouched form markup in a branded hero panel to match client_login and
   office_login. See my_integration_app/www/login.html for the override
   (content block only - macros/script/navbar blocks are byte-identical to
   frappe/www/login.html) and my_integration_app/www/login.py, which exists
   solely to delegate to frappe.www.login.get_context - without it Frappe's
   page renderer only looks for a .py context module inside the SAME app as
   the matched .html, so disable_signup/social_login/ldap_settings/etc would
   silently vanish. */

/* ── Theme tokens ────────────────────────────────────────────
   Light values are the defaults every component below falls back to.
   Redefined twice for dark: once behind prefers-color-scheme (the OS-level
   signal, the only one available before a visitor has made an explicit
   choice - guarded by :not([data-theme="light"]) so an explicit "light"
   pick can still override a dark OS), and again under [data-theme="dark"]
   (the explicit toggle button in login.html, wins regardless of OS
   preference). Defined on :root, not .core-login-shell, because
   #core-login-loader is a sibling of .core-login-shell in the DOM, not a
   descendant - a scoped custom property wouldn't reach it. */
:root {
	--login-loader-bg: #ffffff;
	--login-loader-text: #9a9a9a;
	--login-hero-bg-1: #fafafa;
	--login-hero-bg-2: #f2f2f2;
	--login-hero-net-circle: #b9c6d6;
	--login-hero-net-line: #c7d2df;
	--login-hero-badge: #9a9a9a;
	--login-hero-heading: #0f0f0f;
	--login-hero-copy: #666666;
	--login-form-panel-bg: #f5f5f6;
	--login-card-shadow:
		0 24px 60px -12px rgba(0, 0, 0, 0.18),
		0 8px 24px -8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	--login-toggle-bg: #ffffff;
	--login-toggle-border: #e2e2e2;
	--login-toggle-hover: #f5f5f5;
	--login-toggle-fg: #666666;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--login-loader-bg: #14161a;
		--login-loader-text: #7a7f87;
		--login-hero-bg-1: #181a1f;
		--login-hero-bg-2: #121316;
		--login-hero-net-circle: #3a4552;
		--login-hero-net-line: #2f3944;
		--login-hero-badge: #7a7f87;
		--login-hero-heading: #f5f5f5;
		--login-hero-copy: #a3a3a3;
		--login-form-panel-bg: #101114;
		--login-card-shadow:
			0 24px 60px -12px rgba(0, 0, 0, 0.5),
			0 8px 24px -8px rgba(0, 0, 0, 0.35),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);
		--login-toggle-bg: #1a1c20;
		--login-toggle-border: #34363c;
		--login-toggle-hover: #24262b;
		--login-toggle-fg: #a3a3a3;
	}
}

:root[data-theme="dark"] {
	--login-loader-bg: #14161a;
	--login-loader-text: #7a7f87;
	--login-hero-bg-1: #181a1f;
	--login-hero-bg-2: #121316;
	--login-hero-net-circle: #3a4552;
	--login-hero-net-line: #2f3944;
	--login-hero-badge: #7a7f87;
	--login-hero-heading: #f5f5f5;
	--login-hero-copy: #a3a3a3;
	--login-form-panel-bg: #101114;
	--login-card-shadow:
		0 24px 60px -12px rgba(0, 0, 0, 0.5),
		0 8px 24px -8px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	--login-toggle-bg: #1a1c20;
	--login-toggle-border: #34363c;
	--login-toggle-hover: #24262b;
	--login-toggle-fg: #a3a3a3;
}

.core-login-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--login-loader-bg);
}

.core-login-loader img {
	height: 79px;
	width: auto;
}

.core-login-loader p {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--login-loader-text);
}

.core-login-shell {
	min-height: 100vh;
	display: flex;
	text-align: justify;
}

/* Justify (above) cascades by inheritance into core's own untouched
   .page-card content too (frappe/public/scss/login.bundle.scss has no
   text-align rules of its own to conflict with - checked) - fine for its
   prose (forgot-password/2FA instructions) but forms/buttons need an
   explicit left reset, same reasoning as auth-pages.css. */
.core-login-shell :is(input, button, select, textarea) {
	text-align: left;
}

.core-login-hero {
	flex: 1 1 56%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--login-hero-bg-1) 0%, var(--login-hero-bg-2) 100%);
	padding: 40px 56px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.core-login-hero-net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.55;
}

.core-login-hero-net .net-group {
	animation: core-login-net-drift 22s ease-in-out infinite alternate;
}

@keyframes core-login-net-drift {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(-14px, 10px); }
	100% { transform: translate(10px, -8px); }
}

.core-login-hero-net circle { fill: var(--login-hero-net-circle); }
.core-login-hero-net line { stroke: var(--login-hero-net-line); stroke-width: 1; }

.core-login-hero-badge {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--login-hero-badge);
	text-transform: uppercase;
}

.core-login-hero-badge img { height: 16px; width: auto; }

.core-login-hero-copy {
	position: relative;
	z-index: 1;
	max-width: 520px;
}

.core-login-hero-copy h2 {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--login-hero-heading);
	margin: 0;
	letter-spacing: -0.01em;
}

.core-login-hero-copy p {
	font-size: 15px;
	color: var(--login-hero-copy);
	margin: 16px 0 0;
	max-width: 420px;
}

.core-login-form-panel {
	flex: 1 1 44%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 32px;
	background: var(--login-form-panel-bg);
}

/* Core's login.bundle.scss already centers .page-card with margin/max-width -
   the form panel above now does that centering too, so this just gives the
   card a raised, shadowed "cube" look floating on the panel's background.
   Every functional class underneath (page-card-body, page-card-actions,
   form-group, es-button, twofactor_div, etc.) is left completely alone -
   only padding/background/radius/shadow change; a light input field on a
   dark card is a normal, low-risk pattern here. */
.core-login-form-panel .page-card {
	padding: 48px 40px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: var(--login-card-shadow);
	max-width: 420px;
}

/* Office Key login (my_integration_app/www/login.html adds this section and
   its own inline toggle script, separate from login.js) - hidden by default
   like core's own .for-forgot/.for-signup/etc, shown via jQuery .toggle(). */
.for-office-key {
	display: none;
}

/* ── Theme toggle button (my_integration_app/www/login.html) ─────────
   Fixed-position so it stays visible regardless of which section is
   showing and even when .core-login-hero is hidden below 860px. Only sets
   the [data-theme] attribute + localStorage in JS - every actual color
   comes from the tokens above, so this button needs no separate dark-mode
   block of its own. */
.core-login-theme-toggle {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 10000;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--login-toggle-border);
	background: var(--login-toggle-bg);
	color: var(--login-toggle-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: background-color 0.15s, border-color 0.15s;
	padding: 0;
}

.core-login-theme-toggle:hover { background: var(--login-toggle-hover); }

.core-login-theme-toggle svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Icon reflects the CURRENTLY active theme (sun showing = "you're in light
   mode"), not the theme a click would switch to - matches the sun/moon
   convention used everywhere else. Default DOM state (no [data-theme] yet,
   before JS runs) is light, so .theme-icon-moon starts hidden. */
.core-login-theme-toggle .theme-icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .core-login-theme-toggle .theme-icon-sun { display: none; }
	html:not([data-theme="light"]) .core-login-theme-toggle .theme-icon-moon { display: flex; }
}

html[data-theme="dark"] .core-login-theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .core-login-theme-toggle .theme-icon-moon { display: flex; }

@media (max-width: 860px) {
	.core-login-hero { display: none; }
	.core-login-form-panel { flex: 1 1 100%; }
}