Update app

app.py

@@ -201,6 +201,257 @@ def test_service():
         return f"❌ **Test Error**: {str(e)}"
 
 # Fixed CSS - Removed problematic dropdown overrides
+# custom_css = """
+# /* Global container styling */
+# .gradio-container {
+#     max-width: 1400px !important;
+#     margin: 0 auto !important;
+#     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+#     min-height: 100vh;
+#     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+# }
+
+# /* Main content area */
+# .main-content {
+#     background: rgba(255, 255, 255, 0.95) !important;
+#     backdrop-filter: blur(20px) !important;
+#     border-radius: 20px !important;
+#     padding: 2rem !important;
+#     margin: 2rem !important;
+#     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
+#     border: 1px solid rgba(255, 255, 255, 0.2) !important;
+# }
+
+# /* Header styling */
+# .finance-header {
+#     text-align: center;
+#     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+#     color: white;
+#     padding: 3rem 2rem;
+#     border-radius: 20px;
+#     margin-bottom: 2rem;
+#     position: relative;
+#     overflow: hidden;
+# }
+
+# .finance-header::before {
+#     content: "";
+#     position: absolute;
+#     top: 0;
+#     left: 0;
+#     right: 0;
+#     bottom: 0;
+#     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+#     opacity: 0.1;
+# }
+
+# .finance-header h1 {
+#     font-size: 3rem !important;
+#     font-weight: 800 !important;
+#     margin-bottom: 1rem !important;
+#     background: linear-gradient(45deg, #ffffff, #e0e7ff);
+#     -webkit-background-clip: text;
+#     -webkit-text-fill-color: transparent;
+#     position: relative;
+#     z-index: 1;
+# }
+
+# .finance-header p {
+#     font-size: 1.25rem !important;
+#     opacity: 0.9 !important;
+#     margin-bottom: 0 !important;
+#     position: relative;
+#     z-index: 1;
+# }
+
+# /* Icon styling */
+# .finance-icon {
+#     font-size: 4rem;
+#     margin-bottom: 1rem;
+#     position: relative;
+#     z-index: 1;
+# }
+
+# /* Form sections */
+# .form-section {
+#     background: white !important;
+#     border-radius: 16px !important;
+#     padding: 2rem !important;
+#     margin-bottom: 1.5rem !important;
+#     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+#     border: 1px solid rgba(255, 255, 255, 0.2) !important;
+#     transition: all 0.3s ease !important;
+# }
+
+# .form-section:hover {
+#     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
+#     transform: translateY(-2px) !important;
+# }
+
+# .form-section h3 {
+#     color: #1e3c72 !important;
+#     font-weight: 700 !important;
+#     font-size: 1.5rem !important;
+#     margin-bottom: 1.5rem !important;
+#     display: flex !important;
+#     align-items: center !important;
+#     gap: 0.75rem !important;
+# }
+
+# /* Input styling - only for textboxes and numbers, NOT dropdowns */
+# input[type="text"], input[type="number"], textarea {
+#     border-radius: 12px !important;
+#     border: 2px solid #e5e7eb !important;
+#     transition: all 0.3s ease !important;
+#     font-size: 1rem !important;
+#     padding: 0.75rem 1rem !important;
+# }
+
+# input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
+#     border-color: #667eea !important;
+#     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+#     outline: none !important;
+# }
+
+# /* Minimal dropdown styling - let Gradio handle the functionality */
+# .gradio-dropdown {
+#     margin-bottom: 1rem !important;
+# }
+
+# /* Button styling */
+# .primary-btn {
+#     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+#     border: none !important;
+#     border-radius: 12px !important;
+#     padding: 1rem 2rem !important;
+#     font-size: 1.1rem !important;
+#     font-weight: 600 !important;
+#     color: white !important;
+#     transition: all 0.3s ease !important;
+#     box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3) !important;
+#     min-height: 56px !important;
+# }
+
+# .primary-btn:hover {
+#     transform: translateY(-2px) !important;
+#     box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4) !important;
+# }
+
+# .secondary-btn {
+#     background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
+#     border: none !important;
+#     border-radius: 12px !important;
+#     padding: 1rem 2rem !important;
+#     font-size: 1.1rem !important;
+#     font-weight: 600 !important;
+#     color: white !important;
+#     transition: all 0.3s ease !important;
+#     box-shadow: 0 8px 24px rgba(100, 116, 139, 0.3) !important;
+#     min-height: 56px !important;
+# }
+
+# .secondary-btn:hover {
+#     transform: translateY(-2px) !important;
+#     box-shadow: 0 12px 32px rgba(100, 116, 139, 0.4) !important;
+# }
+
+# /* Output area styling */
+# .output-area {
+#     background: white !important;
+#     border-radius: 16px !important;
+#     padding: 2rem !important;
+#     margin-top: 2rem !important;
+#     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+#     border: 1px solid rgba(255, 255, 255, 0.2) !important;
+#     min-height: 200px !important;
+# }
+
+# /* Tips section */
+# .tips-section {
+#     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+#     border-radius: 16px !important;
+#     padding: 2rem !important;
+#     margin: 2rem 0 !important;
+#     border-left: 4px solid #667eea !important;
+# }
+
+# .tips-section h4 {
+#     color: #1e3c72 !important;
+#     font-weight: 700 !important;
+#     margin-bottom: 1rem !important;
+# }
+
+# /* Radio button styling */
+# .gradio-radio {
+#     gap: 1rem !important;
+# }
+
+# .gradio-radio label {
+#     background: white !important;
+#     border: 2px solid #e5e7eb !important;
+#     border-radius: 12px !important;
+#     padding: 1rem !important;
+#     transition: all 0.3s ease !important;
+#     cursor: pointer !important;
+# }
+
+# .gradio-radio label:hover {
+#     border-color: #667eea !important;
+#     background: #f8fafc !important;
+# }
+
+# .gradio-radio input:checked + label {
+#     border-color: #667eea !important;
+#     background: linear-gradient(135deg, #667eea10, #764ba210) !important;
+#     color: #1e3c72 !important;
+# }
+
+# /* Progress indicator */
+# .loading-indicator {
+#     background: linear-gradient(90deg, #667eea, #764ba2, #667eea) !important;
+#     background-size: 200% 100% !important;
+#     animation: gradient 2s ease infinite !important;
+# }
+
+# @keyframes gradient {
+#     0% { background-position: 0% 50%; }
+#     50% { background-position: 100% 50%; }
+#     100% { background-position: 0% 50%; }
+# }
+
+# /* Responsive design */
+# @media (max-width: 768px) {
+#     .finance-header h1 {
+#         font-size: 2rem !important;
+#     }
+    
+#     .form-section {
+#         padding: 1.5rem !important;
+#     }
+    
+#     .main-content {
+#         margin: 1rem !important;
+#         padding: 1.5rem !important;
+#     }
+# }
+
+# /* Chart and finance icons */
+# .finance-bg {
+#     position: relative;
+#     overflow: hidden;
+# }
+
+# .finance-bg::after {
+#     content: "📈📊💰🏦💳📋";
+#     position: absolute;
+#     top: -20px;
+#     right: -20px;
+#     font-size: 6rem;
+#     opacity: 0.05;
+#     z-index: 0;
+#     transform: rotate(12deg);
+# }
+# """
 custom_css = """
 /* Global container styling */
 .gradio-container {
@@ -313,11 +564,24 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     outline: none !important;
 }
 
-/* Minimal dropdown styling - let Gradio handle the functionality */
+/* Corrected dropdown styling for visibility and clickability */
+/* Ensure dropdown options appear on top and are clickable */
 .gradio-dropdown {
     margin-bottom: 1rem !important;
+    /* Add z-index to ensure dropdown options appear above other content */
+    z-index: 1000 !important;
+    position: relative !important; /* Ensure z-index takes effect */
 }
 
+/* Target the dropdown options list specifically if needed (common Gradio class for overlay) */
+.gr-box.gr-options { /* This might be the actual class for the dropdown menu */
+    z-index: 1001 !important; /* Higher than the dropdown container itself */
+    position: relative !important;
+    /* You might also need to ensure no parent has overflow: hidden that clips it */
+    overflow: visible !important;
+}
+
+
 /* Button styling */
 .primary-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -352,7 +616,7 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
 
 .secondary-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 12px 32px rgba(100, 116, 139, 0.4) !important;
+    box_shadow: 0 12px 32px rgba(100, 116, 139, 0.4) !important;
 }
 
 /* Output area styling */
@@ -424,11 +688,11 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     .finance-header h1 {
         font-size: 2rem !important;
     }
-    
+
     .form-section {
         padding: 1.5rem !important;
     }
-    
+
     .main-content {
         margin: 1rem !important;
         padding: 1.5rem !important;
@@ -453,6 +717,7 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
 }
 """
 
+
 # Create the enhanced interface
 with gr.Blocks(
     theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"),