Update style.css

style.css

@@ -1,24 +1,35 @@
-/* Clinically Healthcare UI Design Kit Styles */
+/* Clinically Healthcare UI Design Kit Styles (Gradio-Optimized) */
 :root {
-    --primary-indigo: #4F46E5;
-    --secondary-cyan: #06B6D4;
-    --bg-cream: #FFFDF5;
-    --border-soft: #E2E8F0;
-    --text-slate: #1E293B;
-    --text-muted: #475569;
-    --success-green: #10B981;
-    --warning-amber: #F59E0B;
-    --danger-red: #EF4444;
+    /* Stronger, less washed-out palette */
+    --primary-indigo: #4338CA;
+    --secondary-cyan: #0891B2;
+
+    /* Neutral background tuned for UI layering */
+    --bg-cream: #F8FAFC;
+
+    /* Stronger borders to survive Gradio tinting */
+    --border-soft: #CBD5E1;
+
+    /* High-contrast text */
+    --text-slate: #0F172A;
+    --text-muted: #334155;
+
+    /* More vivid semantic colors */
+    --success-green: #059669;
+    --warning-amber: #D97706;
+    --danger-red: #DC2626;
+
     --white: #FFFFFF;
 }
 
+/* Header */
 .header-box {
     background: var(--white);
     padding: 1.5rem;
     border-bottom: 4px solid var(--primary-indigo);
     color: var(--primary-indigo);
     text-align: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4px 16px rgba(67, 56, 202, 0.12);
 }
 
 .header-box h1 {
@@ -29,6 +40,7 @@
     color: var(--primary-indigo);
 }
 
+/* Sidebar Buttons */
 .sidebar-btn {
     margin-bottom: 10px !important;
     font-weight: 600 !important;
@@ -45,9 +57,10 @@
     border-color: var(--primary-indigo) !important;
     color: var(--white) !important;
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
+    box-shadow: 0 6px 18px rgba(67, 56, 202, 0.35);
 }
 
+/* Status blocks */
 .vibrant-status .label-wrap span {
     color: white !important;
     font-weight: 700 !important;
@@ -61,30 +74,32 @@
     min-height: 44px;
 }
 
+/* Status variants */
 .status-green {
-    background: rgba(16, 185, 129, 0.15) !important;
+    background: rgba(5, 150, 105, 0.15) !important;
     border: 1px solid var(--success-green) !important;
-    color: #065F46 !important;
+    color: #064E3B !important;
     border-radius: 8px !important;
     padding: 8px 12px !important;
 }
 
 .status-orange {
-    background: rgba(245, 158, 11, 0.15) !important;
+    background: rgba(217, 119, 6, 0.15) !important;
     border: 1px solid var(--warning-amber) !important;
-    color: #92400E !important;
+    color: #78350F !important;
     border-radius: 8px !important;
     padding: 8px 12px !important;
 }
 
 .status-red {
-    background: rgba(239, 68, 68, 0.15) !important;
+    background: rgba(220, 38, 38, 0.15) !important;
     border: 1px solid var(--danger-red) !important;
-    color: #991B1B !important;
+    color: #7F1D1D !important;
     border-radius: 8px !important;
     padding: 8px 12px !important;
 }
 
+/* Loading spinner */
 .loading-spinner {
     display: inline-flex;
     align-items: center;
@@ -98,7 +113,7 @@
     display: inline-block;
     width: 18px;
     height: 18px;
-    border: 3px solid rgba(79, 70, 229, 0.2);
+    border: 3px solid rgba(67, 56, 202, 0.2);
     border-top-color: var(--primary-indigo);
     border-radius: 50%;
     animation: hr-spin 0.8s linear infinite;
@@ -110,8 +125,10 @@
     }
 }
 
+/* Page layout */
 .page-container {
     padding: 0.5rem 1.5rem 2rem 1.5rem;
+    background: var(--bg-cream);
 }
 
 .page-title {
@@ -121,4 +138,15 @@
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 2px solid var(--border-soft);
+}
+
+/* Optional: improve Gradio component blending */
+input, textarea, select {
+    border-color: var(--border-soft) !important;
+    color: var(--text-slate);
+}
+
+input:focus, textarea:focus, select:focus {
+    border-color: var(--primary-indigo) !important;
+    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15) !important;
 }