/**
 * Design System v2 — Components (نسخه 1.3.0)
 *
 * سازگاری کامل با نام‌گذاری BEM موجود (.clinic-btn--primary، .clinic-card__name)
 * و افزودن گونه‌های جدید تک‌خطی (.clinic-btn-primary). بارگذاری پس از admin.css ⇒
 * بازطراحی روی استایل پایه اعمال می‌شود بدون شکستن کلاس‌های موجود.
 *
 * @package Clinic_Manager
 */

/* ━━━━━━━━━━━━━ BUTTONS ━━━━━━━━━━━━━ */
/*
 * ═══ STEP 220 — پایه دکمه، هم‌تراز با موکاپ ═══
 *
 * 🔴 باگ گزارش‌شده کارفرما اینجا بود: **دو قاعده پایه متعارض** برای `.clinic-btn`
 * وجود داشت — `admin.css` شعاع pill می‌داد و همین قاعده ۸px، و چون این فایل
 * دیرتر بار می‌شود، ۸px برنده بود. یعنی دکمه‌ها اصلا pill نبودند و هر قاعده‌ای که
 * در حالتی دیگر شعاع را از admin.css می‌گرفت، شعاع را بین حالت‌ها واگرا می‌کرد.
 *
 * طبق فاز ۴ بند ۲، قاعده اضافی **حذف شد** (اعلان‌های تکراری از admin.css) و
 * همین یکی تنها پایه ماند، با مقادیر موکاپ:
 *   border 1px شفاف · شعاع pill · پدینگ space-4/space-10 · وزن bold ·
 *   اندازه فونت دکمه · کف ارتفاع ۴۰px · gap برابر space-2
 */
/*
 * 🔴 STEP 221 — یافته باز STEP 220 حل شد: علتش **وردپرس بود، نه کد ما**.
 *
 * استایل هسته وردپرس (`load-styles.php`) این قاعده سراسری را دارد:
 *     a:focus, .wp-person a:focus .gravatar, … { border-radius: 2px }
 * دکمه‌های ما اغلب `<a>` هستند. با فشردن ماوس، لینک focus می‌گیرد و چون
 * `a:focus` ویژگی (۰،۱،۱) دارد و `.clinic-btn` فقط (۰،۱،۰)، **وردپرس برنده
 * می‌شود** و شعاع به ۲px می‌پرد. به همین دلیل هیچ قاعده `:active` در CSS ما
 * پیدا نمی‌شد — قاعده اصلا مال ما نبود.
 *
 * رفع بدون important و بدون قاعده تازه: سلکتور `a.clinic-btn` به همین قاعده
 * پایه افزوده شد تا ویژگی‌اش (۰،۱،۱) شود و چون فایل ما بعد از هسته بار می‌شود،
 * برنده بماند. شعاع دیگر بین حالت‌ها نمی‌پرد.
 */
.clinic-btn,
a.clinic-btn {
	padding: var( --clinic-space-4 ) var( --clinic-space-10 );
	border: 1px solid transparent;
	border-radius: var( --clinic-radius-pill );
	font-weight: var( --clinic-fw-bold );
	font-size: var( --clinic-btn-fs );
	font-family: var(--clinic-font-family);
	min-height: var( --clinic-btn-min-h );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --clinic-space-2 );
	position: relative;
	overflow: hidden;
	line-height: 1.4;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* اثر ripple ملایم */
.clinic-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transform: translate(50%, -50%);
	pointer-events: none;
}
.clinic-btn:active::before {
	animation: clinicRipple 0.6s ease-out;
}

/* ───────────────────────────────────────────────────────────────────
 * STEP 66 — هر واریانت **فقط** از چهار توکنِ خودش می‌خواند (پس‌زمینه + متن +
 * هاور-پس‌زمینه + هاور-متن). دیگر هیچ رنگ مستقل/هاردکدِ var( --clinic-bg )/گرادیانِ ثابت نیست.
 * متنِ هاور همیشه صریحاً ست می‌شود (باگِ قبلی: ghost:hover پس‌زمینه را عوض می‌کرد
 * ولی متن را نه ⇒ بنفش روی بنفش). سایه‌ها از توکنِ خنثی (بدونِ رنگِ برندِ هاردکد).
 * ─────────────────────────────────────────────────────────────────── */

/* HOTFIX (دکمه‌های بی‌رنگ): هر مصرفِ توکن، **fallbackِ زنجیره‌ای** دارد تا اگر توکن‌های
 * جفتی (colors-v2.css/inline_css) به صفحه نرسند، دکمه هرگز بی‌رنگ نشود. مقادیرِ fallback
 * دقیقاً برابرِ پیش‌فرض‌های colors-v2.css‌اند ⇒ وقتی توکن‌ها لود شده‌اند هیچ تغییرِ ظاهری
 * رخ نمی‌دهد (fallback فقط هنگامِ نبودِ توکن فعال می‌شود). علتِ ریشه‌ای: قاعده‌ی بی‌fallbackِ
 * این فایل (آخرین در cascade) هنگامِ نبودِ توکن «invalid at computed-value time» می‌شد و به
 * inherit می‌رفت ⇒ بر fallbackِ admin.css هم غلبه می‌کرد. */

/* ════════════════════════════════════════════════════════════════════
 * STEP 223-B — نقشِ کنش: **بدونِ سایه در هیچ حالتی**، و تمایزِ حالت فقط از
 * رنگِ پس‌زمینه/متن/حاشیه.
 *
 * موکاپ (`docs/mockups/design-system-full.html` خطِ ۱۳۰ تا ۱۴۶) هیچ سایه‌ای
 * روی دکمه ندارد و hover/active را فقط با `color-mix` روی پس‌زمینه می‌سازد.
 * `transform: translateY(-2px)` هم حذف شد: بالاآمدن، «سایه‌ی هندسی» است و
 * چیدمانِ ردیفِ دکمه‌ها را در hover تکان می‌داد.
 * ════════════════════════════════════════════════════════════════════ */

/* Primary */
.clinic-btn-primary,
.clinic-btn--primary {
	background: var(--clinic-btn-primary-bg, var(--clinic-primary, #4B2E83));
	color: var(--clinic-btn-primary-text, #fff);
	box-shadow: none;
}
.clinic-btn-primary:hover,
.clinic-btn--primary:hover {
	background: var(--clinic-btn-primary-hover-bg, var(--clinic-primary-hover, #3A2366));
	color: var(--clinic-btn-primary-hover-text, #fff);
	box-shadow: none;
}
/* پس‌زمینه‌ی حالتِ active از بلوکِ canonicalِ پایین‌تر (خطِ ~۲۲۳) می‌آید که از
 * توکن‌های موجودِ `--clinic-btn-*-active-bg` می‌خواند — اینجا فقط سایه صفر می‌شود
 * تا قاعده‌ی دوم و رقیبی برای همان چیز ساخته نشود. */
.clinic-btn-primary:active,
.clinic-btn--primary:active {
	box-shadow: none;
}

/* Secondary */
.clinic-btn-secondary,
.clinic-btn--secondary {
	background: var(--clinic-btn-secondary-bg, var(--clinic-bg-light, #F3E8FF));
	color: var(--clinic-btn-secondary-text, var(--clinic-primary, #4B2E83));
	border: 1px solid var(--clinic-btn-secondary-bg, var(--clinic-bg-light, #F3E8FF));
	box-shadow: none;
}
.clinic-btn-secondary:hover,
.clinic-btn--secondary:hover {
	background: var(--clinic-btn-secondary-hover-bg, var(--clinic-primary, #4B2E83));
	color: var(--clinic-btn-secondary-hover-text, #fff);
	border-color: var(--clinic-btn-secondary-hover-bg, var(--clinic-primary, #4B2E83));
	box-shadow: none;
}

/* Success */
.clinic-btn-success,
.clinic-btn--success {
	background: var(--clinic-btn-success-bg, var(--clinic-success, #22A06B));
	color: var(--clinic-btn-success-text, #1F1535);
	box-shadow: none;
}
.clinic-btn-success:hover,
.clinic-btn--success:hover {
	background: var(--clinic-btn-success-hover-bg, #1B8F5A);
	color: var(--clinic-btn-success-hover-text, #1F1535);
	box-shadow: none;
}

/* Danger — صورتیِ مرجانی (warning)، متن خودکار */
.clinic-btn-danger,
.clinic-btn--danger {
	background: var(--clinic-btn-danger-bg, var(--clinic-warning, #D98282));
	color: var(--clinic-btn-danger-text, #1F1535);
	box-shadow: none;
}
.clinic-btn-danger:hover,
.clinic-btn--danger:hover {
	background: var(--clinic-btn-danger-hover-bg, #C56B6B);
	color: var(--clinic-btn-danger-hover-text, #1F1535);
	box-shadow: none;
}

/* Outline — شفاف + حاشیه‌ی برند → هاور پر */
.clinic-btn-outline,
.clinic-btn--outline {
	background: var(--clinic-btn-outline-bg, transparent);
	color: var(--clinic-btn-outline-text, var(--clinic-primary, #4B2E83));
	border: 1.5px solid var(--clinic-btn-outline-border, var(--clinic-primary, #4B2E83));
	box-shadow: none;
}
.clinic-btn-outline:hover,
.clinic-btn--outline:hover {
	background: var(--clinic-btn-outline-hover-bg, var(--clinic-primary, #4B2E83));
	color: var(--clinic-btn-outline-hover-text, #fff);
	border-color: var(--clinic-btn-outline-hover-bg, var(--clinic-primary, #4B2E83));
}

/* Ghost — شفاف با حاشیه‌ی خنثی → هاور پرِ برند (متنِ هاور صریح) */
.clinic-btn-ghost,
.clinic-btn--ghost {
	background: var(--clinic-btn-ghost-bg, transparent);
	color: var(--clinic-btn-ghost-text, var(--clinic-primary, #4B2E83));
	border: 1px solid var(--clinic-btn-ghost-border, var(--clinic-border-color, #E5E7EB));
	box-shadow: none;
}
.clinic-btn-ghost:hover,
.clinic-btn--ghost:hover {
	background: var(--clinic-btn-ghost-hover-bg, var(--clinic-primary, #4B2E83));
	color: var(--clinic-btn-ghost-hover-text, #fff);
	border-color: var(--clinic-btn-ghost-hover-bg, var(--clinic-primary, #4B2E83));
}

/* ───────────────────────────────────────────────────────────────────
 * STEP 69 — بیمه‌ی specificity + ضدِّ قالب.
 *
 * قواعدِ لینکِ عمومیِ پلاگین یا قالب‌های وردپرسی (مثلِ `.clinic-wrap a` یا
 * `.entry-content a` با تخصصِ ۰،۱،۱) بر `.clinic-btn--X` (۰،۱،۰) غلبه می‌کردند و
 * رنگ/زیرخطِ دکمه‌های لینکی را می‌بلعیدند. اینجا نسخه‌ی `a.clinic-btn*` (تگ+کلاس = ۰،۱،۱)
 * را با **همان توکن‌ها** (DRY، بدونِ drift) دوباره assert می‌کنیم؛ چون CSS پلاگین پس از
 * CSS قالب لود می‌شود، در تساویِ تخصص هم برنده است. فقط propertyهای آسیب‌پذیر (color +
 * text-decoration) — پس‌زمینه/حاشیه را قالب‌ها روی `a`ِ دلخواه ست نمی‌کنند. */
a.clinic-btn,
a.clinic-btn:hover,
a.clinic-btn:focus,
a.clinic-btn:active {
	text-decoration: none;
}
a.clinic-btn--primary { color: var(--clinic-btn-primary-text, #fff); }
a.clinic-btn--primary:hover, a.clinic-btn--primary:focus { color: var(--clinic-btn-primary-hover-text, #fff); }
a.clinic-btn--secondary { color: var(--clinic-btn-secondary-text, var(--clinic-primary, #4B2E83)); }
a.clinic-btn--secondary:hover, a.clinic-btn--secondary:focus { color: var(--clinic-btn-secondary-hover-text, #fff); }
a.clinic-btn--success { color: var(--clinic-btn-success-text, #1F1535); }
a.clinic-btn--success:hover, a.clinic-btn--success:focus { color: var(--clinic-btn-success-hover-text, #1F1535); }
a.clinic-btn--danger { color: var(--clinic-btn-danger-text, #1F1535); }
a.clinic-btn--danger:hover, a.clinic-btn--danger:focus { color: var(--clinic-btn-danger-hover-text, #1F1535); }
a.clinic-btn--outline { color: var(--clinic-btn-outline-text, var(--clinic-primary, #4B2E83)); }
a.clinic-btn--outline:hover, a.clinic-btn--outline:focus { color: var(--clinic-btn-outline-hover-text, #fff); }
a.clinic-btn--ghost { color: var(--clinic-btn-ghost-text, var(--clinic-primary, #4B2E83)); }
a.clinic-btn--ghost:hover, a.clinic-btn--ghost:focus { color: var(--clinic-btn-ghost-hover-text, #fff); }

/* STEP 115-۳: حالتِ active برای ۵ دکمه — رنگِ پس‌زمینه/متنِ اختصاصی (fallback به هاور). */
.clinic-btn--primary:active, a.clinic-btn--primary:active { background: var(--clinic-btn-primary-active-bg, var(--clinic-btn-primary-hover-bg)); color: var(--clinic-btn-primary-active-text, var(--clinic-btn-primary-hover-text, #fff)); }
.clinic-btn--secondary:active, a.clinic-btn--secondary:active { background: var(--clinic-btn-secondary-active-bg, var(--clinic-btn-secondary-hover-bg)); color: var(--clinic-btn-secondary-active-text, var(--clinic-btn-secondary-hover-text, #fff)); }
.clinic-btn--success:active, a.clinic-btn--success:active { background: var(--clinic-btn-success-active-bg, var(--clinic-btn-success-hover-bg)); color: var(--clinic-btn-success-active-text, var(--clinic-btn-success-hover-text, #fff)); }
.clinic-btn--danger:active, a.clinic-btn--danger:active { background: var(--clinic-btn-danger-active-bg, var(--clinic-btn-danger-hover-bg)); color: var(--clinic-btn-danger-active-text, var(--clinic-btn-danger-hover-text, #fff)); }
.clinic-btn--ghost:active, a.clinic-btn--ghost:active { background: var(--clinic-btn-ghost-active-bg, var(--clinic-btn-ghost-hover-bg)); color: var(--clinic-btn-ghost-active-text, var(--clinic-btn-ghost-hover-text, #fff)); }

/* ── STEP B — تثبیتِ رنگِ متنِ دکمه‌ی **پُرشده‌ی برند** (primary) در hover/active ──
 * فقط primary: پس‌زمینه‌اش در همه‌ی حالت‌ها برندِ پُر است ⇒ متنِ روشن همیشه امن و خواناست؛
 * `!important` تا اگر قالب/وردپرس در بخشی رنگِ متنِ hoverِ دکمه‌ی بنفش را بربایَد، خوانا بماند.
 * عمداً outline/ghost و حالتِ :focus را شامل نمی‌شود، چون آن‌ها پس‌زمینه‌ی شفاف دارند و
 * زمینه‌هایی مثلِ نوارِ bulk عمداً دکمه را روشن/تیره رنگ می‌کنند (نباید سفید اجبار شود). */
.clinic-btn--primary:hover, .clinic-btn--primary:active,
a.clinic-btn--primary:hover, a.clinic-btn--primary:active {
	color: var(--clinic-btn-primary-hover-text, var(--clinic-on-primary, #fff)) !important;
}

/* اندازه‌ها */
.clinic-btn-xs { padding: var( --clinic-space-2 ) var( --clinic-space-4 ); font-size: 11px; }
.clinic-btn-sm { padding: var( --clinic-space-3 ) var( --clinic-space-6 ); font-size: 12px; }
.clinic-btn-md { padding: var( --clinic-space-5 ) var( --clinic-space-10 ); font-size: 14px; }
.clinic-btn-lg { padding: var( --clinic-space-7 ) 28px; font-size: 16px; }
.clinic-btn-xl { padding: var( --clinic-space-8 ) var( --clinic-space-16 ); font-size: 16px; }

/* دکمه‌ی آیکنی — سازگار با .clinic-icon-btn موجود.
 * STEP 223-B — شعاع از ۸px به pill رفت: دکمه‌ی آیکنی هم نقشِ **کنش** است و
 * قرارداد نقش برای کنش pill می‌خواهد. این تنها نقضِ شعاع در نقشِ کنش بود.
 * چون عنصر مربع ۴۰×۴۰ است، مرورگر pill را به نصفِ ضلع (۲۰px) محدود می‌کند
 * ⇒ دایره‌ی کامل، همان چیزی که `.clinic-btn-icon-circle` دستی می‌ساخت. */
.clinic-btn-icon,
.clinic-icon-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--clinic-radius-pill, 999px);
}
.clinic-btn-icon-circle { border-radius: 50%; }

/* تمام‌عرض — هر دو نام‌گذاری */
.clinic-btn-block,
.clinic-btn--block { width: 100%; display: flex; }

/* اندازه‌ی بزرگ — معادلِ BEM برای .clinic-btn-lg */
.clinic-btn--lg { padding: var( --clinic-space-7 ) 28px; font-size: 16px; }

/* STEP 66 — وضعیت غیرفعال از توکنِ اختصاصی (یک ظاهرِ خاکستریِ یکدست برای همه‌ی
 * واریانت‌ها، فارغ از رنگِ پایه). دکمه‌های غیرفعال از الزامِ کنتراستِ WCAG معاف‌اند. */
.clinic-btn:disabled,
.clinic-btn[disabled],
.clinic-btn.loading {
	background: var(--clinic-btn-disabled-bg, var(--clinic-gray-200, #E5E7EB)) !important; /* غلبه بر رنگِ واریانت */
	color: var(--clinic-btn-disabled-text, var(--clinic-gray-500, #6B7280)) !important;
	border-color: var(--clinic-btn-disabled-bg, var(--clinic-gray-200, #E5E7EB)) !important;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
	opacity: 1;
}
.clinic-btn.loading::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	animation: clinicSpin 0.6s linear infinite;
	margin-right: var( --clinic-space-4 );
}

/* ━━━━━━━━━━━━━ CARDS ━━━━━━━━━━━━━
 * STEP 155 — کارتِ پایه‌ی واحدِ سیستمِ لایه‌بندیِ بُعدی. هر کارتِ پلاگین (هر ماژول)
 * از همین عمقِ معنایی استفاده می‌کند تا «هیچ استایلِ جزیره‌ای» نباشد: rest=elev-rest،
 * hover=elev-hover + بالاآمدنِ ظریف، active=فشرده‌شدن. */
.clinic-card {
	background: var(--clinic-bg-primary);
	border: 1px solid var(--clinic-border-light, #F3F4F6);
	border-radius: var(--clinic-card-radius, 16px);
	padding: var(--clinic-card-pad, 24px);
	box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm));
	transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
	will-change: transform;
    margin: var( --clinic-space-7 ) 0px var( --clinic-space-7 ) 0px !important;
}
.clinic-card:hover {
	box-shadow: var(--clinic-elev-hover, var(--clinic-shadow-lg));
	border-color: var(--clinic-primary-200);
	transform: translateY(var(--clinic-lift, -6px));
    margin: var( --clinic-space-7 ) 0px var( --clinic-space-7 ) 0px !important;
}
.clinic-card:active {
	box-shadow: var(--clinic-elev-active, var(--clinic-shadow-sm));
	transform: translateY(var(--clinic-press, 0));
}

.clinic-card--elevated {
	box-shadow: var(--clinic-elev-raised, var(--clinic-shadow-lg));
	border: none;
    margin: var( --clinic-space-5 ) 0px var( --clinic-space-5 ) 0px !important;
}
.clinic-card--elevated:hover {
	box-shadow: var(--clinic-elev-float, var(--clinic-shadow-xl));
	transform: translateY(var(--clinic-lift-sm, -2px));
}
.clinic-card--outlined {
	background: transparent;
	border: 2px solid var(--clinic-primary);
	box-shadow: none;
    margin: var( --clinic-space-5 ) 0px var( --clinic-space-5 ) 0px !important;
}
.clinic-card--outlined:hover {
	box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm));
	transform: translateY(var(--clinic-lift-sm, -2px));
}

/* عنوان/توضیح کارت موجود */
.clinic-card__name {
	font-size: var(--fs-xl, 20px);
	font-weight: var(--fw-semibold, 600);
	color: var(--clinic-text-primary);
}
.clinic-card__desc {
	color: var(--clinic-text-secondary);
	font-size: var(--fs-sm, 14px);
	line-height: var(--lh-normal, 1.5);
}

/*
 * کارت metric: چیدمان و رنگ‌بندی متعلق به dashboard.css است (نسخه‌ی ۱.۰.۷) و اینجا
 * بازنویسی نمی‌شود تا کارت‌های داشبورد دست‌نخورده بمانند. فقط حاشیه‌ی hover ظریف.
 */
.clinic-card--metric:hover {
	border-color: var(--clinic-primary-300);
}
.clinic-card-label {
	font-size: 13px;
	color: var(--clinic-text-secondary);
	margin-top: var( --clinic-space-4 );
	font-weight: var(--fw-medium, 500);
}
.clinic-card-change {
	font-size: 12px;
	margin-top: var( --clinic-space-4 );
	padding: var( --clinic-space-2 ) var( --clinic-space-4 );
	border-radius: var(--radius-sm, 4px);
	background: var(--clinic-success-50);
	color: var(--clinic-success-700);
	font-weight: var(--fw-semibold, 600);
}
.clinic-card-change.positive {
	background: var(--clinic-success-50);
	color: var(--clinic-success-700);
}
.clinic-card-change.negative {
	background: var(--clinic-error-50);
	color: var(--clinic-error-700);
}



/* ============================================================
 * STEP 112-G — حذفِ سراسریِ زیرخط در hover/focus (کلِ پلاگین: پیشخوان + پورتال).
 * پیش‌فرضِ خواسته‌ی کاربر: هیچ‌جا زیرخط نباشد. (لینک‌های درون‌متن هم بدونِ زیرخط.)
 * ============================================================ */
.clinic-wrap a:hover, .clinic-wrap a:focus,
.clinic-portal a:hover, .clinic-portal a:focus,
.clinic-wrap .clinic-btn:hover, .clinic-wrap .clinic-btn:focus,
.clinic-portal .clinic-btn:hover, .clinic-portal .clinic-btn:focus {
	text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
 * STEP 223-B — لایه‌بندیِ بُعدیِ دکمه‌های STEP 155 برداشته شد.
 *
 * 🔴 این بلوک **پس از** بلوکِ واریانت‌ها می‌آمد، پس `‎.clinic-btn:active` با
 * تخصصِ ۰،۲،۰ سایه را به هر شش واریانت برمی‌گرداند. حذفِ سایه در بلوکِ
 * واریانت‌ها به‌تنهایی کافی نبود و فقط با ردیابیِ زنجیره‌ی غلبه در مرورگر
 * دیده شد. تمایزِ حالت اکنون کاملا رنگی است.
 * ════════════════════════════════════════════════════════════════════ */
.clinic-btn-outline:hover, .clinic-btn--outline:hover,
.clinic-btn-ghost:hover, .clinic-btn--ghost:hover {
	box-shadow: none;
}
.clinic-btn:active {
	box-shadow: none;
}

/* دکمه‌ی آیکنی — بدونِ عمق (نقشِ کنش). فقط انتقالِ رنگ باقی می‌ماند. */
.clinic-btn-icon,
.clinic-icon-btn {
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.clinic-btn-icon:hover,
.clinic-icon-btn:hover,
.clinic-btn-icon:active,
.clinic-icon-btn:active {
	box-shadow: none;
}

/* عنوان/سرِ کارت — جداکننده‌ی لایه‌ای ظریف */
.clinic-card__head {
	position: relative;
}

/* احترام به prefers-reduced-motion: عمق/سایه می‌ماند، حرکت حذف می‌شود (دسترس‌پذیری). */
@media (prefers-reduced-motion: reduce) {
	.clinic-card,
	.clinic-card:hover,
	.clinic-card:active,
	.clinic-btn,
	.clinic-btn:hover,
	.clinic-btn:active,
	.clinic-btn-icon:hover,
	.clinic-icon-btn:hover {
		transform: none !important;
	}
}

/* STEP H3 — حالتِ خالیِ استاندارد و تمیز (به‌جای کارت‌های «۰ مورد»). قابل‌استفاده در همه‌ی صفحات. */
.clinic-empty-state { text-align: center; padding: var( --clinic-space-20 ) var( --clinic-space-12 ); }
.clinic-empty-state__ico { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: var( --clinic-radius-xl ); background: var( --clinic-bg-light, #F3E8FF ); color: var( --clinic-primary, #4B2E83 ); margin-bottom: var( --clinic-space-7 ); }
.clinic-empty-state__ico svg { width: 28px; height: 28px; }
.clinic-empty-state__title { margin: 0 0 var( --clinic-space-3 ); font-size: 16px; font-weight: 700; color: var( --clinic-text, #2B2240 ); }
.clinic-empty-state__desc { margin: 0 auto; max-width: 460px; color: var( --clinic-text-muted, #5b6270 ); font-size: 13px; line-height: 1.7; }

/* ═══════════════ STEP 193 — کامپوننت‌های استانداردِ «گرید کارت» و «ظرف نمودار» ═══════════════ */
/* گرید کارت: CSS Grid با auto-fit + minmax؛ بدون float/absolute؛ ارتفاعِ کارت‌ها خودکار و
 * هم‌ردیف‌ها با align-items:stretch کش می‌آیند (بدون هیچ height:100% روی کارت). RTL سالم. */
.clinic-cards-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( var( --clinic-card-min, 220px ), 1fr ) );
	gap: var( --clinic-cards-gap, 14px );
	align-items: stretch;
	margin: 0 0 var( --clinic-space-7 );
}
.clinic-cards-grid > * { min-width: 0; }              /* جلوگیری از سرریزِ محتوا در ستون */
.clinic-cards-grid--sm { --clinic-card-min: 160px; }  /* کارت‌های کوچک‌ترِ آماری */
.clinic-cards-grid--lg { --clinic-card-min: 320px; }  /* کارت‌های بزرگ (مثلِ نمودارها) */
@media ( max-width: 768px ) {
	.clinic-cards-grid { --clinic-card-min: 100%; gap: var( --clinic-space-6 ); }  /* موبایل: تک‌ستون */
}

/* ظرف نمودار: ارتفاعِ استاندارد از متغیر + max-height ⇒ نمودار هرگز بیرون نمی‌زند. */
.clinic-chart {
	position: relative;
	width: 100%;
	height: var( --clinic-chart-h, 320px );
	max-height: var( --clinic-chart-h, 320px );
	overflow: hidden;
}
.clinic-chart > svg { display: block; width: 100%; height: 100%; }
.clinic-chart .clinic-chart-donut { height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var( --clinic-space-6 ); }
.clinic-chart__empty {
	display: flex; align-items: center; justify-content: center; height: 100%;
	color: var( --clinic-muted, #6b6480 ); font-size: 14px; text-align: center; padding: 0 var( --clinic-space-6 );
}
@media ( max-width: 768px ) {
	.clinic-chart { height: var( --clinic-chart-h-mobile, 220px ); max-height: var( --clinic-chart-h-mobile, 220px ); }
}
@media print {
	.clinic-chart { height: 260px !important; max-height: 260px !important; overflow: visible; }
	.clinic-chart > svg { height: 260px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
 * کامپوننت واحد صفحه‌بندی — STEP 223-B
 *
 * تنها استایل صفحه‌بندی در پلاگین. پیش از این چهار ظاهر متفاوت وجود داشت:
 * `.ppage` در فهرست بیماران، `.clinic-page` در لاگ فعالیت، `.clinic-chip-link`
 * در فاکتور و نسخه، و `.page-numbers` وردپرس در فهرست نوبت.
 *
 * قرارداد نقش کنش: شعاع pill، بدون سایه. شعاع و پدینگ و ابعاد در هر پنج حالت
 * یکسان می‌مانند و فقط رنگ عوض می‌شود — همان قاعده‌ای که گارد یکسانی حالت‌ها
 * می‌سنجد.
 * ═══════════════════════════════════════════════════════════════════ */
.clinic-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --clinic-space-4 );
	margin-top: var( --clinic-space-6 );
}

.clinic-pagination__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --clinic-space-2 );
}

.clinic-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 36px;
	min-height: 36px;
	padding: var( --clinic-space-2 ) var( --clinic-space-4 );
	border: 1px solid var( --clinic-border, #ece7f4 );
	border-radius: var( --clinic-radius-pill );
	background: var( --clinic-surface, #fff );
	color: var( --clinic-text, #2b2f36 );
	font-family: var( --clinic-font-family, inherit );
	font-size: var( --clinic-fs-sm, 13px );
	font-weight: var( --clinic-fw-medium, 500 );
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.clinic-page--nav { padding-inline: var( --clinic-space-5 ); }

/*
 * ویژگی بالاتر (۰،۳،۱) تا قاعده عمومی `.clinic-wrap a:not(.clinic-btn)` رنگ
 * متن را نبلعد. درس STEP 109: بدون این، متن بنفش روی پس‌زمینه بنفش محو می‌شد.
 */
.clinic-wrap a.clinic-page:hover,
.clinic-page:hover {
	background: var( --clinic-bg-light, #F3E8FF );
	border-color: var( --clinic-primary, #4B2E83 );
	color: var( --clinic-primary, #4B2E83 );
}

.clinic-page:focus-visible {
	outline: 2px solid var( --clinic-primary, #4B2E83 );
	outline-offset: 2px;
}

.clinic-wrap a.clinic-page.is-current,
.clinic-page.is-current,
.clinic-page.is-current:hover {
	background: var( --clinic-primary, #4B2E83 );
	border-color: var( --clinic-primary, #4B2E83 );
	color: var( --clinic-on-primary, #fff );
	cursor: default;
}

/*
 * غیرفعال: فوکوس‌پذیر می‌ماند ولی کنشی ندارد، پس کرسر باید عادی باشد نه
 * اشاره‌گر. ابعاد و شعاع دست‌نخورده — فقط رنگ کم‌رنگ می‌شود.
 */
.clinic-wrap a.clinic-page.is-disabled,
.clinic-page.is-disabled,
.clinic-page.is-disabled:hover {
	background: var( --clinic-surface, #fff );
	border-color: var( --clinic-border, #ece7f4 );
	color: var( --clinic-text-muted, #6b7280 );
	cursor: default;
}

.clinic-page-gap {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding-inline: var( --clinic-space-2 );
	color: var( --clinic-text-muted, #6b7280 );
	font-size: var( --clinic-fs-sm, 13px );
	user-select: none;
}

.clinic-pagination__info {
	color: var( --clinic-text-muted, #6b7280 );
	font-size: var( --clinic-fs-sm, 13px );
}

.clinic-pagination__jump {
	display: inline-flex;
	align-items: center;
	gap: var( --clinic-space-2 );
}

.clinic-pagination__jumpinput {
	width: 72px;
	min-height: 36px;
	text-align: center;
}

@media ( max-width: 768px ) {
	/*
	 * روی موبایل سه شماره جا نمی‌شود؛ فقط صفحه جاری با قبلی و بعدی می‌ماند.
	 * گیت شده داخل media تا دسکتاپ دست‌نخورده بماند.
	 */
	.clinic-page--num:not( .is-current ),
	.clinic-page-gap,
	.clinic-pagination__jump { display: none; }
	.clinic-pagination { gap: var( --clinic-space-3 ); }
	/* هدف لمسی. */
	.clinic-page { min-height: 44px; min-width: 44px; }
	.clinic-page-gap { min-height: 44px; }
}