feat(RecipeDetailClient): update inventory preview section and button labels for clarity

frontend/app/recipes/[id]/RecipeDetailClient.tsx

@@ -254,7 +254,7 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
               {isLiked ? '♥ Gillad' : '♡ Gilla'}
             </button>
             <button onClick={loadPreview} disabled={isPreviewing} style={btnStyle()}>
-              {isPreviewing ? 'Hämtar...' : 'Inventariegranskning'}
+              {isPreviewing ? 'Hämtar...' : '🛒 Vad behöver jag köpa?'}
             </button>
             <button onClick={() => setIsEditing(true)} style={btnStyle()}>Redigera</button>
             <button onClick={handleDelete} disabled={isDeleting} style={btnStyle('#e53e3e')}>
@@ -311,31 +311,54 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
           </section>
         )}
 
-        {/* Inventarieförhandsgranskning */}
+        {/* Lagergranskning */}
         {(preview || previewError) && (
           <section style={{ ...sectionStyle, marginTop: '1.5rem' }}>
-            <h2 style={sectionTitle}>Inventariegranskning</h2>
+            <h2 style={sectionTitle}>🛒 Vad behöver jag köpa?</h2>
             {previewError && <p style={errorStyle}>{previewError}</p>}
             {preview && (
               <>
-                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem', fontSize: '0.9rem' }}>
+                {/* Summerbanner */}
-                  <span>Totalt: <strong>{preview.summary.totalIngredients}</strong></span>
+                {preview.summary.canCookExactly ? (
-                  <span style={{ color: '#1f5f2c' }}>Räcker: <strong>{preview.summary.enoughCount}</strong></span>
+                  <div style={{ background: '#f0fdf4', border: '1px solid #86efac', borderRadius: '8px', padding: '0.875rem 1rem', marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.6rem', color: '#166534', fontWeight: 600 }}>
-                  <span style={{ color: '#8b0000' }}>Saknas: <strong>{preview.summary.missingCount}</strong></span>
+                    <span style={{ fontSize: '1.3rem' }}>✅</span>
-                  {preview.summary.unitMismatchCount > 0 && (
+                    <span>Du har allt hemma! Du kan laga det här receptet direkt.</span>
-                    <span style={{ color: '#8a4b00' }}>Enhetskonflikt: <strong>{preview.summary.unitMismatchCount}</strong></span>
-                  )}
                   </div>
-                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.5rem' }}>
+                ) : (
-                  {preview.ingredients.map((ing) => (
+                  <div style={{ background: '#fef2f2', border: '1px solid #fca5a5', borderRadius: '8px', padding: '0.875rem 1rem', marginBottom: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', color: '#991b1b', fontWeight: 600 }}>
+                      <span style={{ fontSize: '1.3rem' }}>🛒</span>
+                      <span>
+                        Du saknar {preview.summary.missingCount + preview.summary.unitMismatchCount} av {preview.summary.totalIngredients} ingredienser
+                      </span>
+                    </div>
+                    <button
+                      disabled
+                      title="Inköpslista kommer snart"
+                      style={{ padding: '0.45rem 1rem', background: '#e5e7eb', color: '#9ca3af', border: '1px solid #d1d5db', borderRadius: '6px', cursor: 'not-allowed', fontSize: '0.9rem', fontWeight: 500 }}
+                    >
+                      + Lägg till i inköpslista (kommer snart)
+                    </button>
+                  </div>
+                )}
+
+                {/* Ingredienslista med status */}
+                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
+                  {preview.ingredients.map((ing) => {
+                    const rowBg = ing.status === 'enough' ? '#f0fdf4' : ing.status === 'missing' ? '#fef2f2' : '#fffbeb';
+                    const rowBorder = ing.status === 'enough' ? '#bbf7d0' : ing.status === 'missing' ? '#fca5a5' : '#fde68a';
+                    const icon = ing.status === 'enough' ? '✅' : ing.status === 'missing' ? '❌' : '⚠️';
+                    return (
                       <li key={ing.ingredientId} style={{
                         display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                      padding: '0.5rem 0.75rem', borderRadius: '6px', border: '1px solid #eee',
+                        padding: '0.5rem 0.75rem', borderRadius: '6px',
+                        border: `1px solid ${rowBorder}`, background: rowBg,
                         flexWrap: 'wrap', gap: '0.5rem',
                       }}>
-                      <span>
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                          <span>{icon}</span>
                           <strong>{ing.productName}</strong>
-                        {' '}<span style={{ color: '#555', fontSize: '0.875rem' }}>
+                          <span style={{ color: '#555', fontSize: '0.875rem' }}>
                             {ing.requiredQuantity} {ing.requiredUnit}
                             {ing.status !== 'enough' && ing.missingQuantity > 0 && (
                               <> — saknar <strong>{ing.missingQuantity} {ing.requiredUnit}</strong></>
@@ -344,7 +367,8 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
                         </span>
                         <StatusBadge status={ing.status} />
                       </li>
-                  ))}
+                    );
+                  })}
                 </ul>
               </>
             )}