pénzügyi modul továbbfejlesztése (csomagkezelés)

plans/fix_addon_card_visibility.md

@@ -0,0 +1,68 @@
+# Plan: Fix Add-on Card Visibility & Styling
+
+**Date:** 2026-07-28  
+**Status:** Ready for implementation  
+**Ref:** `docs/UI_STANDARDS.md` Section 6
+
+## Problem
+
+The add-on cards in [`SubscriptionPlansView.vue`](frontend_app/src/views/SubscriptionPlansView.vue) use glass/dark-themed classes that make them invisible against the `garage-bg.png` background. The text is white/transparent on a semi-transparent emerald glass bg → completely unreadable.
+
+## Target
+
+Align add-on cards with the standard card pattern used by base plan cards (`BaseCard.vue`) and Finance cards (`FinanceMainView.vue`), but with a **green header** to differentiate them.
+
+## Changes
+
+### File: [`SubscriptionPlansView.vue`](frontend_app/src/views/SubscriptionPlansView.vue)
+
+The add-on card template currently at lines ~122-195 needs to be rewritten with solid white card styling:
+
+**Add-on card wrapper (selected):**
+```
+bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden border-emerald-500 ring-1 ring-emerald-500/50 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl
+```
+
+**Add-on card wrapper (unselected):**
+```
+bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden border-slate-200 transition-all duration-300 hover:border-slate-400 hover:-translate-y-2 hover:shadow-2xl
+```
+
+**Change summary:**
+1. Replace the entire add-on card `<div>` inner structure to include a green gradient header bar
+2. Change from dark glass classes to white solid classes
+3. Update stat badges from `bg-white/10 text-white/50` to `bg-slate-50 text-slate-700`
+4. Update toggle button (unselected) from `bg-white/10 text-white/80` to `bg-slate-100 text-slate-700 border border-slate-200`
+5. Add `flex flex-col h-full` structure inside the card body
+
+### File: No other files need changes
+
+The PlanDetailsModal already has solid white styling and was not affected.
+
+## Tailwind Classes Used
+
+| Purpose | Classes |
+|---|---|
+| Card wrapper | `bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden` |
+| Border (unselected) | `border-slate-200` |
+| Border (selected) | `border-emerald-500 ring-1 ring-emerald-500/50` |
+| Hover | `transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl` |
+| Header bar | `h-12 bg-gradient-to-r from-emerald-600 to-emerald-700 shrink-0 flex items-center px-4` |
+| Header text | `text-white font-bold text-sm tracking-wide` |
+| Body | `p-4 flex flex-col h-full text-slate-800` |
+| Price (large) | `text-xl font-bold text-slate-900` |
+| Price (small) | `text-slate-500 text-xs` |
+| Stat badge | `bg-slate-50 rounded-lg p-2 text-center` |
+| Stat number | `text-base font-bold text-slate-900` |
+| Stat label | `text-[10px] text-slate-500 mt-0.5 uppercase tracking-wider` |
+| Toggle (selected) | `w-full py-2 rounded-xl text-sm font-semibold bg-emerald-600 hover:bg-emerald-700 text-white` |
+| Toggle (unselected) | `w-full py-2 rounded-xl text-sm font-semibold bg-slate-100 hover:bg-emerald-50 text-slate-700 hover:text-emerald-700 border border-slate-200 hover:border-emerald-300` |
+| Cart summary | Stays on dark bg (above add-on grid) — `bg-white/10 backdrop-blur-sm border border-white/20` is fine |
+
+## Result
+
+After fix:
+- Add-on cards will have solid white backgrounds — readable on any background
+- Green emerald headers visually distinguish them from base plan cards (dark blue headers)
+- Same hover animation as all other cards
+- Toggle buttons are recognizable as interactive elements (solid bg vs transparent)