From ae2d80f3c90ccdc9c2ec7d3b526fdb6570cf7681 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Sun, 24 Aug 2025 15:00:11 +0200
Subject: [PATCH] Fix white-on-white text visibility in aircraft popups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Override Leaflet's default popup styles with !important declarations to ensure
proper text visibility in aircraft information popups:
- Set dark background (#2d2d2d) for popup content wrapper and tip
- Force white text color (#ffffff) for all popup text elements
- Ensure labels remain muted gray (#888) for visual hierarchy
- Preserve accent colors for flight ID (blue) and callsign (green)

The issue was caused by Leaflet CSS overriding custom popup styling,
resulting in poor readability with white text on white backgrounds.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/static/css/style.css | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 0f2e125..17086e7 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -362,20 +362,39 @@ body {
     z-index: 1000;
 }
 
+/* Leaflet popup override - ensure our styles take precedence */
+.leaflet-popup-content-wrapper {
+    background: #2d2d2d !important;
+    color: #ffffff !important;
+    border-radius: 8px;
+}
+
+.leaflet-popup-content {
+    margin: 12px !important;
+    color: #ffffff !important;
+}
+
+.leaflet-popup-tip {
+    background: #2d2d2d !important;
+}
+
 .aircraft-popup {
     min-width: 300px;
     max-width: 400px;
+    color: #ffffff !important;
 }
 
 .popup-header {
     border-bottom: 1px solid #404040;
     padding-bottom: 0.5rem;
     margin-bottom: 0.75rem;
+    color: #ffffff !important;
 }
 
 .flight-info {
     font-size: 1.1rem;
     font-weight: bold;
+    color: #ffffff !important;
 }
 
 .icao-flag {
@@ -384,21 +403,27 @@ body {
 }
 
 .flight-id {
-    color: #00a8ff;
+    color: #00a8ff !important;
     font-family: monospace;
 }
 
 .callsign {
-    color: #00ff88;
+    color: #00ff88 !important;
 }
 
 .popup-details {
     font-size: 0.9rem;
+    color: #ffffff !important;
 }
 
 .detail-row {
     margin-bottom: 0.5rem;
     padding: 0.25rem 0;
+    color: #ffffff !important;
+}
+
+.detail-row strong {
+    color: #ffffff !important;
 }
 
 .detail-grid {
@@ -415,13 +440,13 @@ body {
 
 .detail-item .label {
     font-size: 0.8rem;
-    color: #888;
+    color: #888 !important;
     margin-bottom: 0.1rem;
 }
 
 .detail-item .value {
     font-weight: bold;
-    color: #ffffff;
+    color: #ffffff !important;
 }
 
 @media (max-width: 768px) {