/* The shared Manara sign-in page (manara_one/www/login.html): brand panel left, Frappe's form right.
   Colours come from Manara One Settings through --ml-navy / --ml-blue / --ml-paper on .mlogin. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

body:has(.mlogin) { background: var(--ml-paper, #FBFCFE); }
body:has(.mlogin) .navbar, body:has(.mlogin) .web-footer, body:has(.mlogin) footer.web-footer { display: none !important; }
body:has(.mlogin) .page-content-wrapper, body:has(.mlogin) .page_content, body:has(.mlogin) main.container,
body:has(.mlogin) .container.my-4, body:has(.mlogin) .page-container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

.mlogin {
	--ml-ink: #13253F; --ml-muted: #536277; --ml-border: #E2E7EE; --ml-light: #78A0E0;
	position: fixed; inset: 0; z-index: 20; overflow-y: auto; display: grid; grid-template-columns: minmax(400px, 46%) 1fr;
	font-family: "IBM Plex Sans", Inter, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--ml-ink);
}

/* ------------------------------------------------------------------ left: the brand */
.mlogin-brand {
	position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
	padding: 48px 56px; color: #fff;
	background:
		radial-gradient(1100px 600px at 110% -10%, rgba(120, 160, 224, .28), transparent 60%),
		radial-gradient(800px 500px at -20% 120%, rgba(30, 86, 160, .55), transparent 60%),
		linear-gradient(160deg, var(--ml-navy, #0B1F3A) 0%, color-mix(in srgb, var(--ml-navy, #0B1F3A) 82%, #1E56A0) 100%);
}
.mlogin-art {
	position: absolute; inset: 0; pointer-events: none; opacity: .14;
	background-image:
		linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 65%);
	-webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 65%);
}
.mlogin-brand > div { position: relative; z-index: 1; }
.mlogin-logo { height: 40px; width: auto; display: block; }
.mlogin-wordmark { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; letter-spacing: .22em; font-weight: 500; }
.mlogin-wordmark img { width: 34px; height: 34px; }
.mlogin-wordmark b { font-weight: 700; color: var(--ml-light); }
.mlogin-logo.custom { background: #fff; padding: 6px 10px; border-radius: 8px; height: 46px; }
.mlogin-brand-mid { max-width: 460px; }
.mlogin-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; font-weight: 600; color: var(--ml-light); margin: 0 0 14px; }
.mlogin-product { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; color: #fff; }
.mlogin-tagline { font-size: 17px; line-height: 1.5; color: #C7D2E3; margin: 0 0 30px; }
.mlogin-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.mlogin-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #E6ECF5; line-height: 1.45; }
.mlogin-tick { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 160, 224, .2); border: 1px solid rgba(120, 160, 224, .45); }
.mlogin-tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mlogin-brand-foot { font-size: 12px; color: #8EA0BC; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ right: the form */
.mlogin-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: var(--ml-paper, #FBFCFE); }
.mlogin-card { width: 100%; max-width: 420px; }
.mlogin-card-product { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ml-blue, #1E56A0); margin: 0 0 6px; }
.mlogin .login-content.page-card, .mlogin .page-card {
	max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; box-shadow: none !important; background: transparent !important;
}
.mlogin .page-card-head { padding: 0 !important; margin: 0 0 26px !important; text-align: left !important; }
.mlogin .page-card-head .app-logo { display: none !important; }
.mlogin .page-card-head h4 { font-size: 28px !important; font-weight: 700 !important; color: var(--ml-ink) !important; margin: 0 0 6px !important; letter-spacing: -.01em; }
.mlogin .page-card-subtitle { color: var(--ml-muted) !important; font-size: 14px !important; margin: 0 !important; }
.mlogin .page-card-body, .mlogin .page-card-actions { padding: 0 !important; }
.mlogin .form-group { margin-bottom: 18px !important; }
.mlogin .form-label { font-size: 13px !important; font-weight: 600 !important; color: var(--ml-ink) !important; margin-bottom: 6px !important; }
.mlogin .form-control {
	height: 46px !important; border-radius: 10px !important; border: 1px solid var(--ml-border) !important; background: #fff !important;
	font-size: 14.5px !important; padding-left: 40px !important; color: var(--ml-ink) !important; box-shadow: none !important;
	transition: border-color .15s, box-shadow .15s;
}
.mlogin .form-control:focus { border-color: var(--ml-light) !important; box-shadow: 0 0 0 4px rgba(120, 160, 224, .22) !important; }
.mlogin .field-icon { left: 14px !important; top: 15px !important; }
.mlogin .forgot-password-message a, .mlogin .sign-up-message a { color: var(--ml-blue, #1E56A0) !important; font-weight: 600; }
.mlogin .btn-login:not(.btn-login-option), .mlogin .btn-forgot, .mlogin .btn-signup, .mlogin .btn-primary {
	height: 46px !important; border-radius: 10px !important; border: 0 !important; font-size: 15px !important; font-weight: 600 !important;
	color: #fff !important; background: linear-gradient(135deg, var(--ml-blue, #1E56A0), color-mix(in srgb, var(--ml-blue, #1E56A0) 70%, #3B82F6)) !important;
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ml-blue, #1E56A0) 70%, transparent) !important; transition: filter .15s, transform .05s;
}
.mlogin .btn-login:not(.btn-login-option):hover, .mlogin .btn-primary:hover { filter: brightness(1.07); }
.mlogin .btn-login:not(.btn-login-option):active { transform: translateY(1px); }
.mlogin .btn-login-option { height: 44px !important; border-radius: 10px !important; border: 1px solid var(--ml-border) !important; background: #fff !important; color: var(--ml-ink) !important; font-weight: 500 !important; }
.mlogin .login-divider, .mlogin .social-logins { margin-top: 18px; }
.mlogin .sign-up-message { margin-top: 22px !important; color: var(--ml-muted) !important; font-size: 13.5px; }
.mlogin .login-error-banner, .mlogin .alert { border-radius: 10px !important; }
.mlogin-help { margin: 28px 0 0; font-size: 12.5px; color: var(--ml-muted); }

/* ------------------------------------------------------------------ small screens: the brand becomes a header */
@media (max-width: 900px) {
	.mlogin { grid-template-columns: 1fr; grid-template-rows: max-content 1fr; }
	.mlogin-brand { padding: 28px 24px 30px; }
	.mlogin-brand-mid { margin-top: 26px; }
	.mlogin-product { font-size: 28px; }
	.mlogin-tagline { font-size: 15px; margin-bottom: 0; }
	.mlogin-points, .mlogin-brand-foot { display: none; }
	.mlogin-panel { justify-content: flex-start; padding: 32px 20px 40px; }
}
[dir="rtl"] .mlogin .form-control { padding-left: 12px !important; padding-right: 40px !important; }
[dir="rtl"] .mlogin .field-icon { left: auto !important; right: 14px !important; }
[dir="rtl"] .mlogin .page-card-head { text-align: right !important; }