Fix log viewer readability — add missing CSS utility classes (#244)

* fix(web): add missing utility classes for log viewer readability

The log viewer uses text-gray-100, text-gray-200, text-gray-300,
text-red-300, text-yellow-300, bg-gray-800, bg-red-900, bg-yellow-900,
border-gray-700, and hover:bg-gray-800 — none of which were defined in
app.css. Without definitions, log text inherited the body's dark color
(#111827) which was invisible against the dark bg-gray-900 log container
in light mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web): remove dead bg-opacity classes, use proper log level colors

The bg-opacity-10/bg-opacity-30 classes set a --bg-opacity CSS variable
that no background-color rule consumed, making them dead code. Replace
the broken two-class pattern (e.g. "bg-red-900 bg-opacity-10") with
dedicated log-level-error/warning/debug classes that use rgb() with
actual alpha values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Chuck <chuck@example.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

web_interface/static/v3/app.css

@@ -101,6 +101,7 @@ body {
 /* Utility classes */
 .bg-gray-50 { background-color: #f9fafb; }
 .bg-white { background-color: #ffffff; }
+.bg-gray-800 { background-color: #1f2937; }
 .bg-gray-900 { background-color: #111827; }
 .bg-green-500 { background-color: #10b981; }
 .bg-red-500 { background-color: #ef4444; }
@@ -112,16 +113,27 @@ body {
 .bg-yellow-600 { background-color: #d97706; }
 .bg-gray-200 { background-color: #e5e7eb; }
 
+/* Log level row backgrounds (subtle tints on dark log container) */
+.log-level-error { background-color: rgb(127 29 29 / 10%); }
+.log-level-warning { background-color: rgb(120 53 15 / 10%); }
+.log-level-debug { background-color: rgb(31 41 55 / 30%); }
+
+.text-gray-100 { color: #f3f4f6; }
+.text-gray-200 { color: #e5e7eb; }
+.text-gray-300 { color: #d1d5db; }
 .text-gray-900 { color: #111827; }
 .text-gray-600 { color: #374151; }
 .text-gray-500 { color: #4b5563; }
 .text-gray-400 { color: #6b7280; }
+.text-red-300 { color: #fca5a5; }
+.text-yellow-300 { color: #fcd34d; }
 .text-white { color: #ffffff; }
 .text-green-600 { color: #059669; }
 .text-red-600 { color: #dc2626; }
 
 .border-gray-200 { border-color: #e5e7eb; }
 .border-gray-300 { border-color: #d1d5db; }
+.border-gray-700 { border-color: #374151; }
 .border-transparent { border-color: transparent; }
 
 .rounded-lg { border-radius: 0.5rem; }
@@ -249,6 +261,7 @@ h4 { font-size: 1.125rem; }
 .hover\:bg-green-700:hover { background-color: #047857; }
 .hover\:bg-red-700:hover { background-color: #b91c1c; }
 .hover\:bg-gray-50:hover { background-color: #f9fafb; }
+.hover\:bg-gray-800:hover { background-color: #1f2937; }
 .hover\:bg-yellow-700:hover { background-color: #b45309; }
 .hover\:text-gray-700:hover { color: #374151; }
 .hover\:border-gray-300:hover { border-color: #d1d5db; }

web_interface/templates/v3/partials/logs.html

@@ -380,10 +380,10 @@ function renderLogs() {
 function getLogLevelClass(level) {
     // Background color for the entire log entry row
     const classes = {
-        'ERROR': 'bg-red-900 bg-opacity-10',
+        'ERROR': 'log-level-error',
-        'WARNING': 'bg-yellow-900 bg-opacity-10',
+        'WARNING': 'log-level-warning',
         'INFO': '',
-        'DEBUG': 'bg-gray-800 bg-opacity-30'
+        'DEBUG': 'log-level-debug'
     };
     return classes[level] || '';
 }