/* RF MIS — Custom Login Page Branding
   Side-panel layout: fixed white left panel, full background photo on the right.
   Scoped via :has(.for-login) — does not affect any other page.
   Loaded via website_include_css in hooks.py.
*/

/* ── Full-page background ── */
body:has(.for-login) {
	background: url('/assets/rf_mis/images/rf_login_bg.png') center / cover no-repeat fixed !important;
	min-height: 100vh;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Hide all Frappe page chrome ── */
body:has(.for-login) .navbar,
body:has(.for-login) .web-footer,
body:has(.for-login) .page-header-wrapper,
body:has(.for-login) .page-breadcrumbs {
	display: none !important;
}

/* ── Reset all wrapper layout so we control positioning ── */
body:has(.for-login) .page-content-wrapper,
body:has(.for-login) .page-content-wrapper > main.container,
body:has(.for-login) .page-content-wrapper > main,
body:has(.for-login) .page_content,
body:has(.for-login) .page_content > div {
	all: unset !important;
	display: block !important;
}

/* ── Fixed white left panel ── */
body:has(.for-login) .for-login {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 420px !important;
	background: #ffffff !important;
	box-shadow: 4px 0 40px rgba(0, 0, 0, 0.18) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	padding: 56px 44px !important;
	overflow-y: auto !important;
	z-index: 10 !important;
}

/* ── Remove card chrome — the panel IS the card ── */
.for-login .login-content.page-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* ── Logo ── */
.for-login .page-card-head {
	padding: 0 0 32px 0 !important;
	text-align: center !important;
	max-width: 100% !important;
}

.for-login .page-card-head img.app-logo {
	max-height: 80px !important;
	max-width: 240px !important;
	width: auto !important;
}

/* Hide "Login to RF MIS" heading */
.for-login .page-card-head h4 {
	display: none !important;
}

/* ── Form ── */
.for-login form {
	max-width: 100% !important;
}

.for-login .page-card-body .form-group {
	margin-bottom: 14px !important;
}

.for-login input[type="text"],
.for-login input[type="email"],
.for-login input[type="password"] {
	background: #F9FAFB !important;
	border: 1.5px solid #D1D5DB !important;
	border-radius: 8px !important;
	height: 44px !important;
	font-size: 14px !important;
	color: #111827 !important;
	transition: border-color 150ms, box-shadow 150ms !important;
}

.for-login input[type="text"]:focus,
.for-login input[type="email"]:focus,
.for-login input[type="password"]:focus {
	border-color: #1B4332 !important;
	box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.12) !important;
	background: #fff !important;
}

/* ── Forgot password ── */
.for-login .forgot-password-message a {
	color: #1B4332 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* ── Login button ── */
.for-login .page-card-actions {
	margin-top: 8px !important;
}

.for-login .btn-login {
	background: #1B4332 !important;
	border-color: #1B4332 !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	height: 44px !important;
	letter-spacing: 0.2px !important;
	transition: background 150ms ease !important;
	color: #fff !important;
}

.for-login .btn-login:hover,
.for-login .btn-login:focus {
	background: #0f2d1f !important;
	border-color: #0f2d1f !important;
}

/* ── Hide signup and email-link login (internal tool) ── */
.for-login .sign-up-message,
.for-login .social-logins,
.for-login .login-divider {
	display: none !important;
}

/* ── Hide other sections (forgot, signup etc.) — keep in normal flow but invisible ── */
body:has(.for-login) .for-forgot,
body:has(.for-login) .for-signup,
body:has(.for-login) .for-email-login,
body:has(.for-login) .for-login-with-email-link {
	display: none !important;
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 600px) {
	body:has(.for-login) .for-login {
		width: 100% !important;
		padding: 40px 24px !important;
	}
}