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;
 }