From 9d459119344d22145d7dec470ff67a1d54bdf8eb Mon Sep 17 00:00:00 2001
From: fireshaper <rory54@gmail.com>
Date: Thu, 2 Jul 2026 16:56:58 -0400
Subject: [PATCH] updated dashboard tiles

---
 mykindlebox/client/src/pages/Dashboard.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/mykindlebox/client/src/pages/Dashboard.jsx b/mykindlebox/client/src/pages/Dashboard.jsx
index 35017fd..44edcf4 100644
--- a/mykindlebox/client/src/pages/Dashboard.jsx
+++ b/mykindlebox/client/src/pages/Dashboard.jsx
@@ -47,14 +47,21 @@ function StatsBar() {
           <Card key={card.key} className="h-20 animate-pulse bg-surface-sunken" />
         ) : (
           <Link key={card.key} to={card.href}>
-            <Card className={`flex flex-col gap-1 p-4 transition-colors ${card.tile}`}>
+            {/* Deliberately NOT <Card>: Card hardcodes bg-surface-raised, which
+                lands *after* the arbitrary-value bg-[var(--stat-N)] in the
+                compiled CSS and overrides it — the carnival tile colors then
+                only showed on hover. The tile's own var already defaults to
+                surface-raised, so plain themes look identical. */}
+            <div
+              className={`rounded-lg border border-border shadow-sm flex flex-col gap-1 p-4 transition-colors ${card.tile}`}
+            >
               <span className="font-body text-xs font-medium uppercase tracking-wide text-[var(--stat-fg-muted)]">
                 {card.label}
               </span>
               <span className="font-display text-2xl text-[var(--stat-fg)]">
                 {data[card.key]}
               </span>
-            </Card>
+            </div>
           </Link>
         )
       )}