/* ==========================================================================
   ML Agency Manager — لایه‌ی Web App (موبایل)

   قانون اول پروژه این‌جا هم برقرار است: چیدمان مالِ بوت‌استرپ، این فایل
   فقط ظاهر و پوسته‌ی موبایل را اضافه می‌کند. هیچ قاعده‌ی row/col/offcanvas
   بازنویسی نمی‌شود.

   🔴 مهم‌ترین قید این فایل: **نسخه‌ی دسکتاپ نباید تکان بخورد.**
   تقریباً همه‌ی قواعد داخل @media (max-width: 991.98px) اند — دقیقاً همان
   نقطه‌ای که سایدبار به offcanvas تبدیل می‌شود. آن‌چه بیرون از media query
   است فقط اجزای تازه‌ای است که در دسکتاپ اصلاً رندر نمی‌شوند
   (نوار پایین، دکمه‌ی شناور) یا مستقل از عرض‌اند (نوار آفلاین، Toast).

   این فایل فقط وقتی لود می‌شود که «فعال‌سازی Web App» روشن باشد.
   ========================================================================== */

:root {
	--ml-appnav-h: 60px;
	/* env() روی مرورگرهای بدون ناچ صفر برمی‌گرداند، پس این متغیر همیشه امن است.
	   ⚠️ برای این‌که واقعاً مقدار بگیرد، تگ viewport باید viewport-fit=cover
	   داشته باشد — ML_Agency_WebApp::render_viewport() همان را چاپ می‌کند. */
	--ml-safe-bottom: env(safe-area-inset-bottom, 0px);
	--ml-safe-top: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   ۱. نواحی امنِ دستگاه (ناچ / Dynamic Island / نوار Home)
   ========================================================================== */

/* در حالت standalone، نوار وضعیت روی محتوا می‌افتد (چون
   apple-mobile-web-app-status-bar-style روی black-translucent است) —
   پس نوار بالای برنامه باید به‌اندازه‌ی همان ناحیه پایین بیاید. */
body.ml-app-standalone .ml-mobile-topbar {
	padding-top: calc(11px + var(--ml-safe-top));
}

body.ml-app-standalone .ml-sidebar .offcanvas-header {
	padding-top: calc(1rem + var(--ml-safe-top));
}

/* ==========================================================================
   ۲. نوار ناوبری پایین
   آیتم‌هایش از همان ML_Agency_Dashboard_Nav::sections() می‌آیند، پس
   خودکار با دسترسی هر کاربر هماهنگ است.
   ========================================================================== */

.ml-appnav {
	display: none;
}

@media (max-width: 991.98px) {

	.ml-appnav {
		display: block;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 1035; /* بالای محتوا، پایین‌تر از offcanvas (1045) و modal (1055) */
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
		border-top: 1px solid var(--ml-line, #e8eaf1);
		box-shadow: 0 -6px 24px -12px rgba(16, 24, 40, 0.28);
		padding-bottom: var(--ml-safe-bottom);
	}

	.ml-appnav-list {
		display: flex;
		align-items: stretch;
		margin: 0;
		padding: 0;
		list-style: none;
		height: var(--ml-appnav-h);
	}

	.ml-appnav-item {
		flex: 1 1 0;
		min-width: 0;
	}

	.ml-appnav-link {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		text-decoration: none;
		color: var(--ml-muted, #6b7488);
		font-size: 10.5px;
		font-weight: 600;
		padding: 6px 2px 4px;
		transition: color 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.ml-appnav-link i {
		font-size: 19px;
		line-height: 1;
	}

	.ml-appnav-label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ml-appnav-link.active {
		color: var(--ml-primary, #4338ca);
	}

	/* نشانگر آیتم فعال — یک خط کوتاه بالای آیکون، نه پس‌زمینه‌ی پر،
	   تا با زبان بصریِ سایدبار (که لهجه‌ی کناری دارد) هم‌خانواده بماند. */
	.ml-appnav-link.active::before {
		content: "";
		position: absolute;
		top: 0;
		inset-inline-start: 50%;
		transform: translateX(50%);
		width: 26px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: linear-gradient(90deg, var(--ml-primary, #4338ca), var(--ml-primary-light, #6366f1));
	}

	.ml-appnav-badge {
		position: absolute;
		top: 5px;
		inset-inline-start: calc(50% + 9px);
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--ml-rose, #f43f5e);
		color: #fff;
		font-size: 9.5px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	/* دکمه‌ی «بیشتر» همان offcanvas موجود را باز می‌کند — هیچ منوی دومی
	   ساخته نشده، پس هیچ بخشی از دسترس خارج نمی‌شود. */
	.ml-appnav-more {
		background: none;
		border: 0;
		width: 100%;
		font-family: inherit;
	}

	/* جا برای نوار پایین، تا آخرین دکمه‌ی هر صفحه زیرش گم نشود. */
	body.ml-app-has-nav .ml-main {
		padding-bottom: calc(var(--ml-appnav-h) + var(--ml-safe-bottom) + 22px);
	}
}

/* ==========================================================================
   ۳. دکمه‌ی شناور (FAB) — میان‌بر به پرکاربردترین کار همان صفحه
   ========================================================================== */

.ml-app-fab {
	display: none;
}

@media (max-width: 991.98px) {
	.ml-app-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		inset-inline-end: 16px;
		bottom: calc(var(--ml-appnav-h) + var(--ml-safe-bottom) + 16px);
		z-index: 1036;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		border: 0;
		color: #fff;
		font-size: 22px;
		text-decoration: none;
		background: linear-gradient(135deg, var(--ml-primary, #4338ca), var(--ml-primary-light, #6366f1));
		box-shadow: var(--ml-glow-primary, 0 10px 24px -10px rgba(67, 56, 202, 0.55));
		-webkit-tap-highlight-color: transparent;
	}

	.ml-app-fab:active {
		transform: scale(0.94);
	}

	.ml-app-fab:hover,
	.ml-app-fab:focus {
		color: #fff;
	}
}

/* ==========================================================================
   ۴. Toast (نصب / به‌روزرسانی) و نوار آفلاین
   هر دو فرزندِ مستقیم <body> اند (JS می‌سازدشان) — همان درسِ مودال‌ها:
   position:fixed داخل کارتِ انیمیشن‌دار نسبت به همان کارت جای‌گیری می‌شود.
   ========================================================================== */

.ml-app-toast {
	position: fixed;
	inset-inline: 12px;
	bottom: calc(var(--ml-appnav-h) + var(--ml-safe-bottom) + 12px);
	z-index: 1060;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border-radius: var(--ml-radius, 14px);
	background: #131a26;
	color: #e9edf5;
	font-size: 13px;
	line-height: 1.9;
	box-shadow: var(--ml-shadow-lg, 0 24px 48px -16px rgba(16, 24, 40, 0.2));
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ml-app-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 992px) {
	.ml-app-toast {
		inset-inline-start: auto;
		inset-inline-end: 20px;
		bottom: 20px;
		max-width: 380px;
	}
}

.ml-app-toast-text {
	flex: 1 1 190px;
	min-width: 0;
}

.ml-app-toast-text strong {
	color: #fff;
}

.ml-app-toast-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.ml-app-toast-btn {
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: transparent;
	color: #cbd5e1;
	border-radius: 10px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.ml-app-toast-btn.is-primary {
	background: linear-gradient(135deg, var(--ml-primary, #4338ca), var(--ml-primary-light, #6366f1));
	border-color: transparent;
	color: #fff;
}

/* آیکون «اشتراک‌گذاری» iOS — با SVG درون‌خطی، تا به هیچ فونت آیکونی
   وابسته نباشد (Safari گاهی گلیف معادل ندارد). */
.ml-app-ios-share {
	display: inline-block;
	width: 13px;
	height: 16px;
	vertical-align: -3px;
	margin: 0 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 0 4.5 3.5l1 1L7.3 2.7V12h1.4V2.7l1.8 1.8 1-1L8 0Z'/%3E%3Cpath d='M2 7h3v1.4H3.4v10.2h9.2V8.4H11V7h3v13H2V7Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 0 4.5 3.5l1 1L7.3 2.7V12h1.4V2.7l1.8 1.8 1-1L8 0Z'/%3E%3Cpath d='M2 7h3v1.4H3.4v10.2h9.2V8.4H11V7h3v13H2V7Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   برگه‌ی به‌روزرسانی برنامه

   عمداً از .ml-app-toast جدا است: آن یکی یک نوارِ یک‌خطیِ گذراست، این یکی
   باید حسِ «به‌روزرسانیِ یک برنامه» بدهد — آیکون، عنوان، توضیح و دو اکشنِ
   واضح. روی موبایل Bottom Sheet است و در دسکتاپ کارتی در گوشه.

   ⚠️ صفر رنگِ تازه: همه از توکن‌های موجود (--ml-primary، --ml-surface،
   --ml-ink، --ml-muted، --ml-line، --ml-shadow-lg، --ml-radius-lg).
   -------------------------------------------------------------------------- */

.ml-app-update {
	position: fixed;
	inset-inline: 10px;
	bottom: calc(var(--ml-appnav-h) + var(--ml-safe-bottom) + 10px);
	z-index: 1065; /* بالای Toast (1060)، پایین‌تر از مودالِ بوت‌استرپ */
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon body"
		"actions actions";
	gap: 12px 12px;
	padding: 16px;
	background: var(--ml-surface, #fff);
	border: 1px solid var(--ml-line, #e8eaf1);
	border-radius: var(--ml-radius-lg, 18px);
	box-shadow: var(--ml-shadow-lg, 0 24px 48px -16px rgba(16, 24, 40, 0.2));
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.26s ease, transform 0.26s ease;
}

.ml-app-update.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 992px) {
	.ml-app-update {
		inset-inline-start: auto;
		inset-inline-end: 20px;
		bottom: 20px;
		max-width: 400px;
	}
}

.ml-app-update-icon {
	grid-area: icon;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fff;
	background: linear-gradient(135deg, var(--ml-primary, #4338ca), var(--ml-primary-light, #6366f1));
	box-shadow: var(--ml-glow-primary, 0 10px 24px -10px rgba(67, 56, 202, 0.55));
}

/* چرخشِ آرام فقط وقتی کاربر دکمه را زده — نشانه‌ی «در حالِ کار» */
.ml-app-update.is-busy .ml-app-update-icon i {
	animation: mlAppSpin 1.1s linear infinite;
}

@keyframes mlAppSpin {
	to { transform: rotate(360deg); }
}

.ml-app-update-body {
	grid-area: body;
	min-width: 0;
}

.ml-app-update-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--ml-ink, #131a2b);
	margin-bottom: 4px;
}

.ml-app-update-text {
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ml-muted, #6b7488);
}

.ml-app-update-actions {
	grid-area: actions;
	display: flex;
	gap: 8px;
}

.ml-app-update-btn {
	flex: 1 1 0;
	min-height: 44px; /* هدفِ لمسیِ استاندارد */
	border: 1px solid var(--ml-line, #e8eaf1);
	background: transparent;
	color: var(--ml-body, #384152);
	border-radius: var(--ml-radius-sm, 10px);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ml-app-update-btn.is-primary {
	flex: 1.4 1 0;
	border-color: transparent;
	color: #fff;
	background: linear-gradient(135deg, var(--ml-primary, #4338ca), var(--ml-primary-light, #6366f1));
	box-shadow: var(--ml-glow-primary, 0 10px 24px -10px rgba(67, 56, 202, 0.55));
}

.ml-app-update-btn:disabled {
	opacity: 0.75;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.ml-app-update {
		transition: none;
	}
	.ml-app-update.is-busy .ml-app-update-icon i {
		animation: none;
	}
}

.ml-app-offline {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 1070;
	padding: calc(8px + var(--ml-safe-top)) 14px 8px;
	background: var(--ml-rose, #f43f5e);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 6px 18px -10px rgba(244, 63, 94, 0.8);
}

@media (prefers-reduced-motion: reduce) {
	.ml-app-toast {
		transition: none;
	}
	.ml-app-fab:active {
		transform: none;
	}
}

/* ==========================================================================
   ۵. بهینه‌سازی‌های لمسی — فقط موبایل
   ========================================================================== */

/* ⚠️ مرزِ این بلوک عمداً 991.98px است، نه 767.98px.
   اندازه‌گیریِ واقعی در Chrome نشان داد روی عرضِ ۷۶۸ (آیپد عمودی) قاعده‌ی
   موجودِ agent-dashboard.css دیگر اعمال نمی‌شود و فونتِ دو ورودیِ مرحله‌ی
   اول ویزارد ۱۴px می‌ماند — یعنی دقیقاً همان زومِ خودکارِ Safari که این
   بلوک برای رفعش نوشته شده. ۹۹۱٫۹۸ همان نقطه‌ای است که کلِ پوسته‌ی موبایل
   (سایدبار → offcanvas، نوار پایین) فعال می‌شود، پس مرزها یکی می‌مانند. */
@media (max-width: 991.98px) {

	/* 🔴 ورودی‌ها باید حداقل ۱۶ پیکسل باشند.
	   Safari روی iOS هر فیلدی با فونت کوچک‌تر از ۱۶px را هنگام focus
	   خودکار زوم می‌کند و کاربر بعدش دستی باید صفحه را برگرداند —
	   بدترین حس ممکن در فرم پنج‌مرحله‌ای ثبت فایل.
	   ⚠️ !important لازم است چون قاعده‌ی موجودِ agent-dashboard.css خودش
	   !important دارد (خط ۲۳۹۹). */
	body.ml-app-shell .ml-main .form-control,
	body.ml-app-shell .ml-main .form-select,
	body.ml-app-shell .ml-main input[type="text"],
	body.ml-app-shell .ml-main input[type="tel"],
	body.ml-app-shell .ml-main input[type="number"],
	body.ml-app-shell .ml-main textarea {
		font-size: 16px !important;
	}

	/* هدف لمسیِ استاندارد ۴۴ پیکسل (راهنمای اپل و متریال). */
	body.ml-app-shell .ml-main .btn,
	body.ml-app-shell .ml-main .form-select,
	body.ml-app-shell .ml-main .form-control {
		min-height: 44px;
	}

	body.ml-app-shell .ml-main .btn-sm {
		min-height: 38px;
		padding-inline: 12px;
	}

	/* چک‌باکس/رادیوی بزرگ‌تر — امکانات فایل ده‌ها چک‌باکس دارد. */
	body.ml-app-shell .ml-main .form-check-input {
		width: 20px;
		height: 20px;
	}

	/* اسکرول روانِ جدول‌های عریض روی iOS. */
	body.ml-app-shell .table-responsive,
	body.ml-app-shell .ml-crm-table-wrap {
		-webkit-overflow-scrolling: touch;
	}

	/* ردیف دکمه‌های عملیاتِ داخل جدول‌ها روی گوشی زیر هم نروند و
	   قابل لمس بمانند. */
	body.ml-app-shell .ml-contact-row-actions .btn,
	body.ml-app-shell .ml-office-header-actions .btn {
		min-height: 40px;
	}
}

/* ==========================================================================
   ۶. کشوی فیلتر — فقط نمایش، فرم و کوئری دست‌نخورده
   ========================================================================== */

.ml-app-filter-toggle {
	display: none;
}

@media (max-width: 991.98px) {
	.ml-app-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
		margin-inline-start: auto;
	}

	/* پیش‌فرض جمع؛ با دکمه باز می‌شود. ⚠️ فیلدها فقط پنهان می‌شوند و از
	   DOM خارج نمی‌شوند، پس مقادیر جامانده همچنان با فرم ارسال می‌شوند —
	   دقیقاً همان رفتار دسکتاپ. چیپ‌های «فیلتر فعال» (۱.۲۸.۰) بالای
	   همین کشو و همیشه دیده می‌شوند، پس کاربر هیچ فیلترِ نامرئی ندارد. */
	body.ml-app-shell .ml-office-filters .ml-app-filter-body {
		display: none;
	}

	body.ml-app-shell .ml-office-filters.ml-app-filters-open .ml-app-filter-body {
		display: block;
	}
}

/* ==========================================================================
   ۷. حالت نصب‌شده (standalone)
   ========================================================================== */

/* در حالت standalone مرورگر نوار آدرس ندارد؛ کشیدن به پایین برای رفرش
   هم نیست. یک فاصله‌ی کوچک بالای محتوا حس «برنامه» را کامل می‌کند. */
@media (max-width: 991.98px) {
	body.ml-app-standalone .ml-main {
		padding-top: 16px;
	}
}

/* جلوگیری از انتخاب متنِ ناخواسته هنگام لمس طولانیِ آیتم‌های ناوبری.
   ⚠️ فقط روی خودِ ناوبری، نه محتوا — کاربر باید بتواند شماره تلفن و
   مشخصات فایل را انتخاب و کپی کند. */
.ml-appnav,
.ml-app-fab {
	-webkit-user-select: none;
	user-select: none;
}