From 5464eb19a1d373a0bb0a896953e055d286d0675d Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 14:29:52 +0200
Subject: [PATCH] style: fix badge centering over flags, plain theme toggle
 icon

- badgeRow now uses same gap (10px) as matchRow for exact alignment
- Theme toggle: removed button box, plain icon like admin gear
- Both icons use text-secondary color, consistent style

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.module.css                  | 15 ++++++---------
 frontend/src/components/MatchCard.module.css |  9 ++++++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.module.css b/frontend/src/App.module.css
index a7346a7..6dc0228 100644
--- a/frontend/src/App.module.css
+++ b/frontend/src/App.module.css
@@ -74,21 +74,18 @@
 }
 
 .themeToggle {
-  background: var(--surface-high);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  width: 34px;
-  height: 34px;
+  background: none;
+  border: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  padding: 4px;
   cursor: pointer;
-  transition: background 0.15s, transform 0.1s;
+  transition: color 0.2s;
   flex-shrink: 0;
-  color: var(--gold);
+  color: var(--text-secondary);
 }
-.themeToggle:hover { background: var(--primary-dim); }
+.themeToggle:hover { color: var(--text-primary); }
 .themeToggle:active { transform: scale(0.92); }
 
 .main {
diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index 62e117b..2295a5c 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -21,21 +21,24 @@
     inset 0 1px 0 rgba(255,255,255,0.07) !important;
 }
 
-/* Badge row — same flex proportions as matchRow so badges align over flags */
+/* Badge row — mirrors matchRow layout for centered alignment */
 .badgeRow {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  gap: 10px;
+  margin-bottom: 6px;
 }
 
 .badgeSlot {
   flex: 1;
   display: flex;
   justify-content: center;
+  min-width: 0;
 }
 
 .badgeSpacer {
-  min-width: 60px; /* matches scoreBox width */
+  min-width: 60px; /* matches scoreBox min-width */
+  flex-shrink: 0;
 }
 
 .status {