/* TDP "Soft Clay" — LOGIN (/login). Spec: design/approved/03-login.webp.
 * Re-lays out Frappe's own login page (all flows keep working: login, forgot password, email link, signup). */
@font-face { font-family: "Vazirmatn"; src: url("/assets/tdp_persian/fonts/Vazirmatn-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/tdp_persian/fonts/Vazirmatn-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/tdp_persian/fonts/Vazirmatn-Bold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }

body[data-path="login"] {
	--tdp-navy: #011875; --tdp-red: #C30101; --tdp-canvas: #F7F6F3; --tdp-border: #D9DBE0; --tdp-text: #34363B; --tdp-text-2: #858A92;
	background: var(--tdp-canvas) !important; font-family: "Vazirmatn", "Inter", sans-serif; color: var(--tdp-text); min-height: 100vh; overflow-x: hidden;
}
body[data-path="login"] * { font-family: inherit; }
body[data-path="login"] .web-footer, body[data-path="login"] .navbar, body[data-path="login"] .page-breadcrumbs, body[data-path="login"] .page-header-wrapper { display: none !important; }

/* two panes: hero on the left, card on the right (physical, as in the design) */
body[data-path="login"] #page-login { min-height: 100vh; display: flex; align-items: center; padding: 0; }
body[data-path="login"] .page-content-wrapper { width: 100%; }
body[data-path="login"] main.container { max-width: none !important; width: 100%; padding: 0 !important; margin: 0 !important; }
body[data-path="login"] .page_content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body[data-path="login"] .tdp-login-stage { display: flex; direction: ltr; align-items: center; justify-content: center; gap: 2vw; min-height: 100vh; padding: 3vh 4vw; }
body[data-path="login"] .tdp-login-hero { flex: 1 1 58%; display: flex; align-items: center; justify-content: center; min-width: 0; }
body[data-path="login"] .tdp-login-hero img { width: 100%; max-width: 860px; height: auto; max-height: 94vh; object-fit: contain; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 70%, transparent 100%); }
body[data-path="login"] .tdp-login-cards { flex: 0 0 min(40%, 560px); direction: rtl; }
body[data-path="login"] .tdp-login-cards > div { width: 100%; }

/* the card */
body[data-path="login"] .login-content.page-card, body[data-path="login"] .page-card {
	max-width: none; width: 100%; margin: 0; background: #fff; border: 0; border-radius: 28px; box-shadow: 0 6px 24px rgba(45, 40, 35, .07);
	padding: 44px 40px 36px; text-align: center;
}
body[data-path="login"] .page-card-head { text-align: center; padding: 0; margin-bottom: 8px; }
body[data-path="login"] .page-card-head .app-logo { display: none !important; }
body[data-path="login"] .tdp-brand-mark { display: inline-flex; align-items: flex-start; gap: 4px; direction: ltr; margin-bottom: 16px; text-decoration: none; }
body[data-path="login"] .tdp-brand-mark .w { font-weight: 800; font-size: 58px; line-height: 1; letter-spacing: -2px; color: var(--tdp-navy); }
body[data-path="login"] .tdp-brand-mark .d { width: 13px; height: 13px; border-radius: 50%; background: var(--tdp-red); align-self: flex-end; margin-bottom: 10px; }
body[data-path="login"] .page-card-head h4 { font-size: 26px; font-weight: 800; color: var(--tdp-text); margin: 6px 0 10px; }
body[data-path="login"] .page-card-subtitle { color: var(--tdp-text-2); font-size: 14px; margin: 0 0 6px; }
body[data-path="login"] section.for-login .page-card-subtitle { display: none; }

/* fields */
body[data-path="login"] .page-card-body { padding: 0; margin-top: 18px; }
body[data-path="login"] .form-group { margin-bottom: 16px; text-align: right; }
body[data-path="login"] .form-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap; left: auto; right: 0; }
body[data-path="login"] { overflow-x: hidden; }
body[data-path="login"] .email-field, body[data-path="login"] .password-field { position: relative; }
body[data-path="login"] .form-control {
	height: 56px !important; min-height: 56px; line-height: 56px; border: 1.5px solid #E1E2E5 !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important;
	font-size: 15px; padding: 0 52px 0 52px !important; color: var(--tdp-text); text-align: right;
}
body[data-path="login"] .form-control::placeholder { color: #B2B5BB; }
body[data-path="login"] .form-control:focus { border-color: var(--tdp-navy) !important; box-shadow: 0 0 0 3px #E6E9F5 !important; }
body[data-path="login"] .field-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--tdp-navy); stroke: var(--tdp-navy); pointer-events: none; }
body[data-path="login"] .field-icon.password-icon { display: none; }
body[data-path="login"] .toggle-password { position: absolute; left: 18px !important; right: auto !important; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; cursor: pointer; color: var(--tdp-navy); stroke: var(--tdp-navy); }
body[data-path="login"] .field-error { color: #C30101; font-size: 12.5px; margin: 6px 4px 0; text-align: right; }
body[data-path="login"] .login-error-banner, body[data-path="login"] .login-success-banner { border-radius: 12px; background: #FFE2E3; color: #8E1F26; padding: 10px 14px; margin-bottom: 14px; text-align: right; font-size: 13.5px; }
body[data-path="login"] .login-success-banner { background: #DCF7E9; color: #1F7A52; }

/* forgot password + links */
body[data-path="login"] .forgot-password-message { margin: 10px 4px 0; text-align: right; font-size: 13.5px; }
body[data-path="login"] a { color: var(--tdp-navy); font-weight: 600; text-decoration: none; }
body[data-path="login"] a:hover { text-decoration: underline; }

/* buttons */
body[data-path="login"] .page-card-actions { padding: 0; margin-top: 8px; }
body[data-path="login"] .btn-login:not(.btn-login-option), body[data-path="login"] .btn-forgot, body[data-path="login"] .btn-signup,
body[data-path="login"] .btn-primary.btn-block {
	height: 56px; border: 0 !important; border-radius: 14px !important; background: var(--tdp-navy) !important; color: #fff !important;
	font-size: 16px; font-weight: 700; box-shadow: 0 8px 18px rgba(1, 24, 117, .22); width: 100%;
}
body[data-path="login"] .btn-login:not(.btn-login-option):hover { background: #0A2290 !important; }
body[data-path="login"] .btn-login-option, body[data-path="login"] .btn-default.btn-block:not(.btn-login) {
	background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--tdp-navy) !important; font-weight: 600; height: auto; padding: 8px; margin-top: 6px; font-size: 14px;
}
body[data-path="login"] .sign-up-message { color: var(--tdp-text-2); font-size: 14px; margin-top: 14px; }
body[data-path="login"] .social-logins { margin-top: 10px; }

@media (max-width: 1000px) {
	body[data-path="login"] .tdp-login-hero { display: none; }
	body[data-path="login"] .tdp-login-stage { padding: 24px 16px; }
	body[data-path="login"] .tdp-login-cards { flex: 1 1 100%; }
}

/* proportions per design: tall card, centred wordmark, bigger title and fields */
body[data-path="login"] .login-content.page-card { min-height: 84vh; display: flex; flex-direction: column; justify-content: center; padding: 5vh 44px; }
body[data-path="login"] .page-card-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 4vh; }
body[data-path="login"] .page-card-head-text { text-align: center; }
body[data-path="login"] .tdp-brand-mark .w { font-size: 64px; font-family: "Vazirmatn", "Inter", sans-serif; font-weight: 800; }
body[data-path="login"] .page-card-head h4 { font-size: 34px; margin: 4px 0 0; }
body[data-path="login"] .form-control { font-size: 16px; }
body[data-path="login"] .form-control::placeholder { font-size: 16px; }
body[data-path="login"] .btn-login:not(.btn-login-option), body[data-path="login"] .btn-forgot, body[data-path="login"] .btn-signup { height: 60px; font-size: 18px; margin-top: 10px; }
body[data-path="login"] .page-card-actions .forgot-password-message { text-align: center; margin: 18px 0 0; }
body[data-path="login"] .page-card-actions .btn-login-option { display: block; width: 100%; text-align: center; }

/* remember me row (right aligned, box on the right of its label) */
body[data-path="login"] .tdp-remember { display: flex; align-items: center; justify-content: flex-start; gap: 10px; direction: rtl; margin: 4px 2px 0; cursor: pointer; font-size: 14px; color: var(--tdp-text-2); font-weight: 600; }
body[data-path="login"] .tdp-remember input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid #C4C6CB; background: #fff; cursor: pointer; margin: 0; }
body[data-path="login"] .tdp-remember input:checked { background: var(--tdp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--tdp-navy); }

/* recheck vs design: fields/buttons ~15% taller, larger title (measured relative to page width) */
body[data-path="login"] .form-control { height: 66px !important; min-height: 66px; line-height: 66px; }
body[data-path="login"] .btn-login:not(.btn-login-option), body[data-path="login"] .btn-forgot, body[data-path="login"] .btn-signup { height: 66px; }
body[data-path="login"] .page-card-head h4 { font-size: 38px; }
body[data-path="login"] .form-group { margin-bottom: 20px; }

/* Round 3 (11-02) — no flash of the raw Frappe card: tdp_login.js builds the two-pane layout only after Frappe's web bundle has
 * loaded (~1 s on a first visit), so until the stage exists the card is hidden and the SAZMAN mark is shown in its place.
 * Safety: if the script ever fails, the plain card still appears after 3 s. */
body[data-path="login"] #page-login .page_content:not(:has(.tdp-login-stage)) { visibility: hidden; animation: tdpLoginReveal 0s linear 3s forwards; }
body[data-path="login"] #page-login:has(.page_content:not(:has(.tdp-login-stage))) {
	background: url("/assets/tdp_theme/images/sazman/logo_fa_light.svg") center 45vh / 180px auto no-repeat;
}
body[data-path="login"] .tdp-login-stage { animation: tdpLoginIn .2s ease-out; }
@keyframes tdpLoginReveal { to { visibility: visible; } }
@keyframes tdpLoginIn { from { opacity: 0; } to { opacity: 1; } }