/* BMT Logistics — أسطح الويب العامة / public web surfaces
   ‎bmt.css‎ يصل عبر ‎app_include_css‎ فيغطّي سطح المكتب وحده. صفحات الموقع —
   وأوّلها شاشة الدخول التي يبدأ منها كل يوم عمل — كانت تصل بلا هوية: خطُّ
   النظام، وبطاقةٌ بلا حدٍّ على خلفيةٍ بلونها نفسه فتذوب حوافّها، وشعار Frappe
   الافتراضي.

   النطاق: الخط والألوان وحدُّ البطاقة. لا هندسة تخطيط ولا مواضع — فأسوأ ما
   تفعله ترقية Frappe هو إعادة الصفحة إلى شكلها الافتراضي، لا كسرها.

   اللغة تتبع متصفّح الزائر لا إعداد النظام (‎Accept-Language‎ يسبق System
   Settings للزوّار في ‎translate.get_language‎)، فكل ما هنا محايدٌ للّغة
   والاتجاه: ‎start/end‎ لا ‎left/right‎. */

/* ── الخط: نفس ملفات المراعي المستضافة محلياً، مقسَّمة عربي/لاتيني ── */
@font-face {
	font-family: "Almarai";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/bmt/fonts/almarai-400-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Almarai";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/bmt/fonts/almarai-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB;
}
@font-face {
	font-family: "Almarai";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/bmt/fonts/almarai-700-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Almarai";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/bmt/fonts/almarai-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB;
}

:root {
	--bmt-navy: #2a5a81;
	--bmt-navy-dark: #1e4468;
	--bmt-sky: #3baae0;
	--bmt-web-border: #cfe3f1;
	--bmt-web-ink: #0f2c42;
	--bmt-web-muted: #5c7183;
	--bmt-web-page: #f2f7fb;
}

body {
	font-family: "Almarai", "Segoe UI", Tahoma, sans-serif;
	color: var(--bmt-web-ink);
}

/* ═══════════════════════════════════════════════════════════
   شاشة الدخول / login
   ═══════════════════════════════════════════════════════════

   ثلاث علل في الشكل الافتراضي، وهذا القسم يعالجها:

   ١) البطاقة لا تتوسّط. ‎login.bundle.scss‎ يضع ‎padding-top: 60px‎ ويطرح
      ‎220px‎ من ارتفاع الشاشة لتذييلٍ هو نفسه يُخفيه في هذه الصفحة، فتلتصق
      البطاقة بالأعلى ويبقى تحتها فراغٌ ميّت.

   ٢) الاتجاه مكسور في العربية. أيقونات الحقول مثبَّتة على ‎left: 8px‎
      والحشوة على ‎padding-left‎، وزرّ إظهار كلمة المرور على ‎right: 9px‎ —
      قيمٌ فيزيائية لا تنقلب مع ‎dir="rtl"‎، فتقع الأيقونة حيث ينتهي النص لا
      حيث يبدأ. البديل هنا ‎inset-inline-*‎ و‎padding-inline-*‎.

   ٣) لا هوية. بطاقةٌ بيضاء على خلفيةٍ بلونها نفسه، بلا حدٍّ ولا ظلّ.

   ملاحظة في الأولوية: ‎login.bundle.scss‎ يُحمَّل بعد هذا الملف ومحدِّداته من
   أربع طبقات (‎.for-login .page-card .page-card-body .field-icon‎)، فلا يكفي
   المحدِّد المختصر. تُطابَق الطبقات نفسها ويُزاد عليها ‎body[data-path]‎
   لترجح الكفّة بلا ‎!important‎. */

/* ── المسرح: تدرّجٌ كحليٌّ ثابت لا يتحرّك مع التمرير ── */
body[data-path="login"] {
	background-color: #0b2337;
	background-image:
		radial-gradient(1100px 640px at 82% -12%, rgba(59, 170, 224, 0.28), transparent 62%),
		radial-gradient(900px 560px at 6% 112%, rgba(42, 90, 129, 0.55), transparent 60%),
		linear-gradient(158deg, #0b2337 0%, #143b58 52%, #1e4468 100%);
	background-attachment: fixed;
}

/* طبقتان زخرفيتان خلف كل شيء: شبكةٌ تُعطي العمق، وشاحنةٌ توقّع الصفحة.
   كلتاهما ‎aria-hidden‎ في القالب ولا تلتقطان المؤشّر. */
.bmt-login-decor {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.bmt-login-decor::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 68px 68px;
	/* تتلاشى الشبكة عند الأطراف فلا تصير نقشاً يُنافس البطاقة */
	-webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}

/* الشاحنة قناعاً لا صورةً: ملفّها مرسومٌ بالأسود، وقناعاً تأخذ لون الخلفية.
   وجهتها يساراً فتُوضع في بداية السطر لتشير نحو الوسط في العربية. */
.bmt-login-decor::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 32px;
	width: min(600px, 46vw);
	aspect-ratio: 1280 / 286;
	background-color: rgba(255, 255, 255, 0.07);
	-webkit-mask-image: url("/assets/bmt/images/truck.svg");
	mask-image: url("/assets/bmt/images/truck.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: bottom center;
	mask-position: bottom center;
}

/* ── التوسيط ── */
body[data-path="login"] .page-content-wrapper {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 32px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

body[data-path="login"] .page-content-wrapper > main {
	width: 100%;
}

/* ── البطاقة ── */
body[data-path="login"] .login-content.page-card {
	max-width: 424px;
	padding: 40px 36px 32px;
	gap: 26px;
	background-color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 20px;
	box-shadow:
		0 40px 80px -28px rgba(3, 18, 30, 0.6),
		0 2px 8px rgba(3, 18, 30, 0.2);
}

/* ── الترويسة: الشعار والعنوان في المنتصف فوق حقولٍ محاذيةٍ لبداية السطر ── */
body[data-path="login"] .page-card-head {
	align-items: center;
	text-align: center;
	gap: 14px;
}

/* الشعار نسبته 281×120؛ 54px ارتفاعاً تجعله عنوان البطاقة الأوّل */
body[data-path="login"] .page-card-head img.app-logo {
	max-height: 54px;
	width: auto;
}

body[data-path="login"] .page-card-head .page-card-head-text {
	gap: 8px;
}

body[data-path="login"] .page-card-head h4 {
	color: var(--bmt-navy-dark);
	font-size: 21px;
	letter-spacing: 0;
}

body[data-path="login"] .page-card-head .page-card-subtitle {
	color: var(--bmt-web-muted);
	font-size: 13px;
	line-height: 1.85;
	letter-spacing: 0;
}

/* شرطةٌ قصيرة تفصل الترويسة عن الحقول وتحمل لوني الشعار */
body[data-path="login"] .page-card-head::after {
	content: "";
	width: 54px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--bmt-sky), var(--bmt-navy));
}

/* ── الحقول ── */
body[data-path="login"] .page-card .page-card-body {
	gap: 16px;
}

body[data-path="login"] .page-card .page-card-body .form-label {
	color: var(--bmt-web-ink);
	font-size: 12.5px;
	font-weight: 700;
}

body[data-path="login"] .page-card .page-card-body input[type="text"],
body[data-path="login"] .page-card .page-card-body input[type="email"],
body[data-path="login"] .page-card .page-card-body input[type="password"] {
	height: 46px;
	padding-block: 0;
	/* منطقية لا فيزيائية: تنقلب مع اتجاه الصفحة فتبقى الحشوة تحت الأيقونة */
	padding-inline-start: 42px;
	padding-inline-end: 14px;
	font-size: 14px;
	background-color: #f7fafc;
	border: 1px solid var(--bmt-web-border);
	border-radius: 10px;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

body[data-path="login"] .page-card .page-card-body .password-field input {
	padding-inline-end: 42px;
}

body[data-path="login"] .page-card .page-card-body input:focus {
	background-color: #fff;
	border-color: var(--bmt-sky);
	box-shadow: 0 0 0 3px rgba(59, 170, 224, 0.18);
}

/* الأيقونات: تُصفَّر القيم الفيزيائية أوّلاً ثم تُضبط المنطقية، وإلا بقيت
   ‎left: 8px‎ الأصلية سارية إلى جانبها. الترتيب داخل الكتلة هو الفاصل. */
body[data-path="login"] .page-card .page-card-body .field-icon {
	left: auto;
	right: auto;
	inset-inline-start: 14px;
	fill: var(--bmt-navy);
	opacity: 0.5;
}

body[data-path="login"] .page-card .page-card-body .password-field .toggle-password {
	left: auto;
	right: auto;
	inset-inline-end: 14px;
	fill: var(--bmt-navy);
	opacity: 0.5;
	transition: opacity 0.15s;
}

body[data-path="login"] .page-card .page-card-body .password-field .toggle-password:hover {
	opacity: 1;
}

/* ‎text-align: right‎ الأصلية تعني «نهاية السطر» في تصميمٍ إنكليزي، فتصير في
   العربية «بدايته» ويلتصق الرابط بالعنوان. ‎end‎ تحفظ المقصد في الاتجاهين. */
body[data-path="login"] .page-card .page-card-body .forgot-password-message {
	text-align: end;
}

body[data-path="login"] .page-card .page-card-body .forgot-password-message > * {
	color: var(--bmt-navy);
	font-size: 12.5px;
	text-decoration: none;
}

body[data-path="login"] .page-card .page-card-body .forgot-password-message > a:hover {
	text-decoration: underline;
}

body[data-path="login"] .page-card .page-card-body .login-error-banner,
body[data-path="login"] .page-card .page-card-body .login-success-banner {
	padding: 10px 12px;
	border-radius: 10px;
	line-height: 1.6;
}

body[data-path="login"] .page-card .page-card-body .field-error {
	font-size: 12px;
}

/* ── الأزرار ── */
body[data-path="login"] .page-card .page-card-actions {
	gap: 10px;
	margin-top: 4px;
}

body[data-path="login"] .page-card .page-card-actions .btn-login,
body[data-path="login"] .page-card .page-card-actions .btn-ldap-login,
body[data-path="login"] .page-card .page-card-actions .btn-primary:not(:disabled),
body[data-path="login"] .page-card .page-card-actions .btn-signup:not(:disabled) {
	height: 46px;
	background: linear-gradient(180deg, var(--bmt-navy) 0%, var(--bmt-navy-dark) 100%);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2px;
	box-shadow: 0 6px 16px -6px rgba(30, 68, 104, 0.65);
	transition: background 0.15s, box-shadow 0.15s, transform 0.06s;
}

body[data-path="login"] .page-card .page-card-actions .btn-login:hover,
body[data-path="login"] .page-card .page-card-actions .btn-login:focus,
body[data-path="login"] .page-card .page-card-actions .btn-ldap-login:hover,
body[data-path="login"] .page-card .page-card-actions .btn-primary:not(:disabled):hover,
body[data-path="login"] .page-card .page-card-actions .btn-primary:not(:disabled):focus,
body[data-path="login"] .page-card .page-card-actions .btn-signup:not(:disabled):hover {
	background: linear-gradient(180deg, #316a97 0%, var(--bmt-navy) 100%);
	color: #fff;
	box-shadow: 0 10px 22px -8px rgba(30, 68, 104, 0.75);
}

body[data-path="login"] .page-card .page-card-actions .btn-login:active,
body[data-path="login"] .page-card .page-card-actions .btn-primary:not(:disabled):active {
	transform: translateY(1px);
	box-shadow: 0 4px 10px -6px rgba(30, 68, 104, 0.7);
}

body[data-path="login"] .page-card .page-card-actions .btn-login-option {
	height: 44px;
	background: #eef4f9;
	border: 1px solid var(--bmt-web-border);
	border-radius: 10px;
	color: var(--bmt-navy-dark);
	font-size: 14px;
	font-weight: 700;
}

body[data-path="login"] .page-card .page-card-actions .btn-login-option:hover {
	background: #e2edf6;
	border: 1px solid #b9d6e9;
	color: var(--bmt-navy-dark);
}


/* الزرّ المُعطَّل قبل استيفاء الحقل (زرّ «إرسال الرابط» يبدأ مُعطَّلاً).
   ‎login.bundle.scss‎ يُبقي شفافيّته 1 ويكتفي بلونٍ رماديّ من متغيّراته، فلو
   لم يُستثنَ هنا لبقي كحليّاً كاملاً — زرٌّ يبدو صالحاً للنقر ولا يستجيب. */
body[data-path="login"] .page-card .page-card-actions .btn-primary:disabled,
body[data-path="login"] .page-card .page-card-actions .btn-signup:disabled,
body[data-path="login"] .page-card .page-card-actions .btn-forgot:disabled {
	height: 46px;
	background: #e7eef4;
	border: 0;
	border-radius: 10px;
	color: #8ea5b7;
	font-size: 15px;
	font-weight: 700;
	box-shadow: none;
}

/* روابط البطاقة (استعادة كلمة المرور، العودة إلى الدخول) بلون الهوية */
body[data-path="login"] .page-card a,
body[data-path="login"] .sign-up-message a {
	color: var(--bmt-navy);
}
/* ── تذييل تحت البطاقة ── */
.bmt-login-legal {
	max-width: 424px;
	margin: 22px auto 0;
	text-align: center;
	color: rgba(226, 240, 250, 0.6);
	font-size: 12px;
	line-height: 1.95;
	letter-spacing: 0.2px;
}


/* ── شاشة الانتظار بعد الدخول ──
   `login.js` يستبدل `document.body.innerHTML` كلَّه بالشعار ثم يعيد التوجيه
   (login.js:275). السمات تبقى على `<body>` فتبقى معها خلفيتُنا الكحلية — وشعار
   BMT كحليٌّ هو الآخر، فيكاد يختفي. تُعطى الصورة لوحةً بيضاء: البطاقة تنكمش إلى
   شعارها ريثما يفتح سطح المكتب. */
body[data-path="login"] .splash {
	background: #fff;
	padding: 30px 38px;
	border-radius: 20px;
	box-shadow:
		0 40px 80px -28px rgba(3, 18, 30, 0.6),
		0 2px 8px rgba(3, 18, 30, 0.2);
	animation: bmt-splash-in 0.32s ease-out both;
}

body[data-path="login"] .splash > img {
	display: block;
	max-width: 200px;
}

/* الظهور بـ ‎opacity‎ وحدها لا ‎transform‎: ‎.centered‎ تتوسّط بـ ‎transform‎،
   فأي حركةٍ تمسّه تدوس التوسيط وتقفز اللوحة إلى الزاوية. */
@keyframes bmt-splash-in {
	from {
		opacity: 0;
	}
}

/* ── تجميع الشعار من حروفه ──
   الشعار ملفّ PNG، فلا سبيل إلى تحريك حروفه داخل صورةٍ واحدة. شُقّ إلى أربع
   طبقاتٍ كلٌّ منها على كامل مقاس الأصل وما عداها شفاف (`_chk_logo_slice.py`
   قاس الفراغات من قناة الشفافية: 75-81 بين B و M، و198-202 بين M و T، و101-105
   فوق LOGISTICS). فتُركَّب الأربع بـ `inset: 0` بلا حساب مواضع، وتركيبها يعيد
   الأصل بكسلاً ببكسل — تحقّق مقيس: صفر بكسل مختلف.

   الحروف تعبر الشاشة كلها: B من يمينها وT من يسارها فيتقاطعان، ثم M تهبط من
   أعلاها لتُغلق الكلمة، وLOGISTICS تظهر أخيراً تحتها.

   الوحدات `vw`/`vh` لا بكسلات: نقطة الانطلاق خارج الشاشة أياً كان مقاسها.
   والتحوّلات هنا فيزيائية لا منطقية — `bmt_web.css` أصلٌ ساكن لا يمرّ على
   معالج RTL في Frappe، فـ `translateX` الموجبة يمينٌ في الاتجاهين. */
body[data-path="login"] .bmt-splash-logo {
	position: relative;
	width: 200px;
	aspect-ratio: 281 / 120;
}

body[data-path="login"] .bmt-splash-part {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	will-change: transform, opacity;
}

/* منحنى أسّيٌّ خارج: انطلاقةٌ سريعة تعبر المسافة ثم استقرارٌ هادئ بلا ارتداد
   — والارتداد هنا يُدخل الحرف في حيّز جاره فيبدو تصادماً لا وثبة.

   المدّة الكلّية **ثانيتان** بالضبط: آخر ما يتحرّك (LOGISTICS) يبدأ عند 1.6
   وينتهي عند 2.0. وهي أطول من زمن جلب سطح المكتب أحياناً، فقد يُقطع ذيل المشهد
   عند التوجيه — والترتيب مبنيٌّ على ذلك: الحروف الثلاثة تستقرّ قبل 1.6 ثانية،
   فما قد يُقطع هو ظهور الكلمة السفلية وحده لا تجمّع الشعار. */
body[data-path="login"] .bmt-splash-b {
	animation: bmt-letter-from-right 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-path="login"] .bmt-splash-t {
	animation: bmt-letter-from-left 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

body[data-path="login"] .bmt-splash-m {
	animation: bmt-letter-from-top 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

body[data-path="login"] .bmt-splash-word {
	animation: bmt-word-in 0.4s ease-out 1.6s both;
}

@keyframes bmt-letter-from-right {
	from {
		transform: translateX(62vw);
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
}

@keyframes bmt-letter-from-left {
	from {
		transform: translateX(-62vw);
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
}

@keyframes bmt-letter-from-top {
	from {
		transform: translateY(-70vh);
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
}

@keyframes bmt-word-in {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
}

/* من عطّل الحركة يرى الشعار مجمَّعاً فوراً — لا شظايا ولا انتظار */
@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] .splash,
	body[data-path="login"] .bmt-splash-part {
		animation: none;
	}
}

/* ── الهاتف ── */
@media (max-width: 575.98px) {
	/* تنسيق Frappe يمدّ البطاقة على ملء الشاشة هنا فتختفي الهوية خلفها.
	   تبقى بطاقةً بهوامش، والمسرح ظاهرٌ حولها. */
	body[data-path="login"] .login-content.page-card {
		max-width: 100%;
		min-height: 0;
		padding: 32px 22px 26px;
		border-radius: 18px;
	}

	body[data-path="login"] .page-content-wrapper {
		padding: 24px 14px;
	}

	body[data-path="login"] .page-card-head img.app-logo {
		max-height: 46px;
	}
}

@media (max-width: 767.98px) {
	/* الشاحنة تزاحم البطاقة على الشاشات الضيّقة */
	.bmt-login-decor::after {
		display: none;
	}
}