feat: add type-specific metadata and expiration badges to documents UX (refs #43)

- Create ExpirationBadge component with 30-day warning and expired states
- Create DocumentCardMetadata component for type-specific field display
- Update DocumentsPage to show metadata and expiration badges on cards
- Update DocumentsMobileScreen with metadata and badges (mobile variant)
- Redesign DocumentDetailPage with side-by-side layout (desktop) and
  stacked layout (mobile) showing full metadata panel
- Add 33 unit tests for new components
- Fix jest.config.ts testMatch pattern for test discovery

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

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

frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx

@@ -7,6 +7,8 @@ import { useDocumentsList } from '../hooks/useDocuments';
 import { useUploadWithProgress } from '../hooks/useUploadWithProgress';
 import { Button } from '../../../shared-minimal/components/Button';
 import { AddDocumentDialog } from '../components/AddDocumentDialog';
+import { ExpirationBadge } from '../components/ExpirationBadge';
+import { DocumentCardMetadata } from '../components/DocumentCardMetadata';
 import { useVehicles } from '../../vehicles/hooks/useVehicles';
 import { getVehicleLabel } from '../utils/vehicleLabel';
 
@@ -181,11 +183,15 @@ export const DocumentsMobileScreen: React.FC = () => {
                 return (
                 <div key={doc.id} className="border rounded-xl p-3 space-y-2">
                   <div>
-                    <div className="font-medium text-slate-800 dark:text-avus">{doc.title}</div>
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="font-medium text-slate-800 dark:text-avus">{doc.title}</span>
+                      <ExpirationBadge expirationDate={doc.expirationDate} />
+                    </div>
                     <div className="text-xs text-slate-500 dark:text-titanio">
                       {doc.documentType}
                       {isShared && ' • Shared'}
                     </div>
+                    <DocumentCardMetadata doc={doc} variant="mobile" />
                     <button
                       onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
                       className="text-xs text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center"