Update app.py

app.py

@@ -239,33 +239,49 @@ if fetch_data:
             completeness_df = pd.DataFrame({"Field": completeness.index, "Completeness (%)": completeness.values})
             completeness_table = completeness_df.set_index("Field")
         
-            # Prepare styled quick stats
-            quick_stats_df_reset = quick_stats_df.reset_index(drop=True)  # 👈 resets and drops the index completely
+            # Prepare Quick Stats
+            quick_stats_df_reset = quick_stats_df.reset_index(drop=True)
             
+            # Apply background gradient to values
             styled_stats = (
                 quick_stats_df_reset.style
-                .background_gradient(cmap="Orangess", subset=["Value"])  # 🔥 your red gradient
+                .background_gradient(cmap="Reds", subset=["Value"])  # 🔥 red theme
                 .format({"Value": "{:.1f}"})
                 .set_properties(**{
                     "text-align": "center",
-                    "color": "#1A1A1A",
-                    "font-size": "0.95rem",
-                    "font-weight": "bold"
+                    "color": "lightgray",
+                    "font-size": "1rem",
+                    "font-weight": "bold",
+                    "border-color": "#2b2b2b",
                 })
             )
             
-            # Render without showing index
+            # Custom CSS Card Wrapper
+            st.sidebar.markdown("""
+                <div style='
+                    background-color: #2e2e2e;
+                    padding: 1.5rem;
+                    border-radius: 12px;
+                    margin-bottom: 1.5rem;
+                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+                    transition: transform 0.3s ease, box-shadow 0.3s ease;
+                ' 
+                onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='0 12px 24px rgba(0,0,0,0.4)';"
+                onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 8px 16px rgba(0,0,0,0.3)';"
+                >
+                    <h4 style='color: #ff7f7f; margin-bottom: 1rem;'>📊 Quick Stats</h4>
+            """, unsafe_allow_html=True)
+            
+            # Render styled table inside the "card"
             st.sidebar.dataframe(
                 styled_stats,
                 use_container_width=True,
-                height=240,
-                hide_index=True  # 👈 this hides any leftover index
+                height=250,
+                hide_index=True
             )
-
-
-            # Display using st.table for clean appearance
-            st.sidebar.table(styled_stats)
-
+            
+            # Close the div
+            st.sidebar.markdown("</div>", unsafe_allow_html=True)
 
             # Calculate Top 10 Subjects
             if 'subject' in metadata_df.columns: