/*
 * rv_app — branded split-screen login (staff portal).
 * Re-skins Frappe's real /login page (the form logic is untouched); we only
 * add a left-hand brand splash and restyle the right-hand form panel.
 * Everything here is scoped to [data-path="login"] so no other web page is
 * affected. Loaded via web_include_css in hooks.py.
 */

[data-path="login"] {
	--rv-ink:       #141414; /* near-black brand ink */
	--rv-ink-2:     #000000;
	--rv-line:      #e6e6e6;
	--rv-field-bg:  #fafafa;
}

/* --- strip the default website chrome on the login page --- */
[data-path="login"] .navbar,
[data-path="login"] .page-breadcrumbs,
[data-path="login"] .page-header-wrapper,
[data-path="login"] .web-footer,
[data-path="login"] footer.web-footer,
[data-path="login"] .footer { display: none !important; }

[data-path="login"] html,
[data-path="login"] body { height: 100%; }

/* --- two-panel shell --- */
[data-path="login"] #page-login {
	display: flex;
	min-height: 100vh;
	background: #fff;
}

/* ---------- LEFT: brand splash ---------- */
[data-path="login"] .rv-splash {
	position: relative;
	flex: 1 1 54%;
	min-height: 100vh;
	/* splash image is set from App Settings by rv_login.js (background-image);
	   keep the colour + sizing here so the panel is sane before/without it. */
	background-color: #0d0d0d;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4rem 4.25rem;
	overflow: hidden;
}
[data-path="login"] .rv-splash::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(8,8,8,.58) 0%, rgba(8,8,8,.80) 55%, rgba(8,8,8,.95) 100%);
}
[data-path="login"] .rv-splash > * { position: relative; z-index: 1; }

[data-path="login"] .rv-splash__logo {
	width: 230px;
	max-width: 60%;
	filter: brightness(0) invert(1); /* recolour a flat-black wordmark -> white */
}
/* a wordmark that already carries its final colour opts out of the invert
   (App Settings.wordmark_is_precoloured -> .is-precoloured added by rv_login.js) */
[data-path="login"] .rv-splash__logo.is-precoloured {
	filter: none;
}
[data-path="login"] .rv-splash__mid { margin: auto 0; }
[data-path="login"] .rv-splash__tag {
	color: #fff;
	font-size: clamp(1.6rem, 2.5vw, 2.3rem);
	font-weight: 300;
	line-height: 1.28;
	letter-spacing: -0.01em;
	max-width: 16ch;
	margin: 0;
}
[data-path="login"] .rv-splash__tag b { font-weight: 600; }
[data-path="login"] .rv-splash__sub {
	color: rgba(255,255,255,.62);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 1.15rem 0 0;
	max-width: 34ch;
}
[data-path="login"] .rv-splash__foot {
	color: rgba(255,255,255,.42);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .22em;
}

/* ---------- RIGHT: the real Frappe login form ---------- */
[data-path="login"] .page-content-wrapper {
	flex: 1 1 46%;
	display: flex;
	align-items: center;
	justify-content: center;
}
[data-path="login"] main.container {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
}
/* noscript filler block */
[data-path="login"] .page_content > div > .text-center.my-5 { display: none; }

/* flatten the card — it sits on a plain white panel now */
[data-path="login"] .page-card {
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
}
[data-path="login"] .for-login,
[data-path="login"] .for-forgot,
[data-path="login"] .for-signup,
[data-path="login"] .for-email-login { width: 100%; }

[data-path="login"] .page-card-head {
	text-align: left;
	margin-bottom: 1.75rem;
}
[data-path="login"] .page-card-head .app-logo { display: none; } /* wordmark lives on the splash */
[data-path="login"] .page-card-head h4 {
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--rv-ink);
	margin: 0;
}
[data-path="login"] .rv-form-sub {
	color: #8a8a8a;
	font-size: .92rem;
	margin: .4rem 0 0;
}

/* inputs */
[data-path="login"] .form-control {
	height: 44px;
	border-radius: 8px;
	border-color: var(--rv-line);
	background: var(--rv-field-bg);
}
[data-path="login"] .form-control:focus {
	background: #fff;
	border-color: var(--rv-ink);
	box-shadow: 0 0 0 3px rgba(20,20,20,.08);
}
/* Frappe pins the field icon + "Show" toggle at top:5px (for the default ~34px
   input). Our inputs are 44px tall, so re-center them vertically. */
[data-path="login"] .email-field .field-icon,
[data-path="login"] .password-field .field-icon,
[data-path="login"] .password-field .toggle-password {
	top: 50% !important;
	transform: translateY(-50%);
}

/* primary button -> premium near-black */
[data-path="login"] .btn-login.btn-primary,
[data-path="login"] .btn-primary.btn-block,
[data-path="login"] .btn-forgot.btn-primary {
	height: 44px;
	border-radius: 8px;
	background: var(--rv-ink);
	border-color: var(--rv-ink);
	font-weight: 500;
	letter-spacing: .01em;
}
[data-path="login"] .btn-login.btn-primary:hover,
[data-path="login"] .btn-primary.btn-block:hover,
[data-path="login"] .btn-forgot.btn-primary:hover {
	background: var(--rv-ink-2);
	border-color: var(--rv-ink-2);
}

[data-path="login"] .forgot-password-message a,
[data-path="login"] .sign-up-message a { color: var(--rv-ink); font-weight: 500; }

/* ---------- responsive: stack on small screens (drop the splash) ---------- */
@media (max-width: 860px) {
	[data-path="login"] #page-login { display: block; }
	[data-path="login"] .rv-splash { display: none; }
	[data-path="login"] .page-content-wrapper { min-height: 100vh; }
}