/**
 * Design System v2 — Forms (نسخه 1.3.0)
 *
 * بهبود فیلدهای موجود (.clinic-input/.clinic-select/.clinic-textarea/.clinic-label)
 * + برچسب شناور اختیاری (.clinic-form-floating). سازگار با فرم‌های موجود.
 *
 * @package Clinic_Manager
 */

.clinic-form-group {
	margin-bottom: var(--spacing-5, 20px);
	display: flex;
	flex-direction: column;
}
.clinic-form-group:last-child { margin-bottom: 0; }

.clinic-form-group label,
.clinic-label {
	margin-bottom: var(--spacing-2, 8px);
	font-weight: var(--fw-medium, 500);
	font-size: var(--fs-sm, 14px);
	color: var(--clinic-text-primary);
	display: block;
}

/* ════════════════════════════════════════════════════════════════════
 * STEP 76 — قاعده‌ی پایه‌ی واحدِ فیلد. تنها منبعِ ظاهر؛ همه‌چیز از توکنِ
 * --clinic-field-* (هیچ مقدارِ خامِ رنگ/اندازه). props چیدمانیِ
 * (max-width/display/margin) که قبلاً admin.css:213 می‌داد، اینجا حفظ شد تا
 * با حذفِ آن قاعده، ظاهر ذره‌ای تغییر نکند (قانونِ #۱).
 * ════════════════════════════════════════════════════════════════════ */
.clinic-input,
.clinic-select,
.clinic-textarea {
	width: 100%;
	display: block;
	margin-bottom: var(--clinic-spacing-md, 14px);
	padding: var(--clinic-field-padding-y, 11px) var(--clinic-field-padding-x, 14px);
	border: var(--clinic-field-border-w, 1.5px) solid var(--clinic-field-border, #E5E7EB);
	border-radius: var(--clinic-field-radius, 8px);
	font-family: var(--clinic-font-family);
	font-size: var(--clinic-field-font-size, 14px);
	color: var(--clinic-text-primary);
	background: var(--clinic-field-bg, #fff);
	transition: all 0.2s ease;
	box-sizing: border-box;
}
/* سقفِ عرض فقط روی input/select (textarea تمام‌عرض می‌ماند — حفظِ رفتارِ فعلی). */
.clinic-input,
.clinic-select {
	max-width: var(--clinic-field-max-width, 360px);
}
.clinic-input::placeholder,
.clinic-textarea::placeholder {
	color: var(--clinic-text-tertiary);
}
.clinic-input:hover,
.clinic-select:hover,
.clinic-textarea:hover {
	border-color: var(--clinic-border-strong);
}
/* ════════════════════════════════════════════════════════════════════
 * STEP 223-B — نقش ورودی: **بدونِ سایه در هیچ حالتی**.
 *
 * موکاپ `docs/mockups/design-system-full.html` (خطِ ۲۰۹ و ۲۱۴) ورودی را
 * بدونِ `box-shadow` تعریف می‌کند — نه بیرونی نه درونی — و focus را با
 * `outline` می‌سازد. `outline` بیرونِ جریانِ چیدمان است ⇒ ابعادِ فیلد را تکان
 * نمی‌دهد، پس همان کاری را می‌کند که حلقه‌ی box-shadow می‌کرد، بدونِ نقضِ
 * قراردادِ نقش. تنها منبعِ حالتِ focus همین قاعده است؛ چهار بلوکِ عمقِ
 * STEP 155/157/160 که روی هم انباشته بودند حذف شدند.
 * ════════════════════════════════════════════════════════════════════ */
.clinic-input:focus,
.clinic-select:focus,
.clinic-textarea:focus,
.clinic-otp-input:focus {
	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));
	box-shadow: none;
	background: var(--clinic-field-bg, #fff);
}

/* ════════════════════════════════════════════════════════════════════
 * STEP 76 — کلاس‌های گونه‌ی فیلد. هر گونه فقط توکنِ لازمِ خود را override
 * می‌کند (با fallback به توکنِ پایه) ⇒ هر گونه مستقل قابلِ‌تنظیم از تم‌ساز/CSS
 * سفارشی، بدونِ اثر بر گونه‌های دیگر. جایگزینِ قواعدِ پراکنده‌ی wrapper-محور.
 * ════════════════════════════════════════════════════════════════════ */
/* جستجوی بزرگ: آیکنِ ذره‌بین + فاصله‌ی داخلیِ سمتِ شروع. */
.clinic-input--search {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: var(--clinic-field-search-pad-inline, 40px);
	max-width: 100%;
}
body.clinic-ltr .clinic-input--search {
	background-position: left 12px center;
	padding-right: var(--clinic-field-padding-x, 14px);
	padding-left: var(--clinic-field-search-pad-inline, 40px);
}

/* فیلترِ فشرده: ارتفاع/پدینگِ کوچک‌تر، inline، عرضِ خودکار. */
.clinic-input--filter {
	display: inline-block;
	width: auto;
	max-width: 100%;
	min-height: var(--clinic-field-filter-height, 34px);
	padding: var(--clinic-field-filter-pad-y, 6px) var(--clinic-field-filter-pad-x, 12px);
	margin-bottom: 0;
}
/* فیلدِ داخلِ جدول/ماتریس: جمع‌وجور، بی‌حاشیه‌ی پایین. */
.clinic-input--table {
	padding: var(--clinic-field-table-pad-y, 6px) var(--clinic-field-table-pad-x, 8px);
	margin-bottom: 0;
	max-width: 100%;
}
/* فیلدِ مودال: عرضِ کامل (بدونِ سقفِ ۳۶۰px) برای پُرکردنِ سلولِ مودال. */
.clinic-input--modal {
	max-width: 100%;
}
.clinic-input:disabled,
.clinic-select:disabled,
.clinic-textarea:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--clinic-gray-100);
}

/* وضعیت‌های اعتبارسنجی — حلقه با outline نه box-shadow (قراردادِ نقشِ ورودی).
 * موکاپ برای خطا فقط `border-color` دارد؛ اینجا outline هم می‌ماند تا نشانه‌ی
 * خطا در صفحه‌ی پرفیلد گم نشود. outline چیدمان را تکان نمی‌دهد. */
.clinic-input.error,
.clinic-select.error,
.clinic-textarea.error {
	border-color: var(--clinic-error);
	outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-error);
	outline-offset: var(--clinic-field-focus-offset, 1px);
	box-shadow: none;
}
.clinic-input.success,
.clinic-select.success,
.clinic-textarea.success {
	border-color: var(--clinic-success);
	outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-success);
	outline-offset: var(--clinic-field-focus-offset, 1px);
	box-shadow: none;
}

/* متن کمکی */
.clinic-help-text {
	font-size: var(--fs-xs, 12px);
	color: var(--clinic-text-secondary);
	margin-top: var(--spacing-1, 4px);
}
.clinic-help-text.error { color: var(--clinic-error); }
.clinic-help-text.success { color: var(--clinic-success); }

/* برچسب شناور (اختیاری) */
.clinic-form-floating {
	position: relative;
}
.clinic-form-floating > label {
	position: absolute;
	top: 11px;
	right: var( --clinic-space-7 );
	font-size: var(--fs-sm, 14px);
	font-weight: var(--fw-medium, 500);
	color: var(--clinic-text-secondary);
	pointer-events: none;
	transition: all 0.2s ease;
	background: var(--clinic-bg-primary);
	padding: 0 var( --clinic-space-2 );
	margin: 0;
}
.clinic-form-floating > input:focus ~ label,
.clinic-form-floating > input:not(:placeholder-shown) ~ label,
.clinic-form-floating > textarea:focus ~ label,
.clinic-form-floating > textarea:not(:placeholder-shown) ~ label,
.clinic-form-floating > select:focus ~ label {
	top: -10px;
	font-size: var(--fs-xs, 12px);
	color: var(--clinic-primary);
}

/* STEP 223-B — بلوکِ عمقِ STEP 155 (inset در rest + برجستگی در focus) حذف شد.
 * قاعده‌ی پایه‌ی بالا تنها منبعِ حالتِ فیلد است. — دلیل در بلوکِ STEP 223-B. */

/* ════════════════════════════════════════════════════════════════════════════
 * STEP 157 — یکدست‌سازیِ همه‌ی فیلدها: گوشه‌ی گرد + عمقِ inset + فونتِ Peyda.
 * یک استایلِ سراسریِ خارجی با `!important` به همه‌ی فیلدها `border-radius:7px` و
 * `font-family:'peyda-vf'` تحمیل می‌کند. اینجا فقط روی فیلدهای **پلاگینِ خودمان**
 * (کلاسِ `.clinic-*` — با تکرارِ کلاس برای specificityِ ۰،۲،۰ + `!important`) آن را
 * بازنویسی می‌کنیم؛ هیچ نشتی به فرم‌های وردپرس/سایت. همه از توکنِ CSS.
 * ════════════════════════════════════════════════════════════════════════════ */

/* تضمینِ بارگذاریِ فونتِ «پیدا» در هر زمینه‌ی CSS (علاوه بر @font-faceِ inline_css PHP).
 * مسیر نسبی به فایلِ خودمیزبان ⇒ همیشه «پیدا/loaded»، نه fallbackِ سیستمی. */
@font-face {
	font-family: 'Peyda';
	src: url('../fonts/PeydaVF.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* غلبه بر !importantِ خارجی (radius + font) — فقط فیلدهای پلاگین.
 *
 * STEP 223-B — `box-shadow: none` هم اینجا اعلام می‌شود، نه در قاعده‌ی پایه.
 * دلیل با اندازه‌گیری: هسته‌ی وردپرس `input[type="text"] { box-shadow: 0 0 0
 * transparent }` دارد و تخصصش (۰،۱،۱) از قاعده‌ی پایه‌ی فیلد (۰،۱،۰) بالاتر است
 * ⇒ وردپرس برنده می‌شد. تکرارِ کلاس (۰،۲،۰) از آن بالاتر است، پس قرارداد را
 * **خودمان** اعلام می‌کنیم نه اینکه به تصادفِ شفاف‌بودنِ سایه‌ی هسته تکیه کنیم.
 * بدونِ `!important` تازه — تخصص کافی است. */
.clinic-input.clinic-input,
.clinic-select.clinic-select,
.clinic-textarea.clinic-textarea,
.clinic-otp-input.clinic-otp-input {
	border-radius: var(--clinic-field-radius, 10px) !important;
	font-family: var(--clinic-field-font, 'peyda-vf', 'Peyda', 'Vazirmatn', Tahoma, sans-serif) !important;
	box-shadow: none;
}

/* STEP 223-B — inset رست و حلقه‌ی focusِ box-shadowِ STEP 157 حذف شدند
 * (تکرارِ همان چیزی بودند که بلوکِ STEP 155 می‌داد). قاعده‌ی پایه مسئول است. */

/* placeholderِ خوانا (≥۴٫۵:۱ روی سفید). */
.clinic-input::placeholder,
.clinic-textarea::placeholder,
.clinic-otp-input::placeholder {
	color: var(--clinic-field-placeholder, var(--clinic-text-secondary, #6B7280));
	opacity: 1;
}

/* غیرفعال: بدونِ عمق، نیمه‌شفاف. */
.clinic-input:disabled,
.clinic-select:disabled,
.clinic-textarea:disabled,
.clinic-otp-input:disabled {
	box-shadow: none;
	opacity: 0.65;
}

/* STEP 223-B — بلوکِ دومِ خطا/موفقیت (تکرارِ همان قاعده‌ی بالا با مقادیرِ fallbackِ
 * متفاوت) حذف شد. قاعده‌ی بالا با outline تنها منبع است. */

/* موبایل: شعاعِ کمی کوچک‌تر برای فشردگیِ هماهنگ (سبک‌سازیِ عمقِ موبایلِ STEP 156). */
@media (max-width: 768px) {
	:root { --clinic-field-radius: 9px; }
}

/* STEP 223-B — بلوکِ عمقِ سه‌حالته‌ی STEP 160 (hover/focus/active) کاملا حذف شد.
 * تمایزِ حالتِ فیلد از این پس فقط با **رنگِ حاشیه** (hover) و **outline**
 * (focus/خطا/موفقیت) است — همان الگوی موکاپ. سه بلوکِ رقیبِ 155/157/160 دیگر
 * وجود ندارند، پس زنجیره‌ی غلبه یک برنده‌ی روشن دارد. */

/* ════════════════════════════════════════════════════════════════════════════
 * STEP 163 — راست‌چینیِ پیش‌فرضِ فیلدهای متنیِ فارسی (با غلبه بر !importantِ خارجی).
 * فقط فیلدهای پلاگین (.clinic-input/.clinic-textarea). فیلدهایی که جهتِ خودشان را صریح
 * دارند ([dir]) یا عددی/لاتین‌اند (tel/email/number/url/inputmode عددی) و فیلدِ تاریخ
 * (.clinic-jdate) **مستثنا** می‌شوند تا اشتباهی راست‌چین نشوند. تکرارِ کلاس ⇒ specificity
 * 0,2,0؛ به‌علاوه‌ی :notها و !important ⇒ غلبه بر استایلِ سراسریِ خارجی (مثلِ STEP 157).
 * ════════════════════════════════════════════════════════════════════════════ */
.clinic-input.clinic-input:not([dir]):not([type="tel"]):not([type="email"]):not([type="number"]):not([type="url"]):not([inputmode="numeric"]):not([inputmode="tel"]):not([inputmode="decimal"]):not(.clinic-jdate),
.clinic-textarea.clinic-textarea:not([dir]) {
	direction: rtl !important;
	text-align: right !important;
}

/* فیلدهای عددی/لاتین/ایمیل/تلفن/URL: LTRِ صریح (حتی بدونِ dir در markup) تا اشتباهی
 * راست‌چینِ ارثی نشوند و ارقام/آدرس در ترتیبِ درست بمانند. dir="rtl"ِ صریح محترم می‌ماند. */
.clinic-input[type="tel"]:not([dir="rtl"]),
.clinic-input[type="email"]:not([dir="rtl"]),
.clinic-input[type="number"]:not([dir="rtl"]),
.clinic-input[type="url"]:not([dir="rtl"]),
.clinic-input[inputmode="numeric"]:not([dir="rtl"]),
.clinic-input[inputmode="tel"]:not([dir="rtl"]) {
	direction: ltr !important;
}

/* فیلدِ تاریخِ شمسی: LTR تا ارقام و اسلش‌ها مرتب نمایش داده شوند (ورودِ عددیِ STEP 163). */
.clinic-input.clinic-jdate {
	direction: ltr !important;
	text-align: right !important; /* در فرمِ RTL، شروع از راست؛ ولی ترتیبِ ارقام LTR. */
}
/* نشانِ ملایمِ تاریخِ نامعتبر (ماه/روزِ خارج از بازه هنگامِ تایپ). */
.clinic-input.clinic-jdate--invalid {
	border-color: var(--clinic-error, #D98282) !important;
	box-shadow: 0 0 0 3px var(--clinic-error-100, rgba(217, 130, 130, 0.18)) !important;
}