feat: Improve theme CSS mappings for comprehensive styling

Rewrite Tailwind class overrides to be much more comprehensive and accurate:

- Page backgrounds (main, panels, cards, badges)
- All text colors (primary, muted, status-specific)
- Border colors and dividers
- Status colors for all states (up, degraded, down, unknown)
- Status banners with proper color-mixed backgrounds
- Interactive hover states (group headers, monitor cards)
- SVG icon colors
- Tooltip styling with theme colors
- Status indicator dots with proper colors

Uses color-mix() for subtle background tints on status banners.
Targets exact Tailwind classes used in the actual HTML output.

1 files changed, 108 insertions, 40 deletions

diff --git a/internal/theme/theme.go b/internal/theme/theme.go
index 10d6828..ac0fff9 100644
--- a/internal/theme/theme.go
+++ b/internal/theme/theme.go
@@ -190,59 +190,61 @@ func (t *ResolvedTheme) GenerateTailwindMappings() string {
 	}
 
 	return `
-/* Override Tailwind classes with OpenCode theme colors */
+/* OpenCode Theme Tailwind Overrides */
 
-/* Background colors */
-.bg-white,
-.dark .bg-neutral-900 { 
+/* ===== Page Background ===== */
+.bg-neutral-50,
+.dark .bg-neutral-950 { 
 	background-color: var(--theme-background) !important; 
 }
 
-.bg-neutral-50,
+/* ===== Panels & Cards ===== */
+/* Group headers */
 .bg-neutral-100,
-.dark .bg-neutral-950,
-.dark .bg-neutral-800 { 
+.dark .bg-neutral-900 { 
 	background-color: var(--theme-background-panel) !important; 
 }
 
+/* Badges, secondary elements */
 .bg-neutral-200,
-.dark .bg-neutral-700 { 
+.dark .bg-neutral-800 { 
 	background-color: var(--theme-background-element) !important; 
 }
 
-/* Text colors */
+/* ===== Text Colors ===== */
+/* Primary text */
 .text-neutral-900,
 .text-neutral-950,
 .dark .text-white,
-.dark .text-neutral-50 { 
+.dark .text-neutral-100 { 
 	color: var(--theme-text) !important; 
 }
 
+/* Muted/secondary text */
 .text-neutral-500,
 .text-neutral-600,
 .text-neutral-700,
-.dark .text-neutral-300,
 .dark .text-neutral-400,
 .dark .text-neutral-500 { 
 	color: var(--theme-text-muted) !important; 
 }
 
-/* Border colors */
+/* ===== Borders ===== */
 .border-neutral-200,
-.border-neutral-300,
-.dark .border-neutral-700,
 .dark .border-neutral-800 { 
 	border-color: var(--theme-border) !important; 
 }
 
-.divide-neutral-200,
-.dark .divide-neutral-800 { 
+.divide-neutral-200 > * + *,
+.dark .divide-neutral-800 > * + * { 
 	border-color: var(--theme-border) !important; 
 }
 
-/* Status colors - up/success */
+/* ===== Status Colors ===== */
+/* Success/Up - status indicators and text */
+.bg-emerald-500,
 .bg-emerald-500.rounded-full,
-.bg-emerald-500.flex-shrink-0 { 
+.bg-emerald-500.animate-pulse { 
 	background-color: var(--theme-success) !important; 
 }
 
@@ -252,21 +254,20 @@ func (t *ResolvedTheme) GenerateTailwindMappings() string {
 	color: var(--theme-success) !important; 
 }
 
-/* Status colors - down/error */
-.bg-red-500.rounded-full,
-.bg-red-500.flex-shrink-0 { 
-	background-color: var(--theme-error) !important; 
+/* Status banner - success background */
+.bg-emerald-50,
+.dark .bg-emerald-950\/30 { 
+	background-color: color-mix(in srgb, var(--theme-success) 10%, transparent) !important; 
 }
 
-.text-red-500,
-.text-red-600,
-.dark .text-red-400 { 
-	color: var(--theme-error) !important; 
+.border-emerald-200,
+.dark .border-emerald-900 { 
+	border-color: color-mix(in srgb, var(--theme-success) 30%, var(--theme-border)) !important; 
 }
 
-/* Status colors - degraded/warning */
-.bg-yellow-500.rounded-full,
-.bg-yellow-500.flex-shrink-0 { 
+/* Warning/Degraded - status indicators and text */
+.bg-yellow-500,
+.bg-yellow-500.rounded-full { 
 	background-color: var(--theme-warning) !important; 
 }
 
@@ -276,26 +277,93 @@ func (t *ResolvedTheme) GenerateTailwindMappings() string {
 	color: var(--theme-warning) !important; 
 }
 
-/* Neutral/unknown status */
-.bg-neutral-400.rounded-full { 
-	background-color: var(--theme-text-muted) !important; 
+/* Status banner - warning background */
+.bg-yellow-50,
+.dark .bg-yellow-950\/30 { 
+	background-color: color-mix(in srgb, var(--theme-warning) 10%, transparent) !important; 
 }
 
-/* Hover states */
-.hover\:bg-neutral-100:hover,
-.dark .hover\:bg-neutral-900:hover { 
-	background-color: var(--theme-background-element) !important; 
+.border-yellow-200,
+.dark .border-yellow-900 { 
+	border-color: color-mix(in srgb, var(--theme-warning) 30%, var(--theme-border)) !important; 
+}
+
+/* Error/Down - status indicators and text */
+.bg-red-500,
+.bg-red-500.rounded-full { 
+	background-color: var(--theme-error) !important; 
+}
+
+.text-red-500,
+.text-red-600,
+.dark .text-red-400 { 
+	color: var(--theme-error) !important; 
 }
 
+/* Status banner - error background */
+.bg-red-50,
+.dark .bg-red-950\/30 { 
+	background-color: color-mix(in srgb, var(--theme-error) 10%, transparent) !important; 
+}
+
+.border-red-200,
+.dark .border-red-900 { 
+	border-color: color-mix(in srgb, var(--theme-error) 30%, var(--theme-border)) !important; 
+}
+
+/* Unknown status */
+.bg-neutral-400.rounded-full { 
+	background-color: var(--theme-text-muted) !important; 
+}
+
+/* ===== Interactive States ===== */
+/* Hover on group headers */
 .hover\:bg-neutral-200:hover,
 .dark .hover\:bg-neutral-800:hover { 
 	background-color: var(--theme-border) !important; 
 }
 
-/* Link colors */
-a.text-blue-600,
-a.dark\:text-blue-400 {
-	color: var(--theme-primary) !important;
+/* Hover on monitor cards */
+.hover\:bg-neutral-100\/50:hover,
+.dark .hover\:bg-neutral-900\/50:hover { 
+	background-color: color-mix(in srgb, var(--theme-background-panel) 50%, transparent) !important; 
+}
+
+/* ===== SVG Icons ===== */
+.text-neutral-600.transition-transform,
+.dark .text-neutral-400.transition-transform {
+	color: var(--theme-text-muted) !important;
+}
+
+/* ===== Tooltip ===== */
+.tooltip {
+	background-color: var(--theme-background-panel) !important;
+	border-color: var(--theme-border) !important;
+	color: var(--theme-text) !important;
+}
+
+.tooltip-header {
+	color: var(--theme-text) !important;
+}
+
+.tooltip-label {
+	color: var(--theme-text-muted) !important;
+}
+
+.tooltip-value {
+	color: var(--theme-text) !important;
+}
+
+.tooltip-value.success {
+	color: var(--theme-success) !important;
+}
+
+.tooltip-value.error {
+	color: var(--theme-error) !important;
+}
+
+.tooltip-value.warning {
+	color: var(--theme-warning) !important;
 }
 `
 }