/**
 * چیدمان کارت‌های داشبورد — جایگزین قالب‌های المنتور پرو.
 *
 * تا ۱۴۰۵/۰۵/۲۱ چیدمان بخش‌های داشبورد با `[elementor-template id="…"]` ساخته
 * می‌شد. آن شورت‌کد مالِ المنتور **پرو** بود
 * (`elementor-pro/modules/library/classes/shortcode.php`)، ولی داخل هر ۹ قالب
 * فقط ویجت رایگان بود: عنوان، دکمه، و ویرایشگر متنی که شورت‌کد خودمان را
 * در خود داشت.
 *
 * یعنی پرو فقط نقش «جعبه‌ی چیدمان» را بازی می‌کرد. این فایل همان نقش را با
 * چند قاعده‌ی CSS می‌گیرد و وابستگی به افزونه‌ی تجاری را برمی‌دارد.
 *
 * ⚠️ این‌ها عمداً ابزار عمومی‌اند نه استایل یک بخش خاص. محتوا در فیلدهای
 * «کدهای داشبورد» پیشخوان می‌ماند تا بدون کدنویسی قابل تغییر باشد — همان
 * روشی که تا امروز کار می‌کرده.
 */

/* ======================================================
   ردیف اسکرولی — موبایل کشیدنی، دسکتاپ گرید
   ====================================================== */

/**
 * روی موبایل بخش‌ها به‌جای روی‌هم انباشته شدن، کنار هم می‌نشینند و با انگشت
 * کشیده می‌شوند.
 *
 * دلیلش طول داشبورد است: با چهار نمودار پشت سر هم، زبان‌آموز باید صفحه‌ای
 * بلند را رد کند تا به تب‌های حساب کاربری برسد.
 */
.il-scroll-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;   /* اسکرول نرم در iOS */
	scrollbar-width: thin;
	padding-bottom: 12px;
	margin: 0;
}

/**
 * ⚠️ `min-width: 0` حیاتی است و حذفش نمودار را می‌شکند.
 *
 * `[interlan_points_chart]` یک `<canvas>` با `responsive: true` و
 * `maintainAspectRatio: false` می‌سازد، یعنی Chart.js عرض بوم را از عرض والد
 * می‌خواند. پیش‌فرض `min-width` روی آیتم فلکس `auto` است، پس آیتم اجازه دارد
 * با محتوایش بزرگ شود — بوم پهن‌تر می‌شود، آیتم پهن‌تر می‌شود، و این حلقه تا
 * جایی می‌رود که نمودار از صفحه بیرون بزند.
 *
 * با `min-width: 0` تصمیم عرض فقط با `flex-basis` گرفته می‌شود و بوم مجبور
 * است خودش را با آن وفق دهد.
 */
.il-scroll-row > .il-scroll-item {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: center;
}

/** نوار اسکرول باریک — تنها نشانه‌ای که می‌گوید محتوای بیشتری هست. */
.il-scroll-row::-webkit-scrollbar        { height: 4px; }
.il-scroll-row::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 10px; }

/**
 * از عرض تبلت به بالا دیگر اسکرولی در کار نیست.
 *
 * ⚠️ `overflow: visible` لازم است، وگرنه کانتینر همچنان بریدگی و نوار اسکرول
 * دارد حتی وقتی چیزی برای اسکرول کردن نمانده.
 */
@media (min-width: 768px) {
	.il-scroll-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
		padding-bottom: 0;
	}

	.il-scroll-row > .il-scroll-item {
		flex: none;
	}

	/**
	 * حالت دوم: روی موبایل کشیدنی، ولی روی دسکتاپ تمام‌عرض و زیر هم.
	 *
	 * برای نمودارهای میله‌ای که ۱۲ تا ۱۵ برچسب دارند. نصف عرض دسکتاپ برای
	 * آن‌ها یعنی برچسب‌های درهم‌رفته.
	 */
	.il-scroll-row.il-scroll-row--stack {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/**
	 * حالت سوم: روی دسکتاپ هم کشیدنی می‌ماند و هرگز گرید نمی‌شود.
	 *
	 * ⚠️ این برای پروفایل عمومی است، جایی که سه نمودار باید در **یک ردیف**
	 * بمانند. با گرید، سومی به سطر بعد می‌افتاد.
	 *
	 * عرض ۵۰٪ عمدی است: روی کانتینر ۸۲۳ پیکسلیِ آن برگه دو نمودار کامل
	 * دیده می‌شوند و سومی با کشیدن می‌آید — یعنی همان تراکمی که `col-6`
	 * می‌داد، بدون اینکه نمودار فشرده شود.
	 */
	.il-scroll-row.il-scroll-row--always {
		display: flex;
		overflow-x: auto;
		padding-bottom: 12px;
	}

	.il-scroll-row.il-scroll-row--always > .il-scroll-item {
		flex: 0 0 calc(50% - 7.5px);
	}
}

/* ======================================================
   عنوان بخش‌های داخل کارت
   ====================================================== */

.il-scroll-item > h3,
.il-dash-col > h3 {
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 10px;
}

/* ======================================================
   ردیف دکمه‌ها
   ====================================================== */

/**
 * جای «سری دکمه‌های داشبورد». روی موبایل دو ستون می‌شود نه یک ستون — چهار
 * دکمه‌ی تمام‌عرض پشت سر هم همان مشکل درازی را می‌سازد که این فایل قرار است
 * حلش کند.
 */
.il-dash-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 768px) {
	.il-dash-buttons {
		grid-template-columns: repeat(var(--il-btn-cols, 4), minmax(0, 1fr));
	}
}

.il-dash-buttons > a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 48px;
	padding: 10px 12px;
	border-radius: .75rem;
	background: var(--lf-button, #00843d);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: filter .15s ease;
}

.il-dash-buttons > a:hover,
.il-dash-buttons > a:focus {
	color: #fff;
	filter: brightness(.9);
}

/* ======================================================
   ردیف مدال‌ها و دستاوردها
   ====================================================== */

/**
 * ⚠️ این قواعد از «CSS اضافی» سفارشی‌سازی وردپرس به اینجا منتقل شدند —
 * ۱۴۰۵/۰۵/۲۱. اگر هنوز آنجا هم هستند، حذفشان کن؛ دو نسخه‌ی یک قاعده یعنی
 * روزی یکی عوض می‌شود و آن یکی نه.
 *
 * دلیل انتقال: سفارشی‌سازی در گیت نیست و با هر انتقال سایت باید دستی برود.
 *
 * ⚠️ محدود کردنش به همین دو صفحه بی‌خطر است و بررسی شد:
 * `[gamipress_inline_last_achievements_earned]` فقط در `pages/details/main.php`
 * (پروفایل عمومی) و در پنج فیلد «کدهای داشبورد» استفاده می‌شود — یعنی
 * دقیقاً همان جاهایی که این فایل صف می‌شود.
 */

/** گیمی‌پرس بین دستاوردها کاما می‌گذارد؛ در چیدمان کارتی بی‌معناست. */
.gamipress-inline-achievements-separator {
	display: none !important;
}

.gamipress-inline-achievements {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	gap: 15px;
	padding-bottom: 15px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gamipress-inline-achievements::-webkit-scrollbar       { height: 4px; }
.gamipress-inline-achievements::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

/**
 * ⚠️ `justify-content: flex-start` لازم است، وگرنه آیکن‌ها هم‌تراز نمی‌شوند.
 *
 * ظرف بیرونی همه‌ی کارت‌ها را هم‌ارتفاع می‌کند (بلندترین عنوان تعیینش
 * می‌کند)، ولی محتوای داخل کارت عمودی وسط می‌نشست. نتیجه‌اش این بود که
 * کارتِ عنوانِ کوتاه، فضای اضافه‌اش را نصف بالا و نصف پایین پخش می‌کرد:
 *
 *     «مشارکت کلاسی» دو خطی  →  آیکن در بالای کارت
 *     «مکالمه» یک خطی        →  آیکن ۸ پیکسل پایین‌تر
 *
 * اندازه‌گیری‌شده روی همین صفحه: ارتفاع هر کارت ۸۹، ولی `iconTop` بین ۹۵۶ و
 * ۹۶۴ نوسان داشت.
 */
.gamipress-inline-achievement {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-width: 70px;
	max-width: 84px;
	text-align: center;
}

.gamipress-inline-achievement-thumbnail img {
	width: 50px !important;
	height: 50px !important;
	object-fit: contain;
	margin-bottom: 5px;
}

/**
 * ⚠️ عنوان همیشه جای دو خط می‌گیرد، حتی وقتی یک خط است.
 *
 * این همان چیزی است که آیکن‌ها را هم‌تراز نگه می‌دارد: وقتی جعبه‌ی عنوان
 * ارتفاع ثابت دارد، دیگر فضای اضافه‌ای نیست که پخش شود.
 *
 * ⚠️ و بلندتر از دو خط با `…` بریده می‌شود، نه اینکه کارت را بلند کند.
 * `-webkit-line-clamp` با وجود پیشوند، در همه‌ی مرورگرهای امروزی کار می‌کند
 * و اگر هم نکند بدترین حالتش برگشتن به همین رفتار فعلی است — نه خرابی.
 */
.gamipress-inline-achievement-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
	font-size: 11px;
	line-height: 1.4;
	color: #555;
	white-space: normal;
	word-wrap: break-word;
}

/* ======================================================
   کارت پروفایل — باز کردن عرض
   ====================================================== */

/**
 * ⚠️ کارت پروفایل ۳۵۱ پیکسل عرض دارد ولی محتوایش فقط ۱۰۳ پیکسل داشت.
 *
 * دو لایه‌ی تودرتوی `display:flex` با `flex-direction: column` و
 * `align-items: center` وجود دارد. `align-items: center` یعنی فرزند کشیده
 * **نمی‌شود** و دور محتوای خودش جمع می‌شود:
 *
 *     .dashboard-profile-card-inner        ۳۵۱
 *       .dashboard-profile-card-inner-inner  ۱۷۴٫۵   ← جمع شد
 *         .after-profile-code                ۱۰۳٫۳   ← باز هم جمع شد
 *
 * و `row`/`col-6` بوت‌استرپ از همان ۱۰۳ پیکسل، ۴۸ تا را صرف گاتر می‌کرد.
 * نتیجه‌اش این بود که «۱۰۰ ستاره» در ستون جا نمی‌شد.
 *
 * ⚠️ `align-self: stretch` مرکزچینی را خراب نمی‌کند: هر دو ظرف
 * `align-items: center` خودشان را دارند، پس عکس و نام همچنان وسط می‌مانند.
 * با مرورگر تأیید شد — فاصله‌ی چپ و راست آواتار هر دو ۱۱۶ پیکسل.
 */
.dashboard-profile-card .dashboard-profile-card-inner-inner {
	align-self: stretch;
}

.dashboard-profile-card .before-profile-code,
.dashboard-profile-card .after-profile-code {
	align-self: stretch;
	width: 100%;
}

/* ======================================================
   کارت پروفایل — امتیازها
   ====================================================== */

/**
 * ⚠️ آیکن امتیاز نباید کوچک شود — و این یک باگ اندازه‌ی تصویر نبود.
 *
 * گیمی‌پرس هر امتیاز را در یک ظرف `display:flex` می‌گذارد که آیکن، عدد و
 * برچسب سه آیتم آن‌اند. ظرف به عرض داخلی `col-6` محدود است (~۷۱ پیکسل روی
 * کارت پروفایل) و آیتم فلکس پیش‌فرض اجازه‌ی کوچک شدن دارد.
 *
 * نتیجه‌اش این بود که آیکنِ کنارِ متنِ پهن‌تر له می‌شد و آنِ کناری نه:
 *
 *     «۱۰۰ ستاره»  →  آیکن ۱۲٫۳ پیکسل
 *     «۰ سکه»      →  آیکن ۲۳ پیکسل
 *
 * هر دو تگ `width="23"` داشتند؛ فرق در فضای باقی‌مانده بود نه در تصویر.
 * `flex: 0 0 auto` آیکن را از سهمیه‌بندی بیرون می‌آورد.
 *
 * ⚠️ `flex-wrap` تور ایمنی است، نه چیدمان روزمره. با باز شدن عرض کارت
 * (بخش بالا) بدترین حالت واقعی هم یک‌خطی جا می‌شود — بیشترین سکه‌ی یک
 * زبان‌آموز ۵٬۹۷۰ و بیشترین ستاره ۳٬۰۲۲ است، یعنی چهار رقم. اگر روزی عدد
 * بلندتر شد، برچسب به خط بعد می‌رود به‌جای اینکه آیکن را بفشارد.
 */
.gamipress-inline-points {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.gamipress-inline-points-thumbnail {
	flex: 0 0 auto !important;
}

.gamipress-inline-points-thumbnail img {
	width: 23px !important;
	height: 23px !important;
	max-width: none !important;
}

/* ======================================================
   کارت پروفایل — نشان سطح زبانی
   ====================================================== */

/**
 * ⚠️ `position: relative` روی `.avatar-wrap` است نه کارت.
 *
 * نشان باید روی گوشه‌ی خودِ عکس بنشیند. اگر مبنا را کارت بگیریم، با هر
 * تغییر فاصله یا اندازه‌ی کارت، نشان از عکس جدا می‌افتد.
 */
.dashboard-profile-card .avatar-wrap {
	position: relative;
}

/**
 * ⚠️ `left` عمدی است، نه `inset-inline-start`.
 *
 * سایت RTL است و منطقی‌ها در RTL برعکس می‌شوند. خواسته «گوشه‌ی بالا سمت
 * چپ» است، یعنی چپِ دیداری — پس همان `left` فیزیکی.
 */
.dashboard-profile-card .il-level-badge {
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 2;
	display: block;
	width: 20px;
	height: 20px;
	line-height: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
	transition: transform .15s ease;
}

/**
 * ⚠️ ناحیه‌ی لمس بزرگ‌تر از خودِ نشان است.
 *
 * ۲۰ پیکسل برای دیده شدن خوب است ولی برای انگشت روی موبایل کوچک است.
 * این شبه‌عنصر ناحیه‌ی کلیک را به ۳۶ پیکسل می‌رساند بدون اینکه ظاهر عوض
 * شود. `inset` منفی نیاز به `position: relative` روی والد ندارد چون خودِ
 * نشان از قبل `absolute` است.
 */
.dashboard-profile-card .il-level-badge::after {
	content: '';
	position: absolute;
	inset: -8px;
}

.dashboard-profile-card .il-level-badge:hover,
.dashboard-profile-card .il-level-badge:focus {
	transform: scale(1.12);
}

/** ⚠️ `contain` نه `cover` — نشان‌ها مربع نیستند و برش لبه‌شان را می‌خورد. */
.dashboard-profile-card .il-level-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 50%;
}

/* ==========================================================
   آیکن سطح زبانی کنار نام، در فهرست اعضا
   ========================================================== */

/*
 * برادر کوچکِ .il-level-badge بالاست. آن یکی روی گوشه‌ی عکس پروفایل مطلق
 * می‌نشیند؛ این یکی داخل جریان متن است و باید با خط نام هم‌تراز بماند.
 *
 * اندازه در HTML هم روی تگ img گذاشته شده (۲۸×۲۸) تا پیش از رسیدن تصویر
 * جایش رزرو باشد و ردیف نپرد.
 */
.il-level-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: 23px;
	height: 23px;
	line-height: 0;
	flex: 0 0 auto;

	/* منطقی، نه چپ/راست — در RTL و LTR هر دو درست می‌نشیند */
	margin-inline-end: 6px;

	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
	cursor: help;
}

.il-level-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
}

/*
 * عنوان از صفت title می‌آید و مرورگر خودش نشانش می‌دهد. جعبه‌ی دست‌ساز
 * نساختیم چون روی موبایل hover وجود ندارد و آن جعبه فقط جای اضافه می‌گرفت؛
 * aria-label هم برای صفحه‌خوان در خود HTML هست.
 */
.teacher-title h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

/*
 * نام دوره‌ی فعلی مسیر یادگیری، جای جنسیت.
 *
 * وسط‌چین است چون درست زیر نامِ وسط‌چین می‌نشیند؛ بقیه‌ی خطوط همان ردیف
 * (تخصص، زبان) از راست شروع می‌شوند و اگر این یکی هم همان‌طور بود، زیر نام
 * کج به نظر می‌رسید.
 */
.il-current-course {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	text-align: center;
}

/*
 * نام دوره‌ی فعلی زیر ردیف سکه و ستاره در داشبورد.
 *
 * کارت پروفایل داشبورد ستونی و وسط‌چین است، پس اینجا برخلاف فهرست اعضا
 * وسط‌چینی واقعاً می‌گیرد و لازم نیست با استایل والد بجنگیم.
 */
.dashboard-profile-card .il-dashboard-course {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
}

.dashboard-profile-card .il-dashboard-course i {
	font-size: 12px;
	opacity: .75;
}