UI v31

app.py

@@ -35,7 +35,7 @@ logging.basicConfig(
     format='%(asctime)s - %(levelname)s - [%(filename)s:%(lineno)d] - %(message)s'
 )
 
-# --- RAGSystem Class (Processing Logic - KEPT INTACT AS REQUESTED) ---
+# --- RAGSystem Class (Processing Logic - KEPT INTACT) ---
 class RAGSystem:
     def __init__(self, vector_db: Optional[VectorDatabase] = None):
         logging.info("Initializing RAGSystem")
@@ -239,7 +239,7 @@ Answer:"""
             logging.error(f"Failed to load or process PDF '{pdf_path}': {str(e)}", exc_info=True)
             raise RuntimeError(f"Failed to process PDF '{pdf_path}': {e}") from e
 
-    # --- GRADIO INTERFACE (NEW UI DESIGN BASED ON VERBAL REQUIREMENTS) ---
+    # --- GRADIO INTERFACE (PROFESSIONAL DESIGN) ---
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
@@ -255,7 +255,6 @@ Answer:"""
             if "<div class='error-message'>" in answer:
                 return answer
             else:
-                # Use Markdown.format to correctly render markdown inside the HTML output
                 formatted_response_content = gr.Markdown.format(
                     f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
                 )
@@ -286,46 +285,44 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # Custom CSS for the light theme with clear boxes and dynamic effects
+        # Custom CSS for a professional, light, dynamic dashboard
         custom_css = """
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
         
         /* Root variables for consistent theming */
         :root {
-            --primary-color: hsl(28, 90%, 50%); /* Vibrant Orange for primary action/highlights */
-            --primary-hover: hsl(28, 90%, 45%);
-            --accent-orange: hsl(28, 90%, 55%); /* Slightly brighter orange for specific text */
-            --accent-blue: hsl(200, 70%, 35%); /* Deep Blue for main title/section headers */
-            --accent-blue-light: hsl(200, 70%, 90%); /* Light blue for header background tint */
+            --primary-color: hsl(210, 70%, 45%); /* Professional deep blue */
+            --primary-hover: hsl(210, 70%, 35%);
+            --secondary-accent-color: hsl(40, 80%, 55%); /* Warm amber/gold for highlights */
+            --secondary-accent-hover: hsl(40, 80%, 45%);
             
-            --background-app: hsl(0, 0%, 98%); /* Very light, off-white for overall background */
-            --background-header-start: hsl(40, 90%, 95%); /* Light yellow for header gradient start */
-            --background-header-end: hsl(28, 90%, 95%); /* Light orange for header gradient end */
+            --background-app: hsl(200, 20%, 96%); /* Very light blue-gray for overall background */
+            --background-header: linear-gradient(135deg, hsl(200, 40%, 90%) 0%, hsl(210, 40%, 85%) 100%); /* Light blue gradient for header */
             --background-card: hsl(0, 0%, 100%); /* Pure white for content cards */
-            --background-input-output: hsl(0, 0%, 100%); /* Pure white for input/output elements */
+            --background-input: hsl(0, 0%, 100%); /* Pure white for input/output elements */
             
             --text-dark: hsl(210, 20%, 20%); /* Dark charcoal for primary text */
-            --text-light: hsl(210, 10%, 30%); /* Slightly lighter dark for general text on white cards */
-            --text-muted: hsl(210, 10%, 45%); /* Muted gray for secondary info/placeholders */
+            --text-muted: hsl(210, 10%, 45%); /* Medium gray for secondary info/placeholders */
+            --text-light: hsl(0, 0%, 100%); /* White for text on colored backgrounds */
             
-            --border-card: hsl(210, 10%, 85%); /* Light gray border for cards */
-            --border-input: hsl(210, 10%, 75%); /* Slightly darker gray for input borders */
-            --border-focus: var(--primary-color); /* Primary color for focus borders */
+            --border-card: hsl(210, 10%, 88%); /* Very light gray border for cards */
+            --border-input: hsl(210, 10%, 80%); /* Slightly darker gray for input borders */
+            --border-focus: var(--primary-color); /* Primary color for input focus */
 
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.15);
-            --shadow-lg: 0 10px 20px rgba(0,0,0,0.25);
+            --shadow-lg: 0 8px 20px rgba(0,0,0,0.25);
             
             --error-bg: hsl(0, 80%, 95%);
             --error-border: hsl(0, 70%, 80%);
             --error-text: hsl(0, 70%, 40%);
             
-            --button-secondary-bg: hsl(210, 10%, 92%); /* Light gray for secondary button */
-            --button-secondary-text: hsl(210, 20%, 30%); /* Dark text for secondary button */
+            --button-secondary-bg: hsl(210, 10%, 90%); /* Light gray for secondary button */
+            --button-secondary-text: var(--text-dark); /* Dark text for secondary button */
         }
         
-        /* Body and Gradio Container */
+        /* Base container and typography */
         body {
             background-color: var(--background-app) !important;
         }
@@ -334,23 +331,23 @@ Answer:"""
             margin: 0 auto !important;
             padding: 1.5rem !important;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            background-color: var(--background-app) !important; /* Overall background */
-            box-shadow: none !important; /* Remove outer shadow */
+            background-color: var(--background-app) !important;
+            box-shadow: none !important;
             border-radius: 16px !important;
         }
 
-        /* Header Styling (title box) - distinct background */
+        /* Header Styling (distinct background) */
         .app-header-wrapper {
-            background: linear-gradient(135deg, var(--background-header-start) 0%, var(--background-header-end) 100%) !important; /* Gradient from light yellow to light orange */
-            border: 2px solid var(--border-card) !important; /* Consistent border with cards */
+            background: var(--background-header) !important;
+            border: 2px solid var(--border-card) !important;
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
-            text-align: center !important; /* Centered */
+            text-align: center !important;
             box-shadow: var(--shadow-md) !important;
             position: relative;
             overflow: hidden;
-            color: var(--text-dark) !important; /* Dark text on light header */
+            color: var(--text-dark) !important;
         }
         .app-header-wrapper::before { /* Subtle background pattern */
             content: '';
@@ -359,17 +356,17 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(255,165,0,0.05) 0%, transparent 40%),
-                        radial-gradient(circle at bottom right, rgba(255,165,0,0.05) 0%, transparent 40%);
+            background: radial-gradient(circle at top left, hsla(200, 70%, 45%, 0.05) 0%, transparent 40%),
+                        radial-gradient(circle at bottom right, hsla(200, 70%, 45%, 0.05) 0%, transparent 40%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
         }
         .app-header-logo {
-            font-size: 4.5rem !important; /* Larger icon */
+            font-size: 4.5rem !important;
             margin-bottom: 0.75rem !important;
             display: block !important;
-            color: var(--accent-blue) !important; /* Deep blue for icon */
+            color: var(--primary-color) !important;
             position: relative;
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
@@ -382,8 +379,8 @@ Answer:"""
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
-            font-weight: 800 !important; /* Bold */
-            color: var(--accent-blue) !important; /* Deep blue for title */
+            font-weight: 800 !important;
+            color: var(--primary-color) !important;
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
             letter-spacing: -0.03em !important;
@@ -392,7 +389,7 @@ Answer:"""
         }
         .app-header-tagline {
             font-size: 1.25rem !important;
-            color: var(--text-light) !important; /* Muted text for tagline */
+            color: var(--text-muted) !important;
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px;
@@ -402,7 +399,7 @@ Answer:"""
             z-index: 1;
         }
 
-        /* Main Dashboard Container & Card Sections */
+        /* Main Dashboard Container & Card Sections (White Backgrounds) */
         .main-dashboard-container {
             display: flex !important;
             flex-direction: column !important;
@@ -410,74 +407,78 @@ Answer:"""
         }
         .dashboard-card-section {
             background: var(--background-card) !important; /* Pure white for content cards */
-            border: 2px solid var(--border-card) !important; /* Clear light gray border */
+            border: 2px solid var(--border-card) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
             box-shadow: var(--shadow-sm) !important;
             transition: all 0.3s ease-out !important;
             cursor: default;
-            color: var(--text-light) !important; /* Dark text on white cards */
+            color: var(--text-dark) !important; /* Dark text on white cards */
         }
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-5px) !important; /* More pronounced lift */
+            transform: translateY(-5px) !important;
         }
 
-        /* Section Titles (e.g., "Welcome & Disclaimer") - now centered and bold */
+        /* Section Titles (Centered & Bold) */
         .sub-section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
-            font-weight: 700 !important; /* Bold */
-            color: var(--accent-blue) !important; /* Deep blue for titles */
-            text-align: center !important; /* CENTERED */
+            font-weight: 700 !important;
+            color: var(--primary-color) !important;
+            text-align: center !important; /* Centered */
             margin: 0 0 1.25rem 0 !important;
             padding-bottom: 0.75rem !important;
-            border-bottom: 2px solid var(--accent-blue) !important; /* Consistent blue line */
+            border-bottom: 2px solid var(--border-card) !important; /* Subtle separator line */
             display: block !important;
             letter-spacing: -0.01em !important;
         }
         .dashboard-card-section p {
             line-height: 1.7 !important;
-            color: var(--text-light) !important; /* General text on white cards */
+            color: var(--text-dark) !important;
             font-size: 1rem !important;
         }
         .dashboard-card-section strong {
-            color: var(--accent-orange) !important; /* Orange for specific strong text (e.g., Disclaimer) */
+            color: var(--primary-color) !important; /* Default strong text uses primary color */
+        }
+        .dashboard-card-section p > span { /* For specific highlights like 'Disclaimer:' */
+            color: var(--secondary-accent-color) !important;
+            font-weight: 600 !important;
         }
 
-        /* Input Styling (textboxes, dropdowns) - pure white backgrounds */
+        /* Input Styling (Pure White Backgrounds) */
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-dropdown > div > input[type="text"],
         .gradio-dropdown .primary-wrap,
         .gradio-dropdown .scroll-hide {
-            background: var(--background-input-output) !important; /* Pure white background for inputs */
-            border: 2px solid var(--border-input) !important; /* Light gray border for inputs */
+            background: var(--background-input) !important; /* Pure white background for inputs */
+            border: 2px solid var(--border-input) !important; /* Light gray border */
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-dark) !important; /* Dark text for inputs */
+            color: var(--text-dark) !important;
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }
         .gradio-textbox textarea::placeholder,
         .gradio-textbox input::placeholder {
-            color: var(--text-muted) !important; /* Muted gray placeholder text */
-            opacity: 0.7;
+            color: var(--text-muted) !important;
+            opacity: 0.8;
         }
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus,
         .gradio-dropdown > div > input[type="text"]:focus,
         .gradio-dropdown .primary-wrap.focused {
             outline: none !important;
-            border-color: var(--border-focus) !important; /* Orange border on focus */
-            box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.2) !important; /* Orange glow on focus */
+            border-color: var(--border-focus) !important;
+            box-shadow: 0 0 0 4px hsla(210, 70%, 45%, 0.2) !important; /* Primary color glow */
         }
         .gradio-textbox label,
         .gradio-dropdown label {
             font-weight: 600 !important;
-            color: var(--text-light) !important; /* Labels on white cards */
+            color: var(--text-dark) !important;
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
@@ -485,7 +486,7 @@ Answer:"""
         .gradio-textbox .gr-form,
         .gradio-dropdown .gr-form {
             font-size: 0.9rem !important;
-            color: var(--text-muted) !important; /* Info text on white cards */
+            color: var(--text-muted) !important;
             margin-top: 0.4rem !important;
         }
         .input-row {
@@ -515,7 +516,7 @@ Answer:"""
             text-align: center !important;
         }
         .gr-button-primary {
-            background: var(--primary-color) !important; /* Orange button */
+            background: var(--primary-color) !important; /* Deep blue button */
             color: white !important;
             box-shadow: var(--shadow-sm) !important;
         }
@@ -525,32 +526,32 @@ Answer:"""
             transform: translateY(-2px) !important;
         }
         .gr-button-primary:active {
-            transform: translateY(1px) !important; /* Press effect */
+            transform: translateY(1px) !important;
             box-shadow: none !important;
         }
         .gr-button-secondary {
             background: var(--button-secondary-bg) !important; /* Light gray button */
-            color: var(--button-secondary-text) !important; /* Dark text */
-            border-color: var(--border-input) !important; /* Border matches input fields */
+            color: var(--button-secondary-text) !important;
+            border-color: var(--border-input) !important;
         }
         .gr-button-secondary:hover {
-            background: hsl(210, 10%, 85%) !important; /* Darker gray on hover */
-            border-color: var(--primary-color) !important; /* Orange border on hover */
+            background: hsl(210, 10%, 85%) !important;
+            border-color: var(--primary-color) !important;
             transform: translateY(-2px) !important;
         }
         .gr-button-secondary:active {
-            transform: translateY(1px) !important; /* Press effect */
+            transform: translateY(1px) !important;
             box-shadow: none !important;
         }
 
-        /* Output Styling - pure white background */
+        /* Output Styling (Pure White Background) */
         .output-content-wrapper {
-            background: var(--background-input-output) !important; /* Pure white background for output box */
-            border: 2px dashed var(--border-input) !important; /* Dashed gray border */
+            background: var(--background-input) !important; /* Pure white background */
+            border: 2px dashed var(--border-input) !important;
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important;
-            color: var(--text-dark) !important; /* Dark text for output */
+            color: var(--text-dark) !important;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -564,7 +565,7 @@ Answer:"""
             overflow-wrap: break-word;
             word-break: break-word;
             text-align: left !important;
-            color: var(--text-dark) !important; /* Ensure this also overrides to dark text */
+            color: var(--text-dark) !important;
         }
         @keyframes fadeInAndSlideUp {
             from { opacity: 0; transform: translateY(15px); }
@@ -573,7 +574,7 @@ Answer:"""
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
-            color: var(--accent-blue) !important; /* Blue for response header */
+            color: var(--primary-color) !important;
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
@@ -581,11 +582,11 @@ Answer:"""
         }
         .response-icon {
             font-size: 1.5rem !important;
-            color: var(--accent-blue) !important;
+            color: var(--primary-color) !important;
         }
         .divider {
             border: none !important;
-            border-top: 1px dashed var(--border-input) !important; /* Dashed light gray divider */
+            border-top: 1px dashed var(--border-input) !important;
             margin: 1rem 0 !important;
         }
         .error-message {
@@ -620,21 +621,21 @@ Answer:"""
             opacity: 0.8;
         }
         .placeholder {
-            background: var(--background-input-output) !important; /* Pure white background for placeholder */
-            border: 2px dashed var(--border-input) !important; /* Dashed light gray border */
+            background: var(--background-input) !important;
+            border: 2px dashed var(--border-input) !important;
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
             text-align: center !important;
-            color: var(--text-muted) !important; /* Muted gray text for placeholder */
+            color: var(--text-muted) !important;
             font-style: italic !important;
             font-size: 1.1rem !important;
             width: 100%;
             box-sizing: border-box;
         }
 
-        /* Examples Table Styling - pure white background rows */
+        /* Examples Table Styling (Pure White Background Rows) */
         .examples-section .gr-samples-table {
-            border: 2px solid var(--border-card) !important; /* Outer table border matches cards */
+            border: 2px solid var(--border-card) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
@@ -647,20 +648,20 @@ Answer:"""
             text-align: left !important;
         }
         .examples-section .gr-samples-table th {
-            background: var(--background-card) !important; /* White for example header */
+            background: var(--background-card) !important;
             font-weight: 700 !important;
-            color: var(--accent-blue) !important; /* Blue for header text */
+            color: var(--primary-color) !important;
         }
         .examples-section .gr-samples-table td {
-            background: var(--background-input-output) !important; /* Pure white for example rows */
-            color: var(--text-dark) !important; /* Dark text for example rows */
-            border-top: 1px solid var(--border-input) !important; /* Light gray border between rows */
+            background: var(--background-input) !important; /* Pure white for rows */
+            color: var(--text-dark) !important;
+            border-top: 1px solid var(--border-input) !important;
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
         }
         .examples-section .gr-samples-table tr:hover td {
             background: hsl(0, 0%, 95%) !important; /* Slightly darker white on hover */
-            transform: translateX(8px); /* More pronounced slide */
+            transform: translateX(8px);
         }
         .gr-examples .gr-label,
         .gr-examples .label-wrap,
@@ -670,29 +671,30 @@ Answer:"""
         
         /* Footer Styling */
         .app-footer-wrapper {
-            background: var(--background-card) !important; /* White for footer */
+            background: var(--background-card) !important;
             border: 2px solid var(--border-card) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
             margin-top: 1.5rem !important;
             text-align: center !important;
-            color: var(--text-muted) !important; /* Muted text for footer */
+            color: var(--text-muted) !important;
         }
         .app-footer p {
             margin: 0.6rem 0 !important;
             font-size: 0.95rem !important;
-            color: var(--text-muted) !important; /* Muted text */
+            color: var(--text-muted) !important;
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--primary-color) !important; /* ORANGE highlight for links (same as submit button) */
+            color: var(--primary-color) !important; /* Links use primary accent color */
             text-decoration: none !important;
             font-weight: 600 !important;
-            transition: text-decoration 0.2s ease, text-decoration-color 0.2s ease !important;
+            transition: text-decoration 0.2s ease, color 0.2s ease !important; /* Smooth color transition */
         }
         .app-footer a:hover {
             text-decoration: underline !important;
-            text-decoration-color: var(--primary-color) !important; /* Orange underline on hover */
+            text-decoration-color: var(--primary-hover) !important;
+            color: var(--primary-hover) !important;
         }
 
         /* Responsive Design */
@@ -751,7 +753,7 @@ Answer:"""
                         """
                         Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
                         
-                        <span style="color: var(--accent-orange);">**Disclaimer:**</span> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.
+                        <span style="color: var(--secondary-accent-color);">**Disclaimer:**</span> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.
                         """
                     )