From 655784c6d9542cdeeed8faa26b96f5699c8d72c1 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Mon, 2 Mar 2026 03:23:37 +0200
Subject: [PATCH] ui: tinted background per stat box (blue/green/orange)

---
 frontend/src/components/EventList.css | 10 ++++++++++
 frontend/src/components/EventList.jsx | 12 ++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/EventList.css b/frontend/src/components/EventList.css
index e09646b..f4ee88f 100644
--- a/frontend/src/components/EventList.css
+++ b/frontend/src/components/EventList.css
@@ -159,6 +159,16 @@
   color: var(--color-text);
 }
 
+/* per-stat accent colors — !important guards against global .stat-value overrides */
+.stat .stat-value--total     { color: var(--color-primary) !important; }
+.stat .stat-value--confirmed { color: var(--color-success) !important; }
+.stat .stat-value--rate      { color: var(--color-warning) !important; }
+
+/* per-stat tinted backgrounds */
+.stat--total     { background: rgba(82,  148, 255, 0.12); border-color: rgba(82,  148, 255, 0.30); }
+.stat--confirmed { background: rgba(46,  199, 107, 0.12); border-color: rgba(46,  199, 107, 0.30); }
+.stat--rate      { background: rgba(245, 166,  35, 0.12); border-color: rgba(245, 166,  35, 0.30); }
+
 .event-card-actions {
   display: flex;
   gap: 0.5rem;
diff --git a/frontend/src/components/EventList.jsx b/frontend/src/components/EventList.jsx
index 0d78f0f..68f8669 100644
--- a/frontend/src/components/EventList.jsx
+++ b/frontend/src/components/EventList.jsx
@@ -139,18 +139,18 @@ function EventList({ onEventSelect, onCreateEvent, onManageTemplates }) {
                   <p className="event-date">📅 {formatDate(event.date)}</p>
                   
                   <div className="event-stats">
-                    <div className="stat">
+                    <div className="stat stat--total">
                       <span className="stat-label">{he.guests}</span>
-                      <span className="stat-value">{guestStats.total}</span>
+                      <span className="stat-value stat-value--total">{guestStats.total}</span>
                     </div>
-                    <div className="stat">
+                    <div className="stat stat--confirmed">
                       <span className="stat-label">{he.confirmed}</span>
-                      <span className="stat-value">{guestStats.confirmed}</span>
+                      <span className="stat-value stat-value--confirmed">{guestStats.confirmed}</span>
                     </div>
                     {guestStats.total > 0 && (
-                      <div className="stat">
+                      <div className="stat stat--rate">
                         <span className="stat-label">{he.rate}</span>
-                        <span className="stat-value">
+                        <span className="stat-value stat-value--rate">
                           {Math.round((guestStats.confirmed / guestStats.total) * 100)}%
                         </span>
                       </div>