feat: add document edit functionality with multi-vehicle support (refs #31)

Implemented comprehensive document editing capabilities:

1. Created EditDocumentDialog component:
   - Responsive MUI Dialog with fullScreen on mobile
   - Wraps DocumentForm in edit mode
   - Proper close handlers with refetch

2. Enhanced DocumentForm to support edit mode:
   - Added mode prop ('create' | 'edit')
   - Pre-populate all fields from initialValues
   - Use useUpdateDocument hook when in edit mode
   - Multi-select for shared vehicles (insurance only)
   - Vehicle and document type disabled in edit mode
   - Optional file upload in edit mode
   - Dynamic button text (Create/Save Changes)

3. Updated DocumentDetailPage:
   - Added Edit button with proper touch targets
   - Integrated EditDocumentDialog
   - Refetch document on successful edit

Mobile-first implementation:
- All touch targets >= 44px
- Dialog goes fullScreen on mobile
- Form fields stack on mobile
- Shared vehicle checkboxes have min-h-[44px]
- Buttons use flex-wrap for mobile overflow

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/features/documents/pages/DocumentDetailPage.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
 import { isAxiosError } from 'axios';
@@ -8,6 +8,7 @@ import { useDocument } from '../hooks/useDocuments';
 import { useUploadWithProgress } from '../hooks/useUploadWithProgress';
 import { documentsApi } from '../api/documents.api';
 import { DocumentPreview } from '../components/DocumentPreview';
+import { EditDocumentDialog } from '../components/EditDocumentDialog';
 import { useVehicle, useVehicles } from '../../vehicles/hooks/useVehicles';
 import { getVehicleLabel } from '../utils/vehicleLabel';
 
@@ -15,11 +16,12 @@ export const DocumentDetailPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { isAuthenticated, isLoading: authLoading, loginWithRedirect } = useAuth0();
-  const { data: doc, isLoading, error } = useDocument(id);
+  const { data: doc, isLoading, error, refetch } = useDocument(id);
   const { data: vehicle } = useVehicle(doc?.vehicleId || '');
   const { data: vehicles } = useVehicles();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const upload = useUploadWithProgress(id!);
+  const [isEditOpen, setIsEditOpen] = useState(false);
 
   const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
 
@@ -179,9 +181,10 @@ export const DocumentDetailPage: React.FC = () => {
           <div className="pt-2">
             <DocumentPreview doc={doc} />
           </div>
-          <div className="flex gap-2 pt-2">
+          <div className="flex flex-wrap gap-2 pt-2">
             <Button onClick={handleDownload}>Download</Button>
             <Button onClick={handleUpload}>Upload/Replace</Button>
+            <Button onClick={() => setIsEditOpen(true)} variant="secondary">Edit</Button>
           </div>
           {upload.isPending && (
             <div className="text-sm text-slate-600">Uploading... {upload.progress}%</div>
@@ -195,6 +198,16 @@ export const DocumentDetailPage: React.FC = () => {
           )}
         </div>
       </Card>
+      {doc && (
+        <EditDocumentDialog
+          open={isEditOpen}
+          onClose={() => {
+            setIsEditOpen(false);
+            refetch();
+          }}
+          document={doc}
+        />
+      )}
     </div>
   );
 };