feat: Improve onboarding wizard UI, UX and dark mode support

This commit implements multiple improvements to the onboarding wizard:

**1. Unified UI Components:**
- Created InfoCard component for consistent "why is important" blocks across all steps
- Created TemplateCard component for consistent template displays
- Both components use global CSS variables for proper dark mode support

**2. Initial Stock Entry Step Improvements:**
- Fixed title/subtitle positioning using unified InfoCard component
- Fixed missing count bug in warning message (now uses {{count}} interpolation)
- Fixed dark mode colors using CSS variables (--color-success, --color-info, etc.)
- Changed next button title from "completar configuración" to "Continuar →"
- Implemented stock creation API call using useAddStock hook
- Products with stock now properly save to backend on step completion

**3. Dark Mode Fixes:**
- Fixed QualitySetupStep: Enhanced button selection visibility with rings and shadows
- Fixed TeamSetupStep: Enhanced role selection visibility with rings and shadows
- Fixed AddressAutocomplete: Replaced all hardcoded colors with CSS variables
- All dropdown results, icons, and hover states now properly adapt to dark mode

**4. Streamlined Wizard Flow:**
- Removed POI Detection step from wizard (step previously added complexity)
- POI detection now runs automatically in background after tenant registration
- Non-blocking approach ensures users aren't delayed by POI detection
- Removed Revision step (setup-review) as it adds no user value
- Completion step is now the final step before dashboard

**5. Backend Updates:**
- Updated onboarding_progress.py to remove poi-detection from ONBOARDING_STEPS
- Updated onboarding_progress.py to remove setup-review from ONBOARDING_STEPS
- Updated step dependencies to reflect streamlined flow
- POI detection documented as automatic background process

All changes maintain backward compatibility and use proper TypeScript types.

frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx

@@ -11,7 +11,6 @@ import { WizardProvider, useWizardContext, BakeryType, DataSource } from './cont
 import {
   BakeryTypeSelectionStep,
   RegisterTenantStep,
-  POIDetectionStep,
   FileUploadStep,
   InventoryReviewStep,
   ProductCategorizationStep,
@@ -75,15 +74,7 @@ const OnboardingWizardContent: React.FC = () => {
       isConditional: true,
       condition: (ctx) => ctx.state.bakeryType !== null,
     },
-    // Phase 2b: POI Detection
+    // POI Detection removed - now happens automatically in background after tenant registration
-    {
-      id: 'poi-detection',
-      title: t('onboarding:steps.poi_detection.title', 'Detección de Ubicación'),
-      description: t('onboarding:steps.poi_detection.description', 'Analizar puntos de interés cercanos'),
-      component: POIDetectionStep,
-      isConditional: true,
-      condition: (ctx) => ctx.state.bakeryType !== null && ctx.state.bakeryLocation !== undefined,
-    },
     // Phase 2a: AI-Assisted Inventory Setup (REFACTORED - split into 3 focused steps)
     {
       id: 'upload-sales-data',
@@ -159,14 +150,7 @@ const OnboardingWizardContent: React.FC = () => {
       component: MLTrainingStep,
       // Always show - no conditional
     },
-    {
+    // Revision step removed - not useful for user, completion step is final step
-      id: 'setup-review',
-      title: t('onboarding:steps.review.title', 'Revisión'),
-      description: t('onboarding:steps.review.description', 'Confirma tu configuración'),
-      component: ReviewSetupStep,
-      isConditional: true,
-      condition: (ctx) => ctx.state.bakeryType !== null, // Tenant created after bakeryType is set
-    },
     {
       id: 'completion',
       title: t('onboarding:steps.completion.title', 'Completado'),
@@ -562,12 +546,6 @@ const OnboardingWizardContent: React.FC = () => {
                       initialStock: undefined,
                     }))
                   }
-                : // Pass tenant info to POI detection step
-                currentStep.id === 'poi-detection'
-                ? {
-                    tenantId: wizardContext.state.tenantId,
-                    bakeryLocation: wizardContext.state.bakeryLocation,
-                  }
                 : undefined
             }
           />

frontend/src/components/domain/onboarding/context/WizardContext.tsx

@@ -269,7 +269,7 @@ export const WizardProvider: React.FC<WizardProviderProps> = ({
       steps.push('ml-training');
     }
 
-    steps.push('setup-review');
+    // Revision step removed - not useful for user
     steps.push('completion');
 
     return steps;

frontend/src/components/domain/onboarding/steps/InitialStockEntryStep.tsx

@@ -4,6 +4,9 @@ import { Package, Salad, AlertCircle, ArrowRight, ArrowLeft, CheckCircle } from
 import Button from '../../../ui/Button/Button';
 import Card from '../../../ui/Card/Card';
 import Input from '../../../ui/Input/Input';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import { useAddStock } from '../../../../api/hooks/inventory';
+import InfoCard from '../../../ui/InfoCard';
 
 export interface ProductWithStock {
   id: string;
@@ -32,6 +35,11 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
   initialData,
 }) => {
   const { t } = useTranslation();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  const addStockMutation = useAddStock();
+  const [isSaving, setIsSaving] = useState(false);
+
   const [products, setProducts] = useState<ProductWithStock[]>(() => {
     if (initialData?.productsWithStock) {
       return initialData.productsWithStock;
@@ -76,8 +84,36 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
     onComplete?.();
   };
 
-  const handleContinue = () => {
+  const handleContinue = async () => {
-    onComplete?.();
+    setIsSaving(true);
+    try {
+      // Create stock entries for products with initial stock > 0
+      const stockEntries = products.filter(p => p.initialStock && p.initialStock > 0);
+
+      if (stockEntries.length > 0) {
+        // Create stock entries in parallel
+        const stockPromises = stockEntries.map(product =>
+          addStockMutation.mutateAsync({
+            tenantId,
+            stockData: {
+              ingredient_id: product.id,
+              unit_price: 0, // Default price, can be updated later
+              notes: `Initial stock entry from onboarding`
+            }
+          })
+        );
+
+        await Promise.all(stockPromises);
+        console.log(`✅ Created ${stockEntries.length} stock entries successfully`);
+      }
+
+      onComplete?.();
+    } catch (error) {
+      console.error('Error creating stock entries:', error);
+      alert(t('onboarding:stock.error_creating_stock', 'Error al crear los niveles de stock. Por favor, inténtalo de nuevo.'));
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   const productsWithStock = products.filter(p => p.initialStock !== undefined && p.initialStock >= 0);
@@ -106,51 +142,30 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
+    <div className="space-y-4 md:space-y-6">
-      {/* Header */}
+      {/* Why This Matters */}
-      <div className="text-center space-y-2 md:space-y-3">
+      <InfoCard
-        <h1 className="text-xl md:text-2xl font-bold text-text-primary px-2">
+        variant="info"
-          {t('onboarding:stock.title', 'Niveles de Stock Inicial')}
+        title={t('setup_wizard:why_this_matters', '¿Por qué es importante?')}
-        </h1>
+        description={t(
-        <p className="text-sm md:text-base text-text-secondary max-w-2xl mx-auto px-4">
+          'onboarding:stock.info_text',
-          {t(
+          'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
-            'onboarding:stock.subtitle',
+        )}
-            'Ingresa las cantidades actuales de cada producto. Esto permite que el sistema rastree el inventario desde hoy.'
+      />
-          )}
-        </p>
-      </div>
-
-      {/* Info Banner */}
-      <Card className="bg-blue-50 border-blue-200">
-        <div className="p-4 flex items-start gap-3">
-          <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
-          <div className="text-sm text-blue-900">
-            <p className="font-medium mb-1">
-              {t('onboarding:stock.info_title', '¿Por qué es importante?')}
-            </p>
-            <p className="text-blue-700">
-              {t(
-                'onboarding:stock.info_text',
-                'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
-              )}
-            </p>
-          </div>
-        </div>
-      </Card>
 
       {/* Progress */}
       <div className="space-y-2">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-text-secondary">
+          <span className="text-[var(--text-secondary)]">
             {t('onboarding:stock.progress', 'Progreso de captura')}
           </span>
-          <span className="font-medium text-text-primary">
+          <span className="font-medium text-[var(--text-primary)]">
             {productsWithStock.length} / {products.length}
           </span>
         </div>
-        <div className="w-full bg-gray-200 rounded-full h-2">
+        <div className="w-full bg-[var(--bg-secondary)] rounded-full h-2">
           <div
-            className="bg-primary-500 h-2 rounded-full transition-all duration-300"
+            className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
             style={{ width: `${completionPercentage}%` }}
           />
         </div>
@@ -170,10 +185,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
       {ingredients.length > 0 && (
         <div className="space-y-3">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
+            <div className="w-8 h-8 bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 rounded-lg flex items-center justify-center">
-              <Salad className="w-4 h-4 text-green-600" />
+              <Salad className="w-4 h-4 text-[var(--color-success)]" />
             </div>
-            <h3 className="font-semibold text-text-primary">
+            <h3 className="font-semibold text-[var(--text-primary)]">
               {t('onboarding:stock.ingredients', 'Ingredientes')} ({ingredients.length})
             </h3>
           </div>
@@ -182,16 +197,16 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
             {ingredients.map(product => {
               const hasStock = product.initialStock !== undefined;
               return (
-                <Card key={product.id} className={hasStock ? 'bg-green-50 border-green-200' : ''}>
+                <Card key={product.id} className={hasStock ? 'bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 border-[var(--color-success)]/30' : ''}>
                   <div className="p-3">
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1">
-                        <div className="font-medium text-text-primary flex items-center gap-2">
+                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                           {product.name}
-                          {hasStock && <CheckCircle className="w-4 h-4 text-green-600" />}
+                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-success)]" />}
                         </div>
                         {product.category && (
-                          <div className="text-xs text-text-secondary">{product.category}</div>
+                          <div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
                         )}
                       </div>
                       <div className="flex items-center gap-2">
@@ -204,7 +219,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
                           step="0.01"
                           className="w-20 sm:w-24 text-right min-h-[44px]"
                         />
-                        <span className="text-sm text-text-secondary whitespace-nowrap">
+                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                           {product.unit || 'kg'}
                         </span>
                       </div>
@@ -221,10 +236,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
       {finishedProducts.length > 0 && (
         <div className="space-y-3">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
+            <div className="w-8 h-8 bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 rounded-lg flex items-center justify-center">
-              <Package className="w-4 h-4 text-blue-600" />
+              <Package className="w-4 h-4 text-[var(--color-info)]" />
             </div>
-            <h3 className="font-semibold text-text-primary">
+            <h3 className="font-semibold text-[var(--text-primary)]">
               {t('onboarding:stock.finished_products', 'Productos Terminados')} ({finishedProducts.length})
             </h3>
           </div>
@@ -233,16 +248,16 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
             {finishedProducts.map(product => {
               const hasStock = product.initialStock !== undefined;
               return (
-                <Card key={product.id} className={hasStock ? 'bg-blue-50 border-blue-200' : ''}>
+                <Card key={product.id} className={hasStock ? 'bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 border-[var(--color-info)]/30' : ''}>
                   <div className="p-3">
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1">
-                        <div className="font-medium text-text-primary flex items-center gap-2">
+                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                           {product.name}
-                          {hasStock && <CheckCircle className="w-4 h-4 text-blue-600" />}
+                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-info)]" />}
                         </div>
                         {product.category && (
-                          <div className="text-xs text-text-secondary">{product.category}</div>
+                          <div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
                         )}
                       </div>
                       <div className="flex items-center gap-2">
@@ -255,7 +270,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
                           step="1"
                           className="w-24 text-right"
                         />
-                        <span className="text-sm text-text-secondary whitespace-nowrap">
+                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                           {product.unit || t('common:units', 'unidades')}
                         </span>
                       </div>
@@ -270,36 +285,35 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
 
       {/* Warning for incomplete */}
       {!allCompleted && (
-        <Card className="bg-amber-50 border-amber-200">
+        <InfoCard
-          <div className="p-4 flex items-start gap-3">
+          variant="warning"
-            <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
+          title={t('onboarding:stock.incomplete_warning', 'Faltan {{count}} productos por completar', {
-            <div className="text-sm text-amber-900">
+            count: productsWithoutStock.length,
-              <p className="font-medium">
+          })}
-                {t('onboarding:stock.incomplete_warning', 'Faltan {count} productos por completar', {
+          description={t(
-                  count: productsWithoutStock.length,
+            'onboarding:stock.incomplete_help',
-                })}
+            'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
-              </p>
+          )}
-              <p className="text-amber-700 mt-1">
+        />
-                {t(
-                  'onboarding:stock.incomplete_help',
-                  'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
-                )}
-              </p>
-            </div>
-          </div>
-        </Card>
       )}
 
       {/* Footer Actions */}
-      <div className="flex items-center justify-between pt-6 border-t border-border-primary">
+      <div className="flex items-center justify-between pt-6 border-t border-[var(--border-primary)]">
         <Button onClick={onPrevious} variant="ghost" leftIcon={<ArrowLeft />}>
           {t('common:previous', 'Anterior')}
         </Button>
 
-        <Button onClick={handleContinue} variant="primary" rightIcon={<ArrowRight />}>
+        <Button
-          {allCompleted
+          onClick={handleContinue}
-            ? t('onboarding:stock.complete', 'Completar Configuración')
+          variant="primary"
-            : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
+          rightIcon={<ArrowRight />}
+          disabled={isSaving}
+        >
+          {isSaving
+            ? t('common:saving', 'Guardando...')
+            : allCompleted
+              ? t('onboarding:stock.continue_to_next', 'Continuar →')
+              : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
         </Button>
       </div>
     </div>

frontend/src/components/domain/onboarding/steps/RegisterTenantStep.tsx

@@ -5,6 +5,7 @@ import { useRegisterBakery } from '../../../../api/hooks/tenant';
 import { BakeryRegistration } from '../../../../api/types/tenant';
 import { AddressResult } from '../../../../services/api/geocodingApi';
 import { useWizardContext } from '../context';
+import { poiContextApi } from '../../../../services/api/poiContextApi';
 
 interface RegisterTenantStepProps {
   onNext: () => void;
@@ -112,8 +113,25 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
     try {
       const tenant = await registerBakery.mutateAsync(formData);
 
-      // Update the wizard context with tenant info and pass the bakeryLocation coordinates
+      // Trigger POI detection in the background (non-blocking)
-      // that were captured during address selection to the next step (POI Detection)
+      // This replaces the removed POI Detection step
+      const bakeryLocation = wizardContext.state.bakeryLocation;
+      if (bakeryLocation?.latitude && bakeryLocation?.longitude && tenant.id) {
+        // Run POI detection asynchronously without blocking the wizard flow
+        poiContextApi.detectPOIs(
+          tenant.id,
+          bakeryLocation.latitude,
+          bakeryLocation.longitude,
+          false // use_cache = false for initial detection
+        ).then((result) => {
+          console.log(`✅ POI detection completed automatically for tenant ${tenant.id}:`, result.summary);
+        }).catch((error) => {
+          console.warn('⚠️  Background POI detection failed (non-blocking):', error);
+          // This is non-critical, so we don't block the user
+        });
+      }
+
+      // Update the wizard context with tenant info
       onComplete({
         tenant,
         tenantId: tenant.id,

frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx

@@ -274,10 +274,10 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
                       console.log('Check type clicked:', option.value, 'current:', formData.check_type);
                       setFormData(prev => ({ ...prev, check_type: option.value }));
                     }}
-                    className={`p-3 text-left border rounded-lg transition-colors cursor-pointer ${
+                    className={`p-3 text-left border-2 rounded-lg transition-all cursor-pointer ${
                       formData.check_type === option.value
-                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
+                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 shadow-lg ring-2 ring-[var(--color-primary)]/30'
-                        : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
+                        : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                     }`}
                   >
                     <div className="text-lg mb-1">{option.icon}</div>
@@ -325,10 +325,10 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
                           : [...prev.applicable_stages, option.value]
                       }));
                     }}
-                    className={`p-2 text-sm text-left border rounded-lg transition-colors cursor-pointer ${
+                    className={`p-2 text-sm text-left border-2 rounded-lg transition-all cursor-pointer ${
                       formData.applicable_stages.includes(option.value)
-                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
+                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 text-[var(--color-primary)] font-semibold shadow-md ring-1 ring-[var(--color-primary)]/30'
-                        : 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--border-primary)]'
+                        : 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                     }`}
                   >
                     {option.label}

frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx

@@ -247,10 +247,10 @@ export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete,
                     key={option.value}
                     type="button"
                     onClick={() => setFormData({ ...formData, role: option.value })}
-                    className={`p-3 text-left border rounded-lg transition-colors ${
+                    className={`p-3 text-left border-2 rounded-lg transition-all ${
                       formData.role === option.value
-                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
+                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 shadow-lg ring-2 ring-[var(--color-primary)]/30'
-                        : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
+                        : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                     }`}
                   >
                     <div className="flex items-center gap-2 mb-1">

frontend/src/components/ui/AddressAutocomplete.tsx

@@ -99,7 +99,7 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
   return (
     <div ref={wrapperRef} className={`relative ${className}`}>
       <div className="relative">
-        <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+        <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--text-secondary)]" />
 
         <Input
           type="text"
@@ -109,15 +109,15 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
           placeholder={placeholder}
           disabled={disabled}
           required={required}
-          className={`pl-10 pr-10 ${selectedAddress ? 'border-green-500' : ''}`}
+          className={`pl-10 pr-10 ${selectedAddress ? 'border-[var(--color-success)]' : ''}`}
         />
 
         <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
           {isLoading && (
-            <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+            <Loader2 className="h-4 w-4 animate-spin text-[var(--text-secondary)]" />
           )}
           {selectedAddress && !isLoading && (
-            <Check className="h-4 w-4 text-green-600" />
+            <Check className="h-4 w-4 text-[var(--color-success)]" />
           )}
           {query && !disabled && (
             <Button
@@ -125,7 +125,7 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
               variant="ghost"
               size="sm"
               onClick={handleClear}
-              className="h-6 w-6 p-0 hover:bg-gray-100"
+              className="h-6 w-6 p-0 hover:bg-[var(--bg-secondary)]"
             >
               <X className="h-3 w-3" />
             </Button>
@@ -135,36 +135,36 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
 
       {/* Error message */}
       {error && (
-        <div className="mt-1 text-sm text-red-600">
+        <div className="mt-1 text-sm text-[var(--color-error)]">
           {error}
         </div>
       )}
 
       {/* Results dropdown */}
       {showResults && results.length > 0 && (
-        <Card className="absolute z-50 w-full mt-1 max-h-80 overflow-y-auto shadow-lg">
+        <Card className="absolute z-50 w-full mt-1 max-h-80 overflow-y-auto shadow-lg bg-[var(--bg-primary)]">
           <CardBody className="p-0">
-            <div className="divide-y divide-gray-100">
+            <div className="divide-y divide-[var(--border-secondary)]">
               {results.map((result) => (
                 <button
                   key={result.place_id}
                   type="button"
                   onClick={() => handleSelectAddress(result)}
-                  className="w-full text-left px-4 py-3 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition-colors"
+                  className="w-full text-left px-4 py-3 hover:bg-[var(--bg-secondary)] focus:bg-[var(--bg-secondary)] focus:outline-none transition-colors"
                 >
                   <div className="flex items-start gap-3">
-                    <MapPin className="h-4 w-4 text-blue-600 mt-1 flex-shrink-0" />
+                    <MapPin className="h-4 w-4 text-[var(--color-primary)] mt-1 flex-shrink-0" />
                     <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium text-gray-900 truncate">
+                      <div className="text-sm font-medium text-[var(--text-primary)] truncate">
                         {result.address.road && result.address.house_number
                           ? `${result.address.road}, ${result.address.house_number}`
                           : result.address.road || result.display_name}
                       </div>
-                      <div className="text-xs text-gray-600 truncate mt-0.5">
+                      <div className="text-xs text-[var(--text-secondary)] truncate mt-0.5">
                         {result.address.city || result.address.municipality || result.address.suburb}
                         {result.address.postcode && `, ${result.address.postcode}`}
                       </div>
-                      <div className="text-xs text-gray-400 mt-1">
+                      <div className="text-xs text-[var(--text-tertiary)] mt-1">
                         {result.lat.toFixed(6)}, {result.lon.toFixed(6)}
                       </div>
                     </div>
@@ -178,9 +178,9 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
 
       {/* No results message */}
       {showResults && !isLoading && query.length >= 3 && results.length === 0 && !error && (
-        <Card className="absolute z-50 w-full mt-1 shadow-lg">
+        <Card className="absolute z-50 w-full mt-1 shadow-lg bg-[var(--bg-primary)]">
           <CardBody className="p-4">
-            <div className="text-sm text-gray-600 text-center">
+            <div className="text-sm text-[var(--text-secondary)] text-center">
               No addresses found for "{query}"
             </div>
           </CardBody>

frontend/src/components/ui/InfoCard.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { AlertCircle, Info, Lightbulb, Sparkles } from 'lucide-react';
+
+export type InfoCardVariant = 'info' | 'warning' | 'success' | 'tip' | 'template';
+
+interface InfoCardProps {
+  title: string;
+  description: string;
+  variant?: InfoCardVariant;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Unified InfoCard component for displaying consistent info/warning/tip blocks
+ * across all onboarding wizard steps.
+ *
+ * Uses global styling and color palette for dark mode compatibility.
+ */
+export const InfoCard: React.FC<InfoCardProps> = ({
+  title,
+  description,
+  variant = 'info',
+  icon,
+  children,
+  className = '',
+}) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'info':
+        return {
+          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
+          icon: 'text-[var(--color-info)]',
+          defaultIcon: <Info className="w-5 h-5" />,
+        };
+      case 'warning':
+        return {
+          container: 'bg-[var(--color-warning)]/10 border-[var(--color-warning)]/20',
+          icon: 'text-[var(--color-warning)]',
+          defaultIcon: <AlertCircle className="w-5 h-5" />,
+        };
+      case 'success':
+        return {
+          container: 'bg-[var(--color-success)]/10 border-[var(--color-success)]/20',
+          icon: 'text-[var(--color-success)]',
+          defaultIcon: <Sparkles className="w-5 h-5" />,
+        };
+      case 'tip':
+        return {
+          container: 'bg-[var(--color-primary)]/10 border-[var(--color-primary)]/20',
+          icon: 'text-[var(--color-primary)]',
+          defaultIcon: <Lightbulb className="w-5 h-5" />,
+        };
+      case 'template':
+        return {
+          container: 'bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/10 dark:to-blue-900/10 border-purple-200 dark:border-purple-700',
+          icon: 'text-purple-600 dark:text-purple-400',
+          defaultIcon: <Sparkles className="w-5 h-5" />,
+        };
+      default:
+        return {
+          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
+          icon: 'text-[var(--color-info)]',
+          defaultIcon: <Info className="w-5 h-5" />,
+        };
+    }
+  };
+
+  const styles = getVariantStyles();
+
+  return (
+    <div className={`${styles.container} border rounded-lg p-4 ${className}`}>
+      <h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
+        <span className={styles.icon}>
+          {icon || styles.defaultIcon}
+        </span>
+        {title}
+      </h3>
+      <p className="text-sm text-[var(--text-secondary)]">
+        {description}
+      </p>
+      {children && (
+        <div className="mt-3">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfoCard;

frontend/src/components/ui/TemplateCard.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface TemplateCardProps {
+  icon: string | React.ReactNode;
+  title: string;
+  description: string;
+  itemsCount?: number;
+  onClick: () => void;
+  className?: string;
+}
+
+/**
+ * Unified TemplateCard component for displaying template options
+ * across all onboarding wizard steps.
+ *
+ * Uses global styling and color palette for dark mode compatibility.
+ */
+export const TemplateCard: React.FC<TemplateCardProps> = ({
+  icon,
+  title,
+  description,
+  itemsCount,
+  onClick,
+  className = '',
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`text-left p-4 bg-[var(--bg-primary)] dark:bg-[var(--surface-secondary)] border-2 border-purple-200 dark:border-purple-700 rounded-lg hover:border-purple-400 dark:hover:border-purple-500 hover:shadow-md transition-all group ${className}`}
+    >
+      <div className="flex items-start gap-3">
+        {typeof icon === 'string' ? (
+          <span className="text-3xl group-hover:scale-110 transition-transform">{icon}</span>
+        ) : (
+          <span className="group-hover:scale-110 transition-transform">{icon}</span>
+        )}
+        <div className="flex-1 min-w-0">
+          <h4 className="font-medium text-[var(--text-primary)] mb-1">
+            {title}
+          </h4>
+          <p className="text-xs text-[var(--text-secondary)] mb-2">
+            {description}
+          </p>
+          {itemsCount !== undefined && (
+            <p className="text-xs text-purple-600 dark:text-purple-400 font-medium">
+              {itemsCount} items
+            </p>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default TemplateCard;

services/auth/app/api/onboarding_progress.py

@@ -48,19 +48,17 @@ ONBOARDING_STEPS = [
 
     # Phase 2: Core Setup
     "setup",                        # Basic bakery setup and tenant creation
+                                    # NOTE: POI detection now happens automatically in background during tenant registration
 
-    # Phase 2a: POI Detection (Location Context)
+    # Phase 2a: AI-Assisted Inventory Setup (REFACTORED - split into 3 focused steps)
-    "poi-detection",                # Detect nearby POIs for location-based ML features
-
-    # Phase 2b: AI-Assisted Inventory Setup (REFACTORED - split into 3 focused steps)
     "upload-sales-data",            # File upload, validation, and AI classification
     "inventory-review",             # Review and confirm AI-detected products with type selection
     "initial-stock-entry",          # Capture initial stock levels
 
-    # Phase 2c: Product Categorization (optional advanced categorization)
+    # Phase 2b: Product Categorization (optional advanced categorization)
     "product-categorization",       # Advanced categorization (may be deprecated)
 
-    # Phase 2d: Suppliers (shared by all paths)
+    # Phase 2c: Suppliers (shared by all paths)
     "suppliers-setup",              # Suppliers configuration
 
     # Phase 3: Advanced Configuration (all optional)
@@ -71,7 +69,7 @@ ONBOARDING_STEPS = [
 
     # Phase 4: ML & Finalization
     "ml-training",                  # AI model training
-    "setup-review",                 # Review all configuration
+    # "setup-review" removed - not useful for user, completion step is final
     "completion"                    # Onboarding completed
 ]
 
@@ -83,9 +81,7 @@ STEP_DEPENDENCIES = {
 
     # Core setup - no longer depends on data-source-choice (removed)
     "setup": ["user_registered", "bakery-type-selection"],
-
+    # NOTE: POI detection removed from steps - now happens automatically in background
-    # POI Detection - requires tenant creation (setup)
-    "poi-detection": ["user_registered", "setup"],
 
     # AI-Assisted Inventory Setup - REFACTORED into 3 sequential steps
     "upload-sales-data": ["user_registered", "setup"],