feat: enhance online booking toggle UI and improve booking window controls

assets/admin/pages/DoctorDetailPage.tsx

@@ -12,7 +12,7 @@ import {
   BuildingOfficeIcon, MapPinIcon, AcademicCapIcon, UserIcon,
   PlusIcon, CameraIcon, ChevronDownIcon, ChevronRightIcon, ChevronLeftIcon,
   CheckCircleIcon, XMarkIcon, ExclamationTriangleIcon,
-  HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon,
+  HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon, GlobeAltIcon,
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
 import { toast } from 'sonner';
@@ -1312,40 +1312,55 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
       )}
 
       {/* ─ نوبت‌دهی آنلاین */}
-      <div className="mb-3 p-3 rounded-xl border border-slate-200 dark:border-gray-700 space-y-3">
+      <div className="mb-3 rounded-xl border border-slate-200 dark:border-gray-700 overflow-hidden">
-        <label className="flex items-center justify-between gap-3 cursor-pointer">
+        {/* header + toggle */}
+        <label className="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer bg-slate-50 dark:bg-gray-800/50">
+          <div className="flex items-center gap-2">
+            <GlobeAltIcon className="w-4 h-4 text-slate-500 dark:text-slate-400 shrink-0" />
             <span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span>
+          </div>
+          <span className="relative inline-flex shrink-0">
             <input
               type="checkbox"
+              className="peer sr-only"
               checked={meta.online_booking_enabled}
               onChange={(e) => setMeta(m => ({ ...m, online_booking_enabled: e.target.checked }))}
             />
+            <span className="w-10 h-6 rounded-full bg-slate-300 dark:bg-gray-600 transition-colors peer-checked:bg-emerald-500" />
+            <span className="absolute top-0.5 right-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform peer-checked:-translate-x-4" />
+          </span>
         </label>
-        <div className="flex items-center gap-2">
+
+        {/* booking window control */}
+        <div className={`px-4 py-3 transition-opacity ${meta.online_booking_enabled ? '' : 'opacity-50 pointer-events-none'}`}>
+          <div className="flex flex-wrap items-center gap-2">
             <span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
+            <div className="flex items-stretch rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900">
               <input
                 type="number"
                 min={1}
                 value={meta.booking_window_value}
                 disabled={!meta.online_booking_enabled}
                 onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))}
-            className="input w-16 text-center"
+                className="w-14 text-center text-sm bg-transparent border-0 focus:outline-none focus:ring-0 px-2 py-1.5"
               />
               <select
                 value={meta.booking_window_unit}
                 disabled={!meta.online_booking_enabled}
                 onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))}
-            className="input"
+                className="text-sm bg-slate-50 dark:bg-gray-800 border-0 border-r border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-0 px-2 py-1.5"
               >
                 <option value="week">هفته</option>
                 <option value="month">ماه</option>
               </select>
+            </div>
             <span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
           </div>
-        <p className="text-xs text-slate-400 dark:text-slate-500">
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-2 leading-relaxed">
             بیمار فقط تا این بازه می‌تواند آنلاین نوبت بگیرد؛ روزهای بعد از آن روی تقویم غیرفعال‌اند.
           </p>
         </div>
+      </div>
 
       {SCHEDULE_DAYS.map(day => {
         const sessions       = scheduleMap[day.key]?.sessions ?? [];