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/auth/components/SignupForm.tsx

@@ -3,9 +3,10 @@
  */
 
 import React, { useState } 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, Link } from '@mui/material';
 import { Button } from '../../../shared-minimal/components/Button';
 import { SignupRequest } from '../types/auth.types';
 
@@ -40,6 +41,7 @@ export const SignupForm: React.FC<SignupFormProps> = ({ onSubmit, loading }) =>
     register,
     handleSubmit,
     formState: { errors },
+    control,
   } = useForm<SignupRequest & { confirmPassword: string }>({
     resolver: zodResolver(signupSchema),
   });
@@ -141,26 +143,41 @@ export const SignupForm: React.FC<SignupFormProps> = ({ onSubmit, loading }) =>
         )}
       </div>
 
-      <div className="flex items-start min-h-[44px]">
-        <label className="flex items-start cursor-pointer">
-          <input
-            {...register('termsAccepted')}
-            type="checkbox"
-            className="w-5 h-5 mt-0.5 rounded border-silverstone text-primary-600 focus:ring-abudhabi dark:border-silverstone dark:focus:ring-abudhabi"
-            aria-label="I agree to the Terms and Conditions"
-          />
-          <span className="ml-2 text-sm text-avus">
-            I agree to the{' '}
-            <a
-              href="/docs/v2026-01-03.pdf"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-abudhabi hover:underline"
-            >
-              Terms & Conditions
-            </a>
-          </span>
-        </label>
+      <div className="min-h-[44px]">
+        <Controller
+          name="termsAccepted"
+          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 } }}
+                  inputProps={{ 'aria-label': 'I agree to the Terms and Conditions' }}
+                />
+              }
+              label={
+                <span className="text-sm text-avus">
+                  I agree to the{' '}
+                  <Link
+                    href="/docs/v2026-01-03.pdf"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    sx={{ color: 'primary.main' }}
+                  >
+                    Terms & Conditions
+                  </Link>
+                </span>
+              }
+              sx={{
+                alignItems: 'flex-start',
+                '& .MuiCheckbox-root': { pt: 0 },
+              }}
+            />
+          )}
+        />
       </div>
       {errors.termsAccepted && (
         <p className="text-sm text-red-400">{errors.termsAccepted.message}</p>