feat: navigation and UX improvements complete

frontend/src/features/fuel-logs/components/FuelLogForm.tsx

@@ -187,12 +187,13 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
                 fullWidth
                 InputProps={{
                   readOnly: true,
-                  sx: {
-                    backgroundColor: 'grey.50',
+                  sx: (theme) => ({
+                    backgroundColor: theme.palette.mode === 'dark' ? '#4C4E4D' : 'grey.50',
                     '& .MuiOutlinedInput-input': {
                       cursor: 'default',
+                      color: theme.palette.mode === 'dark' ? '#F2F3F6' : 'inherit',
                     },
-                  },
+                  }),
                 }}
                 helperText="Calculated from distance ÷ fuel amount"
                 sx={{

frontend/src/features/fuel-logs/components/StationPicker.tsx

@@ -330,10 +330,10 @@ export const StationPicker: React.FC<StationPickerProps> = ({
           }}
         />
       )}
-      sx={{
+      sx={(theme) => ({
         '& .MuiAutocomplete-groupLabel': {
           fontWeight: 600,
-          backgroundColor: 'grey.100',
+          backgroundColor: theme.palette.mode === 'dark' ? '#4C4E4D' : 'grey.100',
           fontSize: '0.75rem',
           textTransform: 'uppercase',
           letterSpacing: '0.5px'
@@ -342,7 +342,7 @@ export const StationPicker: React.FC<StationPickerProps> = ({
           minHeight: '44px', // Mobile touch target
           padding: '8px 16px'
         }
-      }}
+      })}
     />
   );
 };