feat: dark / light theme almost complete

frontend/src/features/documents/components/DocumentForm.tsx

@@ -160,7 +160,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
         <div className="flex flex-col">
           <label className="text-sm font-medium text-slate-700 mb-1">Vehicle</label>
           <select
-            className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             value={vehicleID}
             onChange={(e) => setVehicleID(e.target.value)}
             required
@@ -175,7 +175,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
         <div className="flex flex-col">
           <label className="text-sm font-medium text-slate-700 mb-1">Document Type</label>
           <select
-            className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             value={documentType}
             onChange={(e) => setDocumentType(e.target.value as DocumentType)}
           >
@@ -188,7 +188,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
         <div className="flex flex-col md:col-span-2">
           <label className="text-sm font-medium text-slate-700 mb-1">Title</label>
           <input
-            className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             type="text"
             value={title}
             placeholder={
@@ -206,7 +206,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">Insurance company</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="text"
                 value={insuranceCompany}
                 onChange={(e) => setInsuranceCompany(e.target.value)}
@@ -215,7 +215,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">Policy number</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="text"
                 value={policyNumber}
                 onChange={(e) => setPolicyNumber(e.target.value)}
@@ -262,7 +262,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">Bodily Injury (Person)</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="text"
                 placeholder="$25,000"
                 value={bodilyInjuryPerson}
@@ -272,7 +272,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">Bodily Injury (Incident)</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="text"
                 placeholder="$50,000"
                 value={bodilyInjuryIncident}
@@ -283,7 +283,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">Property Damage</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="text"
                 placeholder="$25,000"
                 value={propertyDamage}
@@ -293,7 +293,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">Premium</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="number"
                 step="0.01"
                 placeholder="0.00"
@@ -309,7 +309,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col">
               <label className="text-sm font-medium text-slate-700 mb-1">License Plate</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="text"
                 value={licensePlate}
                 onChange={(e) => setLicensePlate(e.target.value)}
@@ -336,7 +336,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             <div className="flex flex-col md:col-span-2">
               <label className="text-sm font-medium text-slate-700 mb-1">Cost</label>
               <input
-                className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                 type="number"
                 step="0.01"
                 placeholder="0.00"
@@ -354,7 +354,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
                 type="checkbox"
                 checked={scanForMaintenance}
                 onChange={(e) => setScanForMaintenance(e.target.checked)}
-                className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi"
               />
               <span className="ml-2 text-sm font-medium text-slate-700">
                 Scan for Maintenance Schedule
@@ -367,7 +367,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
         <div className="flex flex-col md:col-span-2">
           <label className="text-sm font-medium text-slate-700 mb-1">Notes</label>
           <textarea
-            className="min-h-[88px] rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            className="min-h-[88px] rounded-lg border px-3 py-2 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             value={notes}
             onChange={(e) => setNotes(e.target.value)}
           />
@@ -376,7 +376,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
         <div className="flex flex-col md:col-span-2">
           <label className="text-sm font-medium text-slate-700 mb-1">Upload image/PDF</label>
           <input
-            className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            className="h-11 min-h-[44px] rounded-lg border px-3 py-2 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-500/10 file:text-primary-600 dark:file:bg-abudhabi/20 dark:file:text-abudhabi"
             type="file"
             accept="image/jpeg,image/png,application/pdf"
             onChange={(e) => setFile(e.target.files?.[0] || null)}

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

@@ -416,7 +416,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
         </p>
         <input
           {...register('vin')}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 text-base"
+          className="w-full px-3 py-2 border rounded-md text-base bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
           placeholder="Enter 17-character VIN (optional if License Plate provided)"
           style={{ fontSize: '16px' }}
         />
@@ -438,7 +438,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
               const year = parseInt(e.target.value);
               setValue('year', year);
             }}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             style={{ fontSize: '16px' }}
           >
             <option value="">Select Year</option>
@@ -461,7 +461,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
               const make = e.target.value;
               setValue('make', make);
             }}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             disabled={loadingDropdowns || !watchedYear || makes.length === 0}
             style={{ fontSize: '16px' }}
           >
@@ -493,7 +493,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
               const model = e.target.value;
               setValue('model', model);
             }}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             disabled={loadingDropdowns || !watchedMake || models.length === 0}
             style={{ fontSize: '16px' }}
           >
@@ -528,7 +528,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
               const trim = e.target.value;
               setValue('trimLevel', trim);
             }}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             disabled={loadingDropdowns || !watchedModel || trims.length === 0}
             style={{ fontSize: '16px' }}
           >
@@ -556,7 +556,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
           </label>
           <select
             {...register('engine')}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             disabled={loadingDropdowns || !selectedTrim || engines.length === 0}
             style={{ fontSize: '16px' }}
           >
@@ -584,7 +584,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
           </label>
           <select
             {...register('transmission')}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             disabled={loadingDropdowns || !selectedTrim || transmissions.length === 0}
             style={{ fontSize: '16px' }}
           >
@@ -612,7 +612,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
         </label>
         <input
           {...register('nickname')}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+          className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
           placeholder="e.g., Family Car"
           style={{ fontSize: '16px' }}
         />
@@ -625,7 +625,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
           </label>
           <input
             {...register('color')}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             placeholder="e.g., Blue"
             style={{ fontSize: '16px' }}
           />
@@ -637,7 +637,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
           </label>
           <input
             {...register('licensePlate')}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             placeholder="e.g., ABC-123 (required if VIN omitted)"
             style={{ fontSize: '16px' }}
           />
@@ -655,7 +655,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
           {...register('odometerReading', { valueAsNumber: true })}
           type="number"
           inputMode="numeric"
-          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
+          className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
           placeholder="e.g., 50000"
           style={{ fontSize: '16px' }}
         />

frontend/src/features/vehicles/pages/VehicleDetailPage.tsx

@@ -22,9 +22,9 @@ import { FuelLogForm } from '../../fuel-logs/components/FuelLogForm';
 // Unit conversions now handled by backend
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
 
-const DetailField: React.FC<{ 
-  label: string; 
-  value?: string | number; 
+const DetailField: React.FC<{
+  label: string;
+  value?: string | number;
   isRequired?: boolean;
   className?: string;
 }> = ({ label, value, isRequired, className = "" }) => (