From 2ae47232cb199a8ba8f8b21c762889bd6200386b Mon Sep 17 00:00:00 2001
From: Joerg <joerg@dj7nt.de>
Date: Fri, 23 Jan 2026 14:07:23 +0100
Subject: [PATCH] fix: improve dark mode contrast for Points and Target badges
 in award detail view

Replace inline styles with CSS classes that use semi-transparent
backgrounds in dark mode instead of bright solid colors.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/routes/awards/[id]/+page.svelte       | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/routes/awards/[id]/+page.svelte b/src/frontend/src/routes/awards/[id]/+page.svelte
index fddcf1b..cc67052 100644
--- a/src/frontend/src/routes/awards/[id]/+page.svelte
+++ b/src/frontend/src/routes/awards/[id]/+page.svelte
@@ -631,7 +631,7 @@
           <span class="summary-label">Confirmed:</span>
           <span class="summary-value">{filteredEntities.filter((e) => e.confirmed).length}</span>
         </div>
-        <div class="summary-card" style="background-color: #fff3cd; border-color: #ffc107;">
+        <div class="summary-card points">
           <span class="summary-label">Points:</span>
           <span class="summary-value">{earnedPoints}</span>
         </div>
@@ -640,7 +640,7 @@
             <span class="summary-label">Needed:</span>
             <span class="summary-value">{neededPoints}</span>
           </div>
-          <div class="summary-card" style="background-color: #e3f2fd; border-color: #2196f3;">
+          <div class="summary-card target">
             <span class="summary-label">Target:</span>
             <span class="summary-value">{targetPoints}</span>
           </div>
@@ -665,7 +665,7 @@
             <span class="summary-label">Needed:</span>
             <span class="summary-value">{neededCount}</span>
           </div>
-          <div class="summary-card" style="background-color: #e3f2fd; border-color: #2196f3;">
+          <div class="summary-card target">
             <span class="summary-label">Target:</span>
             <span class="summary-value">{targetCount}</span>
           </div>
@@ -1141,6 +1141,24 @@
     background-color: var(--color-warning-bg);
   }
 
+  .summary-card.points {
+    border-color: #ff9800;
+    background-color: var(--bg-secondary);
+  }
+
+  :global(.dark) .summary-card.points {
+    background-color: rgba(255, 152, 0, 0.15);
+  }
+
+  .summary-card.target {
+    border-color: var(--color-primary);
+    background-color: var(--bg-secondary);
+  }
+
+  :global(.dark) .summary-card.target {
+    background-color: rgba(33, 150, 243, 0.15);
+  }
+
   .summary-label {
     display: block;
     font-size: 0.875rem;