Update ui/styles.py

ui/styles.py

@@ -1,7 +1,10 @@
 """
-CSS styles and themes
+CSS styles and themes - FIXED VERSION
 """
 
+# IMPORT gradio at the top of the file
+import gradio as gr
+
 CUSTOM_CSS = """
 /* Main container */
 .gradio-container {
@@ -25,22 +28,16 @@ h1 {
 }
 
 /* Buttons */
-.gradio-button.primary {
+button.primary {
     background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
     color: white !important;
     border: none !important;
     font-weight: 600 !important;
     padding: 12px 24px !important;
     border-radius: 8px !important;
-    transition: transform 0.2s, box-shadow 0.2s !important;
-}
-
-.gradio-button.primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
 }
 
-.gradio-button.secondary {
+button.secondary {
     background: linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%) !important;
     color: white !important;
     border: none !important;
@@ -49,19 +46,6 @@ h1 {
     border-radius: 8px !important;
 }
 
-/* Tabs */
-.gradio-tab {
-    border-bottom: 2px solid transparent !important;
-    padding: 12px 24px !important;
-    font-weight: 500 !important;
-}
-
-.gradio-tab.selected {
-    border-bottom: 2px solid #667eea !important;
-    color: #667eea !important;
-    font-weight: 600 !important;
-}
-
 /* JSON displays */
 .gr-json {
     border: 1px solid #e2e8f0 !important;
@@ -72,56 +56,6 @@ h1 {
     font-size: 13px !important;
 }
 
-/* Checkboxes and radios */
-.gr-checkbox, .gr-radio {
-    padding: 10px !important;
-    border-radius: 6px !important;
-    border: 1px solid #e2e8f0 !important;
-}
-
-.gr-checkbox:hover, .gr-radio:hover {
-    border-color: #667eea !important;
-    background: #f8fafc !important;
-}
-
-/* Sliders */
-.gr-slider {
-    padding: 20px 0 !important;
-}
-
-.gr-slider .range {
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
-}
-
-/* Dataframes */
-.gr-dataframe {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 8px !important;
-    overflow: hidden !important;
-}
-
-.gr-dataframe th {
-    background: #f8fafc !important;
-    color: #1a365d !important;
-    font-weight: 600 !important;
-    padding: 12px !important;
-    border-bottom: 2px solid #e2e8f0 !important;
-}
-
-.gr-dataframe td {
-    padding: 10px !important;
-    border-bottom: 1px solid #e2e8f0 !important;
-}
-
-/* Plot containers */
-.gr-plot {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 10px !important;
-    padding: 15px !important;
-    background: white !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
-}
-
 /* Custom classes */
 .critical-metric {
     background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,107,107,0.2) 100%) !important;
@@ -159,7 +93,6 @@ h1 {
     border-radius: 10px !important;
     margin: 15px 0 !important;
     border-left: 5px solid #4ECDC4 !important;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
 }
 
 /* Footer */
@@ -172,6 +105,7 @@ h1 {
 }
 """
 
+# Now gr is defined, so this won't cause an error
 THEME = gr.themes.Soft(
     primary_hue="purple",
     secondary_hue="teal",
@@ -188,7 +122,5 @@ THEME = gr.themes.Soft(
     background_fill_primary="#f8fafc",
     background_fill_secondary="#ffffff",
     border_color_primary="#e2e8f0",
-    border_color_secondary="#cbd5e0",
-    shadow_spread="2px",
-    shadow_spread_dark="1px"
+    border_color_secondary="#cbd5e0"
 )