fix: standardize checkboxes to use MUI Checkbox component (refs #35)

Replace raw HTML checkboxes with MUI Checkbox wrapped in FormControlLabel
for consistent styling and theme integration across:
- DocumentForm.tsx (shared vehicles + scan maintenance checkboxes)
- VehicleForm.tsx (TCO enabled checkbox)
- SignupForm.tsx (terms acceptance checkbox)

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

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

frontend/src/features/vehicles/components/VehicleForm.tsx

@@ -3,9 +3,10 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { Checkbox, FormControlLabel } from '@mui/material';
 import { Button } from '../../../shared-minimal/components/Button';
 import { CreateVehicleRequest, Vehicle, CostInterval } from '../types/vehicles.types';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -136,6 +137,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
     watch,
     setValue,
     reset,
+    control,
   } = useForm<CreateVehicleRequest>({
     resolver: zodResolver(vehicleSchema),
     defaultValues: initialData,
@@ -948,16 +950,31 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
         </div>
 
         <div className="mt-4">
-          <label className="flex items-center gap-3 cursor-pointer min-h-[44px]">
-            <input
-              {...register('tcoEnabled')}
-              type="checkbox"
-              className="w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:bg-scuro"
-            />
-            <span className="text-sm font-medium text-gray-700 dark:text-avus">
-              Display Total Cost of Ownership on vehicle details
-            </span>
-          </label>
+          <Controller
+            name="tcoEnabled"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={field.value ?? false}
+                    onChange={(e) => field.onChange(e.target.checked)}
+                    color="primary"
+                    sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
+                  />
+                }
+                label="Display Total Cost of Ownership on vehicle details"
+                sx={{
+                  minHeight: 44,
+                  '& .MuiFormControlLabel-label': {
+                    fontSize: '0.875rem',
+                    fontWeight: 500,
+                    color: 'text.primary',
+                  },
+                }}
+              />
+            )}
+          />
           <p className="text-xs text-gray-500 dark:text-titanio mt-1 ml-8">
             When enabled, shows lifetime cost and cost per mile/km on the vehicle detail page.
           </p>