/* MDS ERP sign-in page v2: brand panel beside the form, Arabic (RTL) first, English, light and dark (follows the device). */
@font-face { font-family: "MDS Plex Arabic"; src: url("/assets/mds_erp/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MDS Plex Arabic"; src: url("/assets/mds_erp/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "MDS Plex Arabic"; src: url("/assets/mds_erp/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

body[data-path="login"], body[data-path="update-password"] {
	--mds-navy: #141d36; --mds-navy-2: #1f2c52; --mds-teal: #17a398; --mds-teal-2: #5fcfc4;
	--mds-page: #f5f7fb; --mds-card: #ffffff; --mds-text: #141d36; --mds-muted: #667089; --mds-line: #e3e7ef; --mds-input: #f8fafc;
	background: var(--mds-page) !important; min-height: 100vh; overflow-x: hidden;
	font-family: "MDS Plex Arabic", "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif !important;
}
body[data-path="login"] * { font-family: inherit; }
@media (prefers-color-scheme: dark) {
	body[data-path="login"], body[data-path="update-password"] {
		--mds-page: #0b101c; --mds-card: #121a2b; --mds-text: #e9edf6; --mds-muted: #9aa5bd; --mds-line: #222c43; --mds-input: #0e1524;
		color-scheme: dark;
	}
	body[data-path="login"] .page-card-head .app-logo { content: url("/assets/mds_erp/images/mds-logo-dark.svg"); }
}
body[data-path="login"] .web-footer, body[data-path="login"] footer, body[data-path="login"] .navbar { display: none !important; }

/* ---------- Brand panel ---------- */
.mds-login-brand {
	position: fixed; inset-block: 0; inset-inline-start: 0; width: 46vw; z-index: 1;
	display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 52px 64px;
	color: #fff; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(900px 520px at 85% -10%, rgba(95,207,196,.22), transparent 60%),
		radial-gradient(700px 480px at -10% 110%, rgba(23,163,152,.18), transparent 60%),
		linear-gradient(160deg, #18234a 0%, #121a35 55%, #0d1328 100%);
}
.mds-login-brand::before { /* fine grid */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
	background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
}
.mds-login-brand::after { /* soft ring */
	content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
	inset-inline-end: -180px; bottom: -200px; border: 1px solid rgba(95,207,196,.18); box-shadow: 0 0 0 70px rgba(95,207,196,.03), 0 0 0 140px rgba(95,207,196,.02);
}
.mds-brand-top { display: flex; align-items: center; gap: 12px; }
.mds-login-brand .mds-mark { width: 46px; height: 46px; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.mds-brand-name { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.mds-brand-name span { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.6); }
.mds-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
	color: var(--mds-teal-2); background: rgba(95,207,196,.1); border: 1px solid rgba(95,207,196,.25); margin-bottom: 20px; }
.mds-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mds-teal-2); box-shadow: 0 0 0 4px rgba(95,207,196,.18); }
.mds-login-brand h1 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.35; font-weight: 700; margin: 0 0 16px; color: #fff; max-width: 540px; }
.mds-login-brand h1 em { font-style: normal; color: var(--mds-teal-2); }
.mds-login-brand p { font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.7); margin: 0 0 28px; max-width: 500px; }
.mds-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 540px; list-style: none; padding: 0; margin: 0; }
.mds-features li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9);
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.mds-features li i { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(95,207,196,.14); color: var(--mds-teal-2); }
.mds-features svg { width: 18px; height: 18px; }
.mds-brand-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: rgba(255,255,255,.5); }
.mds-brand-foot b { color: rgba(255,255,255,.8); font-weight: 600; }

/* ---------- Form side ---------- */
body[data-path="login"] .page-content-wrapper {
	margin-inline-start: 46vw; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 88px 24px 32px;
}
body[data-path="login"] main, body[data-path="login"] .container { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
body[data-path="login"] .page-card {
	background: var(--mds-card) !important; border: 1px solid var(--mds-line) !important; border-radius: 16px !important;
	box-shadow: 0 1px 2px rgba(20,29,54,.04), 0 12px 40px -12px rgba(20,29,54,.12) !important;
	padding: 40px 40px 32px !important; width: 440px; max-width: calc(100vw - 32px); margin: 0 auto !important;
}
body[data-path="login"] .page-card-head { text-align: start !important; align-items: flex-start !important; margin-bottom: 28px !important; }
body[data-path="login"] .page-card-head .app-logo { height: 40px; width: auto; max-width: 170px; margin: 0 0 24px !important; }
body[data-path="login"] .page-card-head h4, body[data-path="login"] .page-card-head .text-xl, body[data-path="login"] .page-card-head .text-2xl {
	font-size: 26px !important; font-weight: 700 !important; color: var(--mds-text) !important; margin: 0 0 6px !important; letter-spacing: 0;
}
body[data-path="login"] .page-card-head p, body[data-path="login"] .page-card-head .text-base { font-size: 15px !important; color: var(--mds-muted) !important; margin: 0 !important; }
body[data-path="login"] label, body[data-path="login"] .form-label { font-size: 13.5px !important; font-weight: 600 !important; color: var(--mds-text) !important; margin-bottom: 8px !important; }
body[data-path="login"] .form-group { margin-bottom: 18px !important; }
body[data-path="login"] .form-control {
	height: 48px !important; border-radius: 10px !important; font-size: 15px !important; padding-inline: 14px !important;
	background: var(--mds-input) !important; color: var(--mds-text) !important; border: 1px solid var(--mds-line) !important; box-shadow: none !important;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
body[data-path="login"] .form-control:hover { border-color: #c9d0dd !important; }
body[data-path="login"] .form-control:focus { background: var(--mds-card) !important; border-color: var(--mds-teal) !important; box-shadow: 0 0 0 4px rgba(23,163,152,.15) !important; }
body[data-path="login"] .form-control::placeholder { color: #a3abbd; }
[dir="rtl"] body[data-path="login"] input[type="email"], [dir="rtl"] body[data-path="login"] input[name="login_email"],
[dir="rtl"] body[data-path="login"] input[type="password"] { direction: ltr; text-align: right; }
body[data-path="login"] .toggle-password, body[data-path="login"] .password-field-icon { color: var(--mds-muted) !important; }
body[data-path="login"] a { color: var(--mds-teal) !important; font-weight: 600; text-decoration: none !important; }
body[data-path="login"] a:hover { color: #11867c !important; }
body[data-path="login"] .forgot-password-message, body[data-path="login"] .forgot-password-message a { font-size: 13.5px !important; }

body[data-path="login"] .es-button, body[data-path="login"] .btn { height: 48px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 600 !important; }
body[data-path="login"] .es-button[data-variant="solid"], body[data-path="login"] .btn-primary, body[data-path="login"] .btn-login {
	background: linear-gradient(180deg, #1d2a50, var(--mds-navy)) !important; color: #fff !important; border: 0 !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px -8px rgba(20,29,54,.55) !important; transition: transform .12s, box-shadow .12s;
}
body[data-path="login"] .es-button[data-variant="solid"]:hover, body[data-path="login"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(20,29,54,.6) !important; }
body[data-path="login"] .es-button:not([data-variant="solid"]), body[data-path="login"] .btn-default, body[data-path="login"] .btn-login-option {
	background: var(--mds-card) !important; color: var(--mds-text) !important; border: 1px solid var(--mds-line) !important;
}
body[data-path="login"] .es-button:not([data-variant="solid"]):hover, body[data-path="login"] .btn-default:hover { border-color: var(--mds-teal) !important; }
body[data-path="login"] .login-divider, body[data-path="login"] .text-muted { color: var(--mds-muted) !important; }
@media (prefers-color-scheme: dark) {
	body[data-path="login"] .es-button[data-variant="solid"], body[data-path="login"] .btn-primary { background: linear-gradient(180deg, #1bb5a9, var(--mds-teal)) !important; }
	body[data-path="login"] .form-control:hover { border-color: #33405e !important; }
}
.mds-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 12.5px; color: var(--mds-muted); }
.mds-secure svg { width: 14px; height: 14px; color: var(--mds-teal); }
.mds-form-foot { margin-top: 24px; font-size: 12.5px; color: var(--mds-muted); text-align: center; }

/* Language switch (top of the form side) */
body[data-path="login"] .page-card { position: relative; }
.mds-lang-switch {
	position: absolute; top: 18px; inset-inline-end: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 999px; font-size: 12.5px !important; font-weight: 600; cursor: pointer; line-height: 1.4;
	border: 1px solid var(--mds-line); background: var(--mds-input); color: var(--mds-muted) !important; text-decoration: none !important;
	transition: border-color .15s, color .15s;
}
.mds-lang-switch svg { width: 14px; height: 14px; color: var(--mds-teal); }
.mds-lang-switch:hover { color: var(--mds-text) !important; }
.mds-lang-switch:hover { border-color: var(--mds-teal); }

@media (max-width: 1100px) { .mds-features { grid-template-columns: 1fr; } .mds-login-brand { padding: 44px 40px; } }
@media (max-width: 900px) {
	.mds-login-brand { display: none; }
	body[data-path="login"] .page-content-wrapper { margin-inline-start: 0; }
	body[data-path="login"] .page-card { padding: 32px 24px 28px !important; }
}


/* ---------- One screen, no scrolling (desktop / laptop) ---------- */
@media (min-width: 901px) {
	html:has(body[data-path="login"]), body[data-path="login"] { height: 100vh; overflow: hidden !important; }
	body[data-path="login"] .page-content-wrapper { height: 100vh; min-height: 0; padding: 16px 24px; overflow: hidden; }
	body[data-path="login"] .page-card { padding: clamp(22px, 3.2vh, 36px) 36px clamp(18px, 2.6vh, 28px) !important; }
	body[data-path="login"] .page-card-head { margin-bottom: clamp(12px, 2.4vh, 24px) !important; }
	body[data-path="login"] .page-card-head .app-logo { height: clamp(28px, 4vh, 38px); margin-bottom: clamp(10px, 2vh, 18px) !important; }
	body[data-path="login"] .page-card-head h4, body[data-path="login"] .page-card-head .text-xl, body[data-path="login"] .page-card-head .text-2xl { font-size: clamp(20px, 2.8vh, 25px) !important; }
	body[data-path="login"] .form-group { margin-bottom: clamp(10px, 1.8vh, 16px) !important; }
	body[data-path="login"] .form-control, body[data-path="login"] .es-button, body[data-path="login"] .btn { height: clamp(40px, 5.2vh, 46px) !important; }
	body[data-path="login"] label, body[data-path="login"] .form-label { margin-bottom: 6px !important; }
	.mds-secure { margin-top: clamp(10px, 1.8vh, 18px); }
	body[data-path="login"] .page-card > * + * { margin-top: 0; }
	.mds-login-brand { padding: clamp(24px, 4.5vh, 48px) clamp(32px, 4vw, 60px); gap: 16px; }
	.mds-login-brand h1 { font-size: clamp(24px, 3.9vh, 36px); margin-bottom: clamp(8px, 1.5vh, 14px); }
	.mds-login-brand p { font-size: clamp(14px, 1.9vh, 16px); line-height: 1.8; margin-bottom: clamp(14px, 2.6vh, 24px); }
	.mds-badge { margin-bottom: clamp(10px, 2vh, 18px); }
	.mds-features { gap: 10px; }
	.mds-features li { padding: clamp(9px, 1.5vh, 13px); font-size: 13.5px; }
	.mds-features li i { width: 30px; height: 30px; }
}

/* ---------- Error and message pages (404, not permitted, maintenance) ---------- */
body:has(.error-page), body:has(.page-card.message-page) { background: #f4f6fa !important; }
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; }
.error-page > div { background: #fff; border: 1px solid #e1e5ee; border-radius: 10px; padding: 44px 52px; box-shadow: none; max-width: 520px; }
.error-page > div::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 12px; background: #fff url("/assets/mds_erp/images/mds-mark.svg") center / contain no-repeat; border: 1px solid #e1e5ee; }
.error-page h4 { font-size: 24px; font-weight: 700; color: #1b2541; margin: 0 0 8px; }
.error-page .details a { display: inline-block; margin-top: 16px; padding: 9px 20px; border-radius: 6px; background: #1b2541; color: #fff !important; font-weight: 600; text-decoration: none; }
@media (prefers-color-scheme: dark) {
	body:has(.error-page) { background: #0c111d !important; }
	.error-page > div { background: #141c2e; border-color: #263049; }
	.error-page h4 { color: #e8ecf5; }
	.error-page .details a { background: #17a398; }
}