fix(appointments): center timeline card and match tauri turns layout

- Center the whole page in a max-width container; move the toolbar above the
  card and make the doctor tabs the card header (as in the tauri turns design).
- Rebuild the timeline card to match the reference: inner start/end ring-dot
  time markers, patient name / phone / «سرویس» lines, and status pill + عملیات
  on the card's left; outer marker rail with time on the right.
- Timeline rows are width-capped and centered on the page.
- Empty slots render the light-blue «افزودن نوبت +» card with a «نوبت جدید» pill.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

assets/admin/components/appointments/DoctorTabs.tsx

@@ -19,8 +19,8 @@ export default function DoctorTabs({
   const tabs: DoctorTab[] = showAll ? [{ uuid: '', name: 'همه' }, ...doctors] : doctors;
   return (
     <div style={{
-      display: 'flex', alignItems: 'center', gap: 24, padding: '4px 4px 0',
-      borderBottom: '1px solid var(--border)', overflowX: 'auto', marginBottom: 16,
+      display: 'flex', alignItems: 'center', gap: 24, padding: '8px 16px 0',
+      borderBottom: '1px solid var(--border)', overflowX: 'auto',
     }}>
       {tabs.map((d) => {
         const active = selected === d.uuid;