From 4bcbb9134da1d748aac79c2b747fe588e16de6b7 Mon Sep 17 00:00:00 2001
From: Deco Vander <deco@deco.sh>
Date: Thu, 3 Jul 2025 20:59:10 -0400
Subject: [PATCH] Fix dark mode text readability in table view and other
 elements

- Updated table cell colors to use CSS variables instead of hardcoded values
- Fixed location-cell, details-cell, time-cell text colors for dark mode
- Improved contrast with opacity adjustments for secondary text
- Updated status colors (urgent/warning/normal) to work better in dark mode
- Fixed autocomplete, input-help, disclaimer, and table-info text colors
- All text now properly adapts to both light and dark themes
---
 public/style.css | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/public/style.css b/public/style.css
index c63c8d0..252f1c3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -163,7 +163,8 @@ input[type="text"], textarea {
 .autocomplete-item {
     padding: 10px;
     cursor: pointer;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-color);
 }
 
 .autocomplete-item:hover,
@@ -176,7 +177,8 @@ input[type="text"], textarea {
 }
 
 .input-help {
-    color: #666;
+    color: var(--text-color);
+    opacity: 0.7;
     font-size: 0.85em;
     margin-top: 4px;
     display: block;
@@ -266,7 +268,8 @@ footer {
 
 .disclaimer {
     font-size: 0.8em;
-    color: #777;
+    color: var(--text-color);
+    opacity: 0.7;
 }
 
 /* Reports header and toggle */
@@ -362,19 +365,21 @@ footer {
 }
 
 .table-info {
-    color: #666;
+    color: var(--text-color);
+    opacity: 0.7;
     font-size: 14px;
 }
 
 /* Table cell specific styles */
 .location-cell {
     font-weight: 500;
-    color: #495057;
+    color: var(--text-color);
     max-width: 250px;
 }
 
 .details-cell {
-    color: #6c757d;
+    color: var(--text-color);
+    opacity: 0.8;
     font-style: italic;
     max-width: 200px;
     overflow: hidden;
@@ -384,31 +389,34 @@ footer {
 
 .time-cell {
     font-size: 12px;
-    color: #868e96;
+    color: var(--text-color);
+    opacity: 0.7;
 }
 
 .remaining-cell {
     font-weight: 500;
     font-size: 12px;
+    color: var(--text-color);
 }
 
 .remaining-cell.urgent {
-    color: #dc3545;
+    color: #ff6b6b;
     font-weight: 600;
 }
 
 .remaining-cell.warning {
-    color: #fd7e14;
+    color: #ffa726;
     font-weight: 600;
 }
 
 .remaining-cell.normal {
-    color: #28a745;
+    color: #66bb6a;
 }
 
 .loading {
     text-align: center;
-    color: #6c757d;
+    color: var(--text-color);
+    opacity: 0.7;
     font-style: italic;
 }