feat: enhance DoctorFormPage with searchable specialties and improved UI components

- Refactored DoctorFormPage to use Controller from react-hook-form for better form handling.
- Added a new Field component for consistent input styling and error handling.
- Implemented a SpecialtyPicker component with improved selection logic for specialties.
- Updated the layout and styling of the form sections for better user experience.
- Integrated SearchableSelect for selecting specialties and roles in DoctorsPage and UsersPage.
- Added createClinic API endpoint to handle clinic creation with validation for mobile and name fields.

assets/admin/pages/DoctorFormPage.tsx

@@ -1,20 +1,24 @@
 import React, { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useQuery, useMutation } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { ArrowRightIcon, UserPlusIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowRightIcon, UserPlusIcon, PhoneIcon,
+  IdentificationIcon, AcademicCapIcon, DocumentTextIcon,
+  HeartIcon, ChevronLeftIcon, CheckIcon,
+} from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
-import { formatNumber } from '../lib/utils';
+import SearchableSelect from '../components/ui/SearchableSelect';
 
-// ── Types ────────────────────────────────────────────────────────────────
+// ── Types ────────────────────────────────────────────────────────────────────
 
 interface SpecialtyOption { id: number; uuid: string; name: string; parent_id: number | null }
 
-// ── Schema ───────────────────────────────────────────────────────────────
+// ── Schema ───────────────────────────────────────────────────────────────────
 
 const schema = z.object({
   mobile:              z.string().min(10, 'شماره موبایل معتبر نیست').max(15),
@@ -23,25 +27,49 @@ const schema = z.object({
   degree:              z.string().optional().or(z.literal('')),
   medical_system_code: z.string().max(30).optional().or(z.literal('')),
   info:                z.string().max(2000).optional().or(z.literal('')),
-  specialties:         z.array(z.number()).optional(),
 });
 type FormValues = z.infer<typeof schema>;
 
-// ── Constants ─────────────────────────────────────────────────────────────
+// ── Constants ─────────────────────────────────────────────────────────────────
 
 const DEGREE_OPTIONS = [
-  { value: 'general',           label: 'عمومی' },
+  { value: 'general',           label: 'پزشک عمومی' },
   { value: 'specialist',        label: 'متخصص' },
   { value: 'expert',            label: 'فوق تخصص' },
   { value: 'subspecialistplus', label: 'فلوشیپ' },
 ];
 
 const GENDER_OPTIONS = [
-  { value: 'man',   label: 'مرد' },
-  { value: 'woman', label: 'زن' },
+  { value: 'man',   label: 'مرد',  icon: '♂' },
+  { value: 'woman', label: 'زن',   icon: '♀' },
 ];
 
-// ── Specialty Picker ──────────────────────────────────────────────────────
+// ── Field ─────────────────────────────────────────────────────────────────────
+
+function Field({ label, required, error, hint, children }: {
+  label: string; required?: boolean; error?: string; hint?: string; children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <label className="cp-label">
+        {label}{required && <span style={{ color: 'var(--danger)', marginRight: 2 }}>*</span>}
+      </label>
+      {children}
+      {hint && !error && <p style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 5 }}>{hint}</p>}
+      {error && <p style={{ fontSize: 12, color: 'var(--danger)', marginTop: 5 }}>{error}</p>}
+    </div>
+  );
+}
+
+// ── Specialty Picker ──────────────────────────────────────────────────────────
+//
+// منطق انتخاب:
+//   • تخصص با فرزند  → کلیک روی فرزند: parent_id + child_id هر دو ذخیره می‌شوند
+//                       در هر گروه فقط یک فرزند قابل انتخاب است (جایگزین می‌شود)
+//   • تخصص بدون فرزند → فقط خودش انتخاب می‌شود
+//   • حذف chip: parent + child هر دو پاک می‌شوند
+
+interface SelectedEntry { parentId: number | null; childId: number }
 
 function SpecialtyPicker({ selected, onChange, specialties }: {
   selected: number[]; onChange: (ids: number[]) => void;
@@ -49,90 +77,170 @@ function SpecialtyPicker({ selected, onChange, specialties }: {
 }) {
   const [activeParentId, setActiveParentId] = useState<number | null>(null);
 
-  const parents = useMemo(
-    () => specialties.filter(s => s.parent_id === null),
-    [specialties]
-  );
+  const parents  = useMemo(() => specialties.filter(s => s.parent_id === null), [specialties]);
+  const childMap = useMemo(() => {
+    const m: Record<number, SpecialtyOption[]> = {};
+    specialties.forEach(s => {
+      if (s.parent_id !== null) {
+        if (!m[s.parent_id]) m[s.parent_id] = [];
+        m[s.parent_id].push(s);
+      }
+    });
+    return m;
+  }, [specialties]);
 
-  const children = useMemo(
-    () => activeParentId !== null ? specialties.filter(s => s.parent_id === activeParentId) : [],
-    [specialties, activeParentId]
-  );
+  const activeChildren = activeParentId !== null ? (childMap[activeParentId] ?? []) : [];
 
-  const toggle = (id: number) =>
-    onChange(selected.includes(id) ? selected.filter(x => x !== id) : [...selected, id]);
+  // برای هر گروه، child انتخاب‌شده را پیدا می‌کند
+  const selectedChildOfParent = (parentId: number): number | null => {
+    const kids = childMap[parentId] ?? [];
+    return kids.find(k => selected.includes(k.id))?.id ?? null;
+  };
+
+  // آیا یک والد بدون فرزند انتخاب شده (مستقیم)
+  const isRootSelected = (parentId: number): boolean =>
+    !(childMap[parentId]?.length) && selected.includes(parentId);
+
+  const selectChild = (child: SpecialtyOption) => {
+    const parentId = child.parent_id!;
+    if (selected.includes(child.id)) {
+      onChange([]);
+    } else {
+      onChange([parentId, child.id]);
+    }
+  };
+
+  const selectRoot = (root: SpecialtyOption) => {
+    if (selected.includes(root.id)) {
+      onChange([]);
+    } else {
+      setActiveParentId(null);
+      onChange([root.id]);
+    }
+  };
+
+  const removeEntry = () => { onChange([]); setActiveParentId(null); };
+
+  // ساخت chip ها: از selected فقط child‌ها + root‌های مستقیم را نمایش بده
+  const chips: SelectedEntry[] = useMemo(() => {
+    return selected
+      .map(id => {
+        const s = specialties.find(x => x.id === id);
+        if (!s) return null;
+        if (s.parent_id !== null) return { parentId: s.parent_id, childId: s.id };
+        // اگر parent است و child‌ای از آن انتخاب نشده → root مستقیم
+        const hasSelectedChild = (childMap[s.id] ?? []).some(k => selected.includes(k.id));
+        if (!hasSelectedChild && !(childMap[s.id]?.length)) return { parentId: null, childId: s.id };
+        return null; // parent‌هایی که فرزند دارند و فرزندشان انتخاب شده: در chip فرزند نمایش داده می‌شوند
+      })
+      .filter(Boolean) as SelectedEntry[];
+  }, [selected, specialties, childMap]);
 
   return (
-    <div className="border border-slate-200 dark:border-gray-700 rounded-xl overflow-hidden">
+    <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--r)', overflow: 'hidden' }}>
+
       {/* Selected chips */}
-      {selected.length > 0 && (
-        <div className="px-3 py-2 border-b border-slate-100 dark:border-gray-700 flex flex-wrap gap-1 bg-slate-50 dark:bg-gray-800/40">
-          {selected.map(id => {
-            const s = specialties.find(x => x.id === id);
-            if (!s) return null;
+      {chips.length > 0 && (
+        <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', background: 'var(--surface-2)', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+          {chips.map(({ parentId, childId }) => {
+            const child  = specialties.find(x => x.id === childId);
+            const parent = parentId !== null ? specialties.find(x => x.id === parentId) : null;
+            if (!child) return null;
+            const label = parent ? `${parent.name} — ${child.name}` : child.name;
             return (
-              <span key={id} className="inline-flex items-center gap-1 text-xs px-2.5 py-0.5 rounded-full bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300">
-                {s.name}
-                <button type="button" onClick={() => toggle(id)} className="hover:text-primary-900 dark:hover:text-primary-100 leading-none">×</button>
+              <span key={childId} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, padding: '3px 10px 3px 6px', borderRadius: 999, background: 'var(--primary-soft2)', color: 'var(--primary-700)', fontWeight: 600 }}>
+                {label}
+                <button type="button" onClick={() => removeEntry()}
+                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, borderRadius: '50%', background: 'var(--primary-soft)', border: 'none', cursor: 'pointer', color: 'var(--primary-600)', padding: 0, fontSize: 12, fontWeight: 700 }}>×</button>
               </span>
             );
           })}
         </div>
       )}
 
-      <div className="flex" style={{ minHeight: 200 }}>
+      <div style={{ display: 'flex', minHeight: 240 }}>
         {/* Parents column */}
-        <div className="w-1/2 border-l border-slate-100 dark:border-gray-700 overflow-y-auto max-h-64">
-          <div className="px-3 py-1.5 text-xs font-semibold text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-gray-800/60 border-b border-slate-100 dark:border-gray-700">
-            گروه تخصص
+        <div style={{ width: '45%', borderLeft: '1px solid var(--border)', overflowY: 'auto', maxHeight: 300 }}>
+          <div style={{ padding: '8px 14px', fontSize: 11, fontWeight: 700, color: 'var(--text-3)', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)', letterSpacing: '.2px' }}>
+            گروه تخصصی
           </div>
-          {parents.map(p => (
-            <button
-              key={p.id}
-              type="button"
-              onClick={() => setActiveParentId(p.id)}
-              className="w-full text-right flex items-center gap-2 px-3 py-2 text-sm transition-colors"
-              style={{
-                background: activeParentId === p.id ? 'var(--primary-50, #eff6ff)' : 'transparent',
-                color: activeParentId === p.id ? 'var(--primary-700, #1d4ed8)' : undefined,
-                fontWeight: activeParentId === p.id ? 600 : 400,
-              }}
-            >
-              <span className="flex-1">{p.name}</span>
-              {specialties.some(s => s.parent_id === p.id && selected.includes(s.id)) && (
-                <span className="w-2 h-2 rounded-full bg-primary-500 shrink-0" />
-              )}
-              <span className="text-slate-300 dark:text-slate-600 text-xs">›</span>
-            </button>
-          ))}
+          {parents.map(p => {
+            const hasChildren  = (childMap[p.id]?.length ?? 0) > 0;
+            const childSel     = hasChildren ? selectedChildOfParent(p.id) : null;
+            const rootSel      = !hasChildren && isRootSelected(p.id);
+            const isMarked     = childSel !== null || rootSel;
+            const isActive     = activeParentId === p.id;
+            const hasSelection = selected.length > 0;
+            const isDisabled   = hasSelection && !isMarked;
+            return (
+              <button
+                key={p.id}
+                type="button"
+                disabled={isDisabled}
+                onClick={() => hasChildren ? setActiveParentId(p.id) : selectRoot(p)}
+                style={{
+                  width: '100%', textAlign: 'right', display: 'flex', alignItems: 'center', gap: 8,
+                  padding: '10px 14px', fontSize: 13, border: 'none',
+                  cursor: isDisabled ? 'not-allowed' : 'pointer',
+                  opacity: isDisabled ? 0.35 : 1,
+                  background: isActive ? 'var(--primary-soft)' : rootSel ? 'var(--primary-soft)' : 'transparent',
+                  color: (isActive || rootSel) ? 'var(--primary-700)' : 'var(--text)',
+                  fontWeight: (isActive || rootSel) ? 700 : 400,
+                  borderRight: (isActive || rootSel) ? '3px solid var(--primary)' : '3px solid transparent',
+                  transition: 'all .14s',
+                }}
+              >
+                <span style={{ flex: 1, lineHeight: 1.4 }}>{p.name}</span>
+                {isMarked && !rootSel && (
+                  <span style={{ fontSize: 11, fontWeight: 700, background: 'var(--primary)', color: 'var(--on-primary)', borderRadius: 999, padding: '1px 7px', minWidth: 20, textAlign: 'center' }}>
+                    ✓
+                  </span>
+                )}
+                {rootSel && <CheckIcon style={{ width: 14, height: 14, color: 'var(--primary)', flexShrink: 0 }} />}
+                {hasChildren && <ChevronLeftIcon style={{ width: 14, height: 14, color: 'var(--text-3)', flexShrink: 0 }} />}
+              </button>
+            );
+          })}
         </div>
 
         {/* Children column */}
-        <div className="w-1/2 overflow-y-auto max-h-64">
+        <div style={{ flex: 1, overflowY: 'auto', maxHeight: 300 }}>
           {activeParentId === null ? (
-            <div className="flex items-center justify-center h-full text-xs text-slate-400 dark:text-slate-500 text-center px-4">
-              یک گروه تخصص را از سمت راست انتخاب کنید
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--text-3)', fontSize: 13, gap: 8, padding: 24 }}>
+              <HeartIcon style={{ width: 32, height: 32, opacity: .3 }} />
+              <span>یک گروه تخصصی انتخاب کنید</span>
             </div>
-          ) : children.length === 0 ? (
-            <div className="flex items-center justify-center h-full text-xs text-slate-400 dark:text-slate-500">
+          ) : activeChildren.length === 0 ? (
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--text-3)', fontSize: 13 }}>
               زیرمجموعه‌ای یافت نشد
             </div>
           ) : (
             <>
-              <div className="px-3 py-1.5 text-xs font-semibold text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-gray-800/60 border-b border-slate-100 dark:border-gray-700">
-                انتخاب تخصص
+              <div style={{ padding: '8px 14px', fontSize: 11, fontWeight: 700, color: 'var(--text-3)', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)', letterSpacing: '.2px' }}>
+                انتخاب تخصص — یک مورد
               </div>
-              {children.map(s => (
-                <label key={s.id} className="flex items-center gap-2.5 px-3 py-2 hover:bg-slate-50 dark:hover:bg-gray-800 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={selected.includes(s.id)}
-                    onChange={() => toggle(s.id)}
-                    className="rounded border-slate-300 dark:border-gray-600 text-primary-600 shrink-0"
-                  />
-                  <span className="text-sm text-slate-700 dark:text-slate-300">{s.name}</span>
-                </label>
-              ))}
+              {activeChildren.map(s => {
+                const checked = selected.includes(s.id);
+                return (
+                  <button
+                    key={s.id}
+                    type="button"
+                    onClick={() => selectChild(s)}
+                    style={{
+                      width: '100%', textAlign: 'right', display: 'flex', alignItems: 'center', gap: 10,
+                      padding: '10px 14px', border: 'none', cursor: 'pointer',
+                      background: checked ? 'var(--primary-soft)' : 'transparent',
+                      borderBottom: '1px solid var(--border)',
+                      transition: 'background .12s',
+                    }}
+                  >
+                    <div style={{ width: 18, height: 18, borderRadius: '50%', border: `2px solid ${checked ? 'var(--primary)' : 'var(--border-2)'}`, background: checked ? 'var(--primary)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all .12s' }}>
+                      {checked && <div style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--on-primary)' }} />}
+                    </div>
+                    <span style={{ fontSize: 13, color: checked ? 'var(--primary-700)' : 'var(--text)', fontWeight: checked ? 600 : 400 }}>{s.name}</span>
+                  </button>
+                );
+              })}
             </>
           )}
         </div>
@@ -141,11 +249,12 @@ function SpecialtyPicker({ selected, onChange, specialties }: {
   );
 }
 
-// ── Page ──────────────────────────────────────────────────────────────────
+// ── Page ──────────────────────────────────────────────────────────────────────
 
 export default function DoctorFormPage() {
   const navigate = useNavigate();
   const [selectedSpecialties, setSelectedSpecialties] = useState<number[]>([]);
+  const [gender, setGender] = useState<'man' | 'woman' | ''>('');
 
   const specialtiesQ = useQuery({
     queryKey: ['specialties-list'],
@@ -155,12 +264,11 @@ export default function DoctorFormPage() {
 
   const specialties: SpecialtyOption[] = useMemo(
     () => (specialtiesQ.data?.data as any)?.data ?? specialtiesQ.data?.data ?? [],
-    [specialtiesQ.data]
+    [specialtiesQ.data],
   );
 
-  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
+  const { register, handleSubmit, control, formState: { errors } } = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: { specialties: [] },
   });
 
   const createMut = useMutation({
@@ -168,7 +276,7 @@ export default function DoctorFormPage() {
       api.post<ApiResponse<{ uuid: string }>>('/api/v1/admin/doctors', {
         mobile:              values.mobile,
         name:                values.name,
-        gender:              values.gender || undefined,
+        gender:              gender || undefined,
         degree:              values.degree || undefined,
         medical_system_code: values.medical_system_code || undefined,
         info:                values.info || undefined,
@@ -183,158 +291,144 @@ export default function DoctorFormPage() {
     onError: (e: Error) => toast.error(e.message),
   });
 
-  const onSubmit = (values: FormValues) => createMut.mutate({ ...values, specialties: selectedSpecialties });
+  const onSubmit = (values: FormValues) => createMut.mutate(values);
 
   return (
-    <div className="animate-slide-up max-w-3xl mx-auto space-y-5">
+    <div style={{ maxWidth: 680, margin: '0 auto' }} className="animate-slide-up">
 
       {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
-        <button onClick={() => navigate('/admin/doctors')}
-          className="flex items-center gap-1.5 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
-          <ArrowRightIcon className="w-4 h-4" />پزشکان
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--text-3)', marginBottom: 20 }}>
+        <button onClick={() => navigate('/admin/doctors')} style={{ display: 'flex', alignItems: 'center', gap: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', fontSize: 13, padding: 0 }}>
+          <ArrowRightIcon style={{ width: 14, height: 14 }} />
+          پزشکان
         </button>
         <span>/</span>
-        <span className="text-slate-700 dark:text-slate-300 font-medium">افزودن پزشک جدید</span>
+        <span style={{ color: 'var(--text-2)', fontWeight: 600 }}>افزودن پزشک جدید</span>
       </div>
 
-      {/* Header card */}
-      <div className="cp-card p-6 flex items-center gap-4">
-        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center shadow-lg">
-          <UserPlusIcon className="w-6 h-6 text-white" />
-        </div>
-        <div>
-          <h1 className="text-lg font-bold text-slate-900 dark:text-slate-50">افزودن پزشک جدید</h1>
-          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
-            اطلاعات پزشک را وارد کنید. اگر شماره موبایل از قبل در سیستم باشد، پروفایل پزشک به همان کاربر متصل می‌شود.
-          </p>
-        </div>
-      </div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
 
-      {/* Form */}
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-
-        {/* Account info */}
-        <div className="cp-card p-6 space-y-4">
-          <h2 className="text-sm font-semibold text-slate-700 dark:text-slate-300 border-b border-slate-100 dark:border-gray-700 pb-3">
-            اطلاعات حساب
-          </h2>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {/* Mobile */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
-                شماره موبایل <span className="text-red-500">*</span>
-              </label>
-              <input type="text" dir="ltr"
-                className={`cp-input text-left ${errors.mobile ? 'border-red-400 focus:ring-red-400' : ''}`}
-                placeholder="09xxxxxxxxx"
-                {...register('mobile')} />
-              {errors.mobile && <p className="text-xs text-red-500 mt-1">{errors.mobile.message}</p>}
-              <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
-                اگر کاربر با این شماره وجود داشته باشد، پروفایل پزشک به آن متصل می‌شود
-              </p>
-            </div>
-
-            {/* Name */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
-                نام کامل <span className="text-red-500">*</span>
-              </label>
-              <input type="text"
-                className={`cp-input ${errors.name ? 'border-red-400 focus:ring-red-400' : ''}`}
-                placeholder="دکتر محمد احمدی"
-                {...register('name')} />
-              {errors.name && <p className="text-xs text-red-500 mt-1">{errors.name.message}</p>}
-            </div>
-          </div>
-        </div>
-
-        {/* Professional info */}
-        <div className="cp-card p-6 space-y-4">
-          <h2 className="text-sm font-semibold text-slate-700 dark:text-slate-300 border-b border-slate-100 dark:border-gray-700 pb-3">
-            اطلاعات حرفه‌ای
-          </h2>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {/* Gender */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">جنسیت</label>
-              <select className="cp-select h-11" {...register('gender')}>
-                <option value="">انتخاب کنید</option>
-                {GENDER_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
-              </select>
-            </div>
-
-            {/* Degree */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">درجه تحصیلی</label>
-              <select className="cp-select h-11" {...register('degree')}>
-                <option value="">انتخاب کنید</option>
-                {DEGREE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
-              </select>
-            </div>
-
-            {/* Medical system code */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">کد نظام پزشکی</label>
-              <input type="text" dir="ltr"
-                className="cp-input text-left"
-                placeholder="123456"
-                {...register('medical_system_code')} />
+          {/* ── Section: اطلاعات حساب ──────────────────────────────── */}
+          <div className="cp-card" style={{ padding: 'var(--card-pad)' }}>
+            <SectionHeader icon={<PhoneIcon style={{ width: 16, height: 16 }} />} title="اطلاعات حساب" />
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
+              <Field label="شماره موبایل" required error={errors.mobile?.message} hint="اگر کاربر با این شماره وجود دارد پروفایل به او متصل می‌شود">
+                <input type="tel" dir="ltr" className="cp-input" placeholder="09xxxxxxxxx" {...register('mobile')}
+                  style={errors.mobile ? { borderColor: 'var(--danger)' } : {}} />
+              </Field>
+              <Field label="نام کامل" required error={errors.name?.message}>
+                <input type="text" className="cp-input" placeholder="دکتر ..." {...register('name')}
+                  style={errors.name ? { borderColor: 'var(--danger)' } : {}} />
+              </Field>
             </div>
           </div>
 
-          {/* Bio */}
-          <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">بیوگرافی</label>
-            <textarea rows={4}
-              className="cp-input resize-none"
-              placeholder="معرفی کوتاهی از پزشک..."
-              {...register('info')} />
-          </div>
-        </div>
+          {/* ── Section: اطلاعات حرفه‌ای ────────────────────────────── */}
+          <div className="cp-card" style={{ padding: 'var(--card-pad)' }}>
+            <SectionHeader icon={<IdentificationIcon style={{ width: 16, height: 16 }} />} title="اطلاعات حرفه‌ای" />
 
-        {/* Specialties */}
-        <div className="cp-card p-6 space-y-3">
-          <h2 className="text-sm font-semibold text-slate-700 dark:text-slate-300 border-b border-slate-100 dark:border-gray-700 pb-3">
-            تخصص‌ها
-            {selectedSpecialties.length > 0 && (
-              <span className="text-xs font-normal text-primary-600 dark:text-primary-400 mr-2">
-                {formatNumber(selectedSpecialties.length)} انتخاب شده
-              </span>
-            )}
-          </h2>
-          {specialtiesQ.isLoading ? (
-            <div className="h-32 rounded-xl skeleton" />
-          ) : (
-            <SpecialtyPicker
-              selected={selectedSpecialties}
-              onChange={setSelectedSpecialties}
-              specialties={specialties}
+            {/* Gender toggle */}
+            <div style={{ marginBottom: 14 }}>
+              <label className="cp-label">جنسیت</label>
+              <div style={{ display: 'flex', gap: 8 }}>
+                {GENDER_OPTIONS.map(o => (
+                  <button key={o.value} type="button" onClick={() => setGender(gender === o.value ? '' : o.value as 'man' | 'woman')}
+                    style={{
+                      flex: 1, height: 42, borderRadius: 'var(--r-sm)', border: `1.5px solid ${gender === o.value ? 'var(--primary)' : 'var(--border)'}`,
+                      background: gender === o.value ? 'var(--primary-soft)' : 'var(--surface)',
+                      color: gender === o.value ? 'var(--primary-700)' : 'var(--text-2)',
+                      fontWeight: gender === o.value ? 700 : 400, fontSize: 14, cursor: 'pointer', transition: 'all .14s',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+                    }}>
+                    <span style={{ fontSize: 16 }}>{o.icon}</span>{o.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
+              <Field label="درجه تحصیلی">
+                <Controller name="degree" control={control} render={({ field }) => (
+                  <SearchableSelect
+                    options={DEGREE_OPTIONS}
+                    value={field.value ?? null}
+                    onChange={(v) => field.onChange(v ?? '')}
+                    placeholder="انتخاب کنید"
+                    isClearable
+                  />
+                )} />
+              </Field>
+              <Field label="کد نظام پزشکی">
+                <input type="text" dir="ltr" className="cp-input" placeholder="123456" {...register('medical_system_code')} />
+              </Field>
+            </div>
+
+            <div style={{ marginTop: 14 }}>
+              <Field label="بیوگرافی">
+                <textarea rows={3} className="cp-textarea" placeholder="معرفی کوتاهی از پزشک..." {...register('info')} style={{ resize: 'none' }} />
+              </Field>
+            </div>
+          </div>
+
+          {/* ── Section: تخصص‌ها ────────────────────────────────────── */}
+          <div className="cp-card" style={{ padding: 'var(--card-pad)' }}>
+            <SectionHeader
+              icon={<AcademicCapIcon style={{ width: 16, height: 16 }} />}
+              title="تخصص‌ها"
+              badge={selectedSpecialties.length > 0 ? `${selectedSpecialties.length} انتخاب شده` : undefined}
             />
-          )}
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center justify-end gap-3 pb-4">
-          <button type="button" onClick={() => navigate('/admin/doctors')} className="cp-btn-secondary px-6">
-            لغو
-          </button>
-          <button type="submit" disabled={createMut.isPending} className="cp-btn-primary px-8">
-            {createMut.isPending ? (
-              <span className="flex items-center gap-2">
-                <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                در حال ذخیره...
-              </span>
+            {specialtiesQ.isLoading ? (
+              <div style={{ height: 200, borderRadius: 'var(--r)', overflow: 'hidden' }} className="skeleton" />
             ) : (
-              <span className="flex items-center gap-2">
-                <UserPlusIcon className="w-4 h-4" />افزودن پزشک
-              </span>
+              <SpecialtyPicker
+                selected={selectedSpecialties}
+                onChange={setSelectedSpecialties}
+                specialties={specialties}
+              />
             )}
-          </button>
+          </div>
+
+          {/* ── Actions ─────────────────────────────────────────────── */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 10, paddingBottom: 8 }}>
+            <button type="button" onClick={() => navigate('/admin/doctors')} className="cp-btn-secondary">
+              انصراف
+            </button>
+            <button type="submit" disabled={createMut.isPending} className="cp-btn-primary" style={{ minWidth: 140 }}>
+              {createMut.isPending ? (
+                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <span style={{ width: 16, height: 16, border: '2px solid rgba(255,255,255,.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin .7s linear infinite', flexShrink: 0 }} />
+                  در حال ذخیره...
+                </span>
+              ) : (
+                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <UserPlusIcon style={{ width: 16, height: 16 }} />
+                  افزودن پزشک
+                </span>
+              )}
+            </button>
+          </div>
+
         </div>
       </form>
     </div>
   );
 }
+
+// ── Section Header ────────────────────────────────────────────────────────────
+
+function SectionHeader({ icon, title, badge }: { icon: React.ReactNode; title: string; badge?: string }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, paddingBottom: 14, borderBottom: '1px solid var(--border)' }}>
+      <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--primary-soft)', color: 'var(--primary-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+        {icon}
+      </div>
+      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>{title}</span>
+      {badge && (
+        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--primary-700)', background: 'var(--primary-soft)', padding: '2px 10px', borderRadius: 999 }}>
+          {badge}
+        </span>
+      )}
+    </div>
+  );
+}