UI v32

app.py

@@ -303,14 +303,14 @@ Answer:"""
         
         /* Root variables for consistent theming - adjusted for an inviting orange palette */
         :root {
-            --primary-color: #FF8000; /* Vibrant Orange */
-            --primary-hover: #E67300; /* Slightly darker orange */
-            --background-primary: #FFF5E0; /* Very light cream/off-white for cards */
-            --background-secondary: #FAEBD7; /* Slightly darker cream for overall app background */
+            --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
+            --primary-hover: #E07B00; /* Slightly darker orange for hover */
+            --background-primary: #FFF8F0; /* Very light cream/off-white for main cards, inputs, output area */
+            --background-secondary: #FDEBD9; /* Slightly darker cream for overall app background, table headers, placeholder */
             --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
             --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
             --border-color: #DDC6AF; /* Light, desaturated orange-brown for borders */
-            --border-focus: #FF8000; /* Focus color matches primary */
+            --border-focus: #FF8C00; /* Focus color matches primary */
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
@@ -367,8 +367,8 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(255,128,0,0.05) 0%, transparent 40%),
-                        radial-gradient(circle at bottom right, rgba(255,128,0,0.05) 0%, transparent 40%);
+            background: radial-gradient(circle at top left, rgba(255,140,0,0.05) 0%, transparent 40%),
+                        radial-gradient(circle at bottom right, rgba(255,140,0,0.05) 0%, transparent 40%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
@@ -422,7 +422,7 @@ Answer:"""
         }
         /* Card sections with clear boundaries (boundeyes) and subtle dynamic effects */
         .dashboard-card-section {
-            background: var(--background-primary) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background */
             border: 2px solid var(--border-color) !important; /* Distinct border */
             border-radius: 12px !important;
             padding: 1.75rem !important; /* Consistent padding */
@@ -454,6 +454,7 @@ Answer:"""
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
+            text-align: left !important; /* Ensure content text is left-aligned */
         }
         .dashboard-card-section strong {
             color: var(--primary-color) !important; /* Highlight strong text with primary color */
@@ -469,13 +470,13 @@ Answer:"""
         .gradio-dropdown .primary-wrap, /* Target dropdown wrapper */
         .gradio-dropdown .scroll-hide /* Target dropdown list container for consistency */
         {
-            background: var(--background-primary) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background to primary cream */
             border: 2px solid var(--border-color) !important; /* Clear border */
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important; /* Slightly more padding */
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important;
+            color: var(--text-primary) !important; /* Text color inside inputs */
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Smooth transitions */
             box-shadow: var(--shadow-sm) !important;
         }
@@ -485,7 +486,7 @@ Answer:"""
         .gradio-dropdown .primary-wrap.focused { /* Apply focus style to dropdown wrap */
             outline: none !important;
             border-color: var(--border-focus) !important; /* Distinct border on focus */
-            box-shadow: 0 0 0 4px rgba(255, 128, 0, 0.2) !important; /* Broader, softer glow on focus */
+            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Broader, softer glow on focus */
         }
 
         /* Label styling for better readability */
@@ -532,12 +533,12 @@ Answer:"""
             text-align: center !important; /* Ensure button text is centered */
         }
         .gr-button-primary {
-            background: var(--primary-color) !important;
+            background-color: var(--primary-color) !important; /* Explicitly set background */
             color: white !important;
             box-shadow: var(--shadow-sm) !important;
         }
         .gr-button-primary:hover {
-            background: var(--primary-hover) !important;
+            background-color: var(--primary-hover) !important; /* Explicitly set background */
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important; /* Subtle lift effect on hover */
         }
@@ -546,12 +547,12 @@ Answer:"""
             box-shadow: none !important;
         }
         .gr-button-secondary {
-            background: transparent !important;
+            background-color: transparent !important; /* Explicitly set background */
             color: var(--text-primary) !important;
             border-color: var(--border-color) !important;
         }
         .gr-button-secondary:hover {
-            background: var(--background-secondary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
             border-color: var(--primary-color) !important;
             transform: translateY(-2px) !important;
         }
@@ -562,7 +563,7 @@ Answer:"""
 
         /* Output styling with clear boundaries (boundeyes are clear) and dynamic fade-in */
         .output-content-wrapper {
-            background: var(--background-primary) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background */
             border: 2px solid var(--border-color) !important; /* Clear border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
@@ -598,6 +599,9 @@ Answer:"""
             display: flex !important;
             align-items: center !important;
             gap: 0.6rem !important;
+            text-align: left !important; /* Ensure header itself is not affected by parent centering */
+            width: 100%; /* Take full width */
+            justify-content: flex-start; /* Align content to the start */
         }
         .response-icon {
             font-size: 1.5rem !important;
@@ -610,7 +614,7 @@ Answer:"""
         }
         /* Error message styling */
         .error-message {
-            background: var(--error-bg) !important;
+            background-color: var(--error-bg) !important; /* Explicitly set background */
             border: 2px solid var(--error-border) !important;
             color: var(--error-text) !important;
             padding: 1.25rem !important;
@@ -642,11 +646,11 @@ Answer:"""
         }
         /* Placeholder styling for empty output */
         .placeholder {
-            background: var(--background-secondary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
             border: 2px dashed var(--border-color) !important;
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
-            text-align: center !important;
+            text-align: center !important; /* Ensure placeholder text is centered */
             color: var(--text-secondary) !important;
             font-style: italic !important;
             font-size: 1.1rem !important;
@@ -669,19 +673,19 @@ Answer:"""
             text-align: left !important; /* Ensure example text is left-aligned */
         }
         .examples-section .gr-samples-table th {
-            background: var(--background-secondary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
             font-weight: 700 !important;
             color: var(--text-primary) !important;
         }
         .examples-section .gr-samples-table td {
-            background: var(--background-primary) !important;
+            background-color: var(--background-primary) !important; /* Explicitly set background */
             color: var(--text-primary) !important;
             border-top: 1px solid var(--border-color) !important;
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important; /* Smooth transitions */
         }
         .examples-section .gr-samples-table tr:hover td {
-            background: var(--background-secondary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
             transform: translateX(5px); /* Subtle slide on hover */
         }
         /* Hide Gradio default elements for examples for cleaner look */
@@ -693,11 +697,12 @@ Answer:"""
         
         /* Footer styling - centered text */
         .app-footer-wrapper {
-            background: var(--background-secondary) !important;
+            background-color: var(--background-secondary) !important; /* Explicitly set background */
             border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
             margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important; /* Ensures space at the very bottom before the container padding */
             text-align: center !important; /* Centered footer text */
         }
         .app-footer p {
@@ -752,6 +757,8 @@ Answer:"""
         """
 
         # Using gr.Blocks with the specified theme and custom CSS
+        # Note: While a theme is specified, most stylistic aspects are overridden by custom_css.
+        # This keeps the underlying Gradio structure but allows full visual control.
         with gr.Blocks(theme="shivi/calm_seafoam", css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             # Header Section - uses gr.Group for distinct card-like styling
             with gr.Group(elem_classes="app-header-wrapper"):