/* ============================================================
   maktab_login.css — Phase 2B login port
   ----------------------------------------------------------
   Port of /stage2-handoff/phase2b-handoff/mockups/login.html
   into Frappe's /login + /update-password chrome. All rules
   scoped to body[data-path="login"] so we don't leak onto
   /tenant or other web pages.

   Layout strategy:
     * Hide Frappe's default chrome (logo, h4, divider, etc.)
       and inject our own card via maktab_login.js.
     * Medium theme only — picker removed.
     * RTL handled via logical properties; the existing
       FontAwesome / Frappe field icons are kept hidden
       since the mockup uses plain label-above inputs.
   ============================================================ */

/* tokens.css (CSS vars: --cream / --brown-deep / --font-ar …) is now loaded
   FIRST and versioned via web_include_css in hooks.py. It used to be pulled
   in here with `@import url('…/tokens.css')`, but a CSS @import can't carry
   the dynamic ?v= buster, so the bare URL got pinned stale for up to a year
   behind nginx max-age + Cloudflare (the "stale tokens on .sa" bug).
   Do NOT re-add an @import here — keep token loading in web_include_css. */

/* ── Page-wide frame ──────────────────────────────────────── */
html[data-path="login"],
html:has(body[data-path="login"]) {
	background: var(--lg-page-bg) !important;
}

body[data-path="login"] {
	/* Default = medium theme. JS overrides data-theme on init. */
	--lg-page-bg: #4A3D32;
	--lg-page-gradient:
		radial-gradient(circle at 20% 15%, rgba(212,165,90,.07) 0%, transparent 50%),
		radial-gradient(circle at 80% 85%, rgba(122,158,122,.05) 0%, transparent 50%);
	--lg-card-bg: var(--cream);
	--lg-card-border: var(--border);
	/* Canonical overlay shadow (was a hardcoded 2-layer stack). */
	--lg-card-shadow: var(--shadow-overlay-strong);
	--lg-text-strong: var(--brown-deep);
	--lg-text-muted: var(--ink-muted);
	/* Inputs use the canonical .mkt-input atom for radius/border/focus; the
	   #login_* rule below overrides the background to WHITE (design call).
	   The non-atom Frappe inputs (forgot/token/email-link) reuse
	   --lg-card-bg + --lg-input-border. */
	--lg-input-border: var(--border);
	--lg-input-text: var(--ink);
	--lg-input-focus: var(--brown-deep);
	--lg-input-focus-ring: rgba(94,77,49,.15);
	--lg-btn-bg: var(--brown-deep);
	--lg-btn-text: var(--cream);
	--lg-btn-hover: #3a2f23;
	--lg-link: var(--brown);
	--lg-divider: var(--border-soft);
	--lg-toggle-border: rgba(242,229,204,.22);
	--lg-toggle-text: rgba(242,229,204,.8);
	--lg-toggle-active-bg: #F2E5CC;
	--lg-toggle-active-text: #2E251C;

	background: var(--lg-page-bg) !important;
	background-image: var(--lg-page-gradient) !important;
	font-family: var(--font-ar);
	color: var(--lg-text-strong);
	overflow-x: hidden !important;
	min-height: 100vh;
	min-height: 100dvh;
	transition: background var(--dur-base), color var(--dur-base);
}

/* Medium theme is the only theme — set as body default above.
   Light + dark blocks removed with the picker. */

/* ── Hide Frappe chrome we don't want ─────────────────────── */
body[data-path="login"] .navbar,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .for-signup,
body[data-path="login"] .for-forgot,
body[data-path="login"] footer,
body[data-path="login"] .for-login > .page-card-head h4,
body[data-path="login"] .login-divider,
body[data-path="login"] .login-with-email-link,
body[data-path="login"] .page-card .login-footer,
body[data-path="login"] .page-card-body .or-section,
body[data-path="login"] footer .pull-right,
body[data-path="login"] .login-content .sign-up-message,
body[data-path="login"] .sign-up-message,
body[data-path="login"] .form-group .form-label.sr-only,
body[data-path="login"] .email-field .field-icon,
body[data-path="login"] .password-field .field-icon,
body[data-path="login"] .toggle-password,
body[data-path="login"] .forgot-password-message {
	display: none !important;
}

/* The hand-rolled brand text injected by the old maktab_login.js
   (next to/below the Frappe-provided h4). We now own a different
   brand element (.lg-brand) inside the card, so suppress the legacy. */
body[data-path="login"] .maktab-login-brand {
	display: none !important;
}

/* ── Reset Frappe layout so our card is the only visible chrome ── */
body[data-path="login"] #page-login {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px !important;
	margin: 0 !important;
	background: transparent !important;
}

body[data-path="login"] #page-login .page-content-wrapper,
body[data-path="login"] #page-login .container,
body[data-path="login"] #page-login .page_content {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

body[data-path="login"] #page-login .container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body[data-path="login"] .for-login {
	width: 100%;
	max-width: 440px;
	display: block;
	margin: 0 auto;
}

/* Each nested wrapper centers the card horizontally. Frappe wraps the
   login section inside `.page-content-wrapper > .container > .page_content > div`,
   none of which apply auto-margin to their children by default. */
body[data-path="login"] #page-login > .page-content-wrapper,
body[data-path="login"] .page_content,
body[data-path="login"] .page_content > div {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column;
}
body[data-path="login"] .page_content > div {
	width: 100%;
}

/* Frappe's outer .page-card-head holds the logo + h4 by default.
   Our JS clones the logo into the card and hides the head — we keep the
   hide rule here so we don't depend on the inline style winning. */
body[data-path="login"] .for-login > .page-card-head {
	display: none !important;
}

body[data-path="login"] .login-content.page-card,
body[data-path="login"] .for-login .login-content {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box !important;
	background: var(--lg-card-bg) !important;
	border: 1px solid var(--lg-card-border) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--lg-card-shadow) !important;
	padding: 56px 44px 36px !important;
	transition: background var(--dur-base), border-color var(--dur-base);
}

/* Brand block we inject INSIDE the card (palm + wordmark + subtitle). */
body[data-path="login"] .maktab-lg-logo-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 16px palm → wordmark */
	gap: var(--s-4);
	/* 24px wordmark → subtitle (mockup uses the nonexistent --s-7; --s-6 = 24px) */
	margin-bottom: var(--s-6);
}
body[data-path="login"] .maktab-lg-logo {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}
body[data-path="login"] .maktab-lg-logo img,
body[data-path="login"] .maktab-lg-logo svg {
	width: 100%;
	height: auto;
}
body[data-path="login"] .maktab-lg-brand {
	font-size: 28px;
	font-weight: 700;
	color: var(--lg-text-strong);
	letter-spacing: .01em;
	line-height: 1;
	transition: color var(--dur-base);
	text-align: center;
}
body[data-path="login"] .maktab-lg-title {
	font-size: 13px;
	color: var(--lg-text-muted);
	font-weight: 500;
	letter-spacing: .01em;
	text-align: center;
	/* 24px subtitle → form (mockup --s-7 doesn't exist; --s-6 = 24px) */
	margin-bottom: var(--s-6);
}

/* ── Form atoms ──────────────────────────────────────────── */
body[data-path="login"] .form-signin {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body[data-path="login"] .form-signin .page-card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}
body[data-path="login"] .form-signin .form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 !important;
}
/* Our injected labels (built by JS, since Frappe's are sr-only). */
body[data-path="login"] .maktab-lg-label {
	font-size: var(--text-sm);
	color: var(--lg-text-muted);
	font-weight: 600;
	display: block;
}

body[data-path="login"] .email-field,
body[data-path="login"] .password-field {
	position: static !important;
}

/* The email + password inputs carry the canonical .mkt-input atom (added in
   maktab_login.js): cream bg + 3px radius + 1px var(--border). We deliberately
   override ONLY the background (to white) here; the atom still supplies the
   3px radius, border and focus ring. This rule also keeps the login overrides: the taller
   11px/14px padding, --text-md font, full width, and the cleared shadow.
   The other Frappe inputs (#forgot_email, token, email-link) don't get the
   atom class, so they keep an explicit border + radius below. */
body[data-path="login"] #login_email,
body[data-path="login"] #login_password {
	width: 100% !important;
	background: #fff !important;
	padding: 11px 14px !important;
	font-family: var(--font-ar) !important;
	font-size: var(--text-md) !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

body[data-path="login"] #forgot_email,
body[data-path="login"] #login_with_email_link_email,
body[data-path="login"] #login_token,
body[data-path="login"] .for-login .form-control {
	width: 100% !important;
	padding: 11px 14px !important;
	background: var(--lg-card-bg) !important;
	border: 1px solid var(--lg-input-border) !important;
	border-radius: var(--r-sm) !important;
	font-family: var(--font-ar) !important;
	font-size: var(--text-md) !important;
	color: var(--lg-input-text) !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

body[data-path="login"] .for-login .form-control::placeholder {
	color: var(--lg-text-muted);
	opacity: .55;
}

body[data-path="login"] .for-login .form-control:focus {
	outline: none !important;
	border-color: var(--lg-input-focus) !important;
	box-shadow: 0 0 0 3px var(--lg-input-focus-ring) !important;
}

/* ── Remember-me + forgot-password row (injected by JS) ───
   Layout comes from canonical .mkt-row .mkt-row--between; the
   login-only .lg-row just pulls the row up under the inputs. */
body[data-path="login"] .lg-row {
	margin-top: calc(var(--s-2) * -1);
}
body[data-path="login"] .maktab-lg-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--text-sm);
	color: var(--lg-text-muted);
	cursor: pointer;
	user-select: none;
	margin: 0;
	font-weight: 500;
}
body[data-path="login"] .maktab-lg-check input {
	accent-color: var(--lg-input-focus);
	margin: 0;
}
body[data-path="login"] .maktab-lg-forgot {
	color: var(--lg-link);
	font-size: var(--text-sm);
}
/* tokens.css already underlines a:hover — do NOT add a second border-bottom
   rule here (it double-underlines). */
body[data-path="login"] .maktab-lg-forgot:hover {
	color: var(--lg-text-strong);
}

/* ── Primary button ──────────────────────────────────────── */
body[data-path="login"] .page-card-actions {
	padding: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-forgot,
body[data-path="login"] .btn-login-with-email-link,
body[data-path="login"] #verify_token,
body[data-path="login"] .form-verify button[type="submit"],
body[data-path="login"] .for-login .btn-primary {
	appearance: none !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 13px 20px !important;
	background: var(--lg-btn-bg) !important;
	color: var(--lg-btn-text) !important;
	border: none !important;
	border-radius: var(--r-md) !important;
	font-family: var(--font-ar) !important;
	font-size: var(--text-md) !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background var(--dur-fast), transform var(--dur-fast);
	letter-spacing: .02em;
	margin-top: 4px !important;
	box-shadow: none !important;
	height: auto !important;
	line-height: 1.4 !important;
}
body[data-path="login"] .for-login .btn-primary:hover,
body[data-path="login"] .btn-login:hover,
body[data-path="login"] #verify_token:hover {
	background: var(--lg-btn-hover) !important;
}
body[data-path="login"] .for-login .btn-primary:active {
	transform: translateY(1px);
}

/* ── Foot block (Staff/family only + tenant portal) ─────── */
body[data-path="login"] .maktab-lg-foot {
	/* mockup uses --s-7 (doesn't exist) → --s-6 = 24px */
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--lg-divider);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--lg-text-muted);
	line-height: 1.55;
}
body[data-path="login"] .maktab-lg-foot__tenant {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--s-1);
}

/* ── Hijri / Gregorian date below the foot block ─────────
   Canonical .mkt-date-pair, dimmed to 55% so it reads as a
   quiet timestamp under the "tenant portal" line. */
body[data-path="login"] .maktab-lg-date {
	margin-top: var(--s-4);
	display: flex;
	justify-content: center;
	opacity: .55;
}
body[data-path="login"] .maktab-lg-date .mkt-date-pair__hijri {
	font-size: var(--text-xs);
	font-weight: 500;
}
body[data-path="login"] .maktab-lg-foot a {
	color: var(--lg-link);
	font-size: var(--text-sm);
	font-weight: 600;
}
/* tokens.css already underlines a:hover — no second border-bottom rule. */
body[data-path="login"] .maktab-lg-foot a:hover {
	color: var(--lg-text-strong);
}

/* ── Top-corner controls — language only (theme picker removed) ─── */
body[data-path="login"] .maktab-lg-controls {
	position: fixed;
	top: 24px;
	inset-inline-end: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	z-index: 10;
}
body[data-path="login"] .maktab-lg-lang {
	display: inline-flex;
	background: transparent;
	border: 1px solid var(--lg-toggle-border);
	border-radius: var(--r-pill);
	padding: 3px;
	gap: 2px;
}
body[data-path="login"] .maktab-lg-lang button {
	appearance: none;
	background: transparent;
	border: none;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	cursor: pointer;
	font-family: var(--font-ar);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--lg-toggle-text);
	letter-spacing: .02em;
	transition: background var(--dur-fast), color var(--dur-fast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
body[data-path="login"] .maktab-lg-lang button:hover {
	color: rgba(242,229,204,.95);
}
body[data-path="login"] .maktab-lg-lang button.is-active {
	background: var(--lg-toggle-active-bg);
	color: var(--lg-toggle-active-text);
}

/* ── 2FA verification surface (.form-verify) ─────────────
   Frappe re-uses .login-content when 2FA fires; our card
   styles already cover it. Add a small heading style for
   the .indicator pill it injects, and a vertical-rhythm
   tweak so the OTP input doesn't crash into the buttons. */
body[data-path="login"] .form-verify {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body[data-path="login"] .form-verify .page-card-head {
	border: none !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
	background: transparent !important;
}
body[data-path="login"] .form-verify .indicator {
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--lg-text-strong);
}
body[data-path="login"] #twofactor_div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body[data-path="login"] #qr_info {
	font-size: var(--text-sm);
	color: var(--lg-text-muted);
	text-align: center;
}
body[data-path="login"] #otp_div img {
	max-width: 200px;
	margin: 0 auto;
	display: block;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 560px) {
	body[data-path="login"] #page-login {
		padding: var(--s-3) !important;
	}
	body[data-path="login"] .login-content.page-card,
	body[data-path="login"] .for-login .login-content {
		padding: 40px 28px 28px !important;
	}
	body[data-path="login"] .maktab-lg-brand {
		font-size: 24px;
	}
	body[data-path="login"] .maktab-lg-logo {
		width: 64px;
		height: 64px;
	}
	body[data-path="login"] .maktab-lg-controls {
		top: var(--s-3);
		inset-inline-end: var(--s-3);
	}
}