/**
 * Design System v2 — لایه‌ی پایه‌ی یکپارچه (نسخه 1.3.0)
 *
 * تنظیمات سراسریِ ایمن (فقط داخل کانتینر پلاگین .clinic-wrap)، آیکن‌ها،
 * حلقه‌ی فوکوس دسترس‌پذیر و اهداف لمسیِ موبایل (STEP 40).
 *
 * @package Clinic_Manager
 */

/* رنگ انتخاب متن داخل پلاگین */
.clinic-wrap ::selection {
	background: var(--clinic-primary-200);
	color: var(--clinic-primary-900);
}

/* آیکن‌های SVG درون‌خط (بدون CDN ثالث — قانون قرمز #۱) */
.clinic-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: -3px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.clinic-icon--sm { width: 16px; height: 16px; }
.clinic-icon--lg { width: 28px; height: 28px; }
.clinic-icon--xl { width: 40px; height: 40px; }

/* STEP 223-B — حلقه‌ی فوکوسِ «عمق‌دارِ» STEP 160 به outline برگشت.
 *
 * 🔴 این قاعده تخصصِ ۰،۳،۰ دارد ⇒ **از قاعده‌ی پایه‌ی فیلد بالاتر است**. تا وقتی
 * اینجا سایه بود، حذفِ سایه در forms-v2.css روی فوکوسِ کیبورد اثری نداشت. با
 * ردیابیِ زنجیره‌ی غلبه در مرورگر پیدا شد، نه با grep روی نامِ کلاس.
 * دسترس‌پذیری حفظ است: outlineِ ۲px برند همان نشانه‌ی واضحِ کیبورد را می‌دهد. */
.clinic-wrap .clinic-input:focus-visible,
.clinic-wrap .clinic-select:focus-visible,
.clinic-wrap .clinic-textarea:focus-visible,
.clinic-wrap .clinic-otp-input:focus-visible {
	outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
	outline-offset: var(--clinic-field-focus-offset, 1px);
	border-color: var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
	box-shadow: none;
}
/* STEP 223-B — فوکوسِ کیبوردِ دکمه هم با outline، نه حلقه‌ی box-shadow: نقشِ کنش
 * در هیچ حالتی سایه ندارد. outline بیرونِ جریانِ چیدمان است پس ردیفِ دکمه‌ها
 * تکان نمی‌خورد، و روی پس‌زمینه‌ی برندِ دکمه هم دیده می‌شود. */
.clinic-wrap .clinic-btn:focus-visible,
.clinic-wrap a.clinic-btn:focus-visible {
	outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
	outline-offset: var(--clinic-focus-outline-offset, 2px);
	box-shadow: none;
}

/* اهداف لمسی در موبایل (STEP 40) */
@media (hover: none) and (pointer: coarse) {
	.clinic-wrap .clinic-btn,
	.clinic-wrap .clinic-btn-primary,
	.clinic-wrap .clinic-btn-secondary,
	.clinic-wrap .clinic-btn-success,
	.clinic-wrap .clinic-btn-danger {
		min-height: 48px;
	}
	.clinic-wrap .clinic-input,
	.clinic-wrap .clinic-select,
	.clinic-wrap .clinic-textarea {
		min-height: 44px;
		/* جلوگیری از zoom خودکار iOS روی فوکوس */
		font-size: var(--fs-md);
	}
}

/* اسکرول‌بار ظریف داخل کانتینرهای پلاگین */
.clinic-wrap .clinic-scroll::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.clinic-wrap .clinic-scroll::-webkit-scrollbar-thumb {
	background: var(--clinic-gray-300);
	border-radius: var(--clinic-radius-pill, 999px);
}
.clinic-wrap .clinic-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--clinic-gray-400);
}