Update all UI elements to use page background color with white text

app.py

@@ -473,9 +473,9 @@ with main_tab1:
         # Add enhanced CSS to fix the vertical text and improve the drag and drop area visually
         st.markdown("""
         <style>
-        /* Fix color and text orientation */
+        /* Fix color and text orientation - use white text */
         .uploadedFile, .uploadedFileData, .stFileUploader {
-            color: #333333 !important;
+            color: #ffffff !important;
         }
         
         /* Fix the text orientation for all elements in the uploader */
@@ -493,11 +493,11 @@ with main_tab1:
             writing-mode: horizontal-tb !important;
             width: auto !important;
             text-align: center !important;
-            color: #424242 !important;
+            color: #ffffff !important;
             font-weight: 400 !important;
         }
         
-        /* Enhance the drop zone appearance */
+        /* Enhance the drop zone appearance with page background color */
         .stFileUploader > section > div,
         .stFileUploader div[data-testid="stFileUploadDropzone"] {
             display: flex !important;
@@ -507,19 +507,19 @@ with main_tab1:
             text-align: center !important;
             height: auto !important;
             min-height: 180px !important;
-            background-color: #f5f5f5 !important;
-            border: 2px dashed #bdbdbd !important;
+            background-color: #f0f2f6 !important;
+            border: 2px dashed #ffffff !important;
             border-radius: 8px !important;
             transition: background-color 0.3s, border-color 0.3s !important;
             padding: 20px !important;
             margin-bottom: 20px !important;
         }
         
-        /* Hover effect for better user feedback */
+        /* Hover effect for better user feedback - still using page background */
         .stFileUploader > section > div:hover,
         .stFileUploader div[data-testid="stFileUploadDropzone"]:hover {
-            background-color: #e8f4fd !important;
-            border-color: #2196f3 !important;
+            background-color: #f0f2f6 !important;
+            border-color: #ffffff !important;
         }
         
         /* Add visual icon for upload */
@@ -532,8 +532,8 @@ with main_tab1:
         </style>
         """, unsafe_allow_html=True)
         
-        # Add visual label above the file uploader
-        st.markdown('<div style="margin-bottom:8px; font-weight:500; color:#212121;">📄 Upload Historical Document</div>', unsafe_allow_html=True)
+        # Add visual label above the file uploader with white text on page background
+        st.markdown('<div style="margin-bottom:8px; font-weight:500; color:#ffffff; background-color:#f0f2f6; padding:8px; border-radius:4px; font-size:16px;">📄 Upload Historical Document</div>', unsafe_allow_html=True)
         
         # Enhanced file uploader with better help text
         uploaded_file = st.file_uploader("Drag and drop PDFs or images here", type=["pdf", "png", "jpg", "jpeg"], 
@@ -1223,18 +1223,18 @@ with main_tab1:
                 # Document results will be shown in the right column
                 with right_col:
                     
-                    # Add Document Metadata section - use direct HTML with black background and white text
-                    st.markdown('<h3 style="margin-bottom:0; padding-bottom:0; color:#ffffff; background-color:#212121; padding:10px; border-radius:4px 4px 0 0;">Document Metadata</h3>', unsafe_allow_html=True)
+                    # Add Document Metadata section - use page background color with white text
+                    st.markdown('<h3 style="margin-bottom:0; padding-bottom:0; color:#ffffff; background-color:#f0f2f6; padding:10px; border-radius:4px 4px 0 0;">Document Metadata</h3>', unsafe_allow_html=True)
                     
-                    # Create metadata card with clean styling - black background with white text
-                    metadata_html = '<div class="metadata-card" style="background:#212121; color:#ffffff; border:1px solid #333333; border-radius:0 0 4px 4px; padding:15px; margin-bottom:20px;">'
+                    # Create metadata card with clean styling - page background with white text
+                    metadata_html = '<div class="metadata-card" style="background:#f0f2f6; color:#ffffff; border:1px solid #f0f2f6; border-radius:0 0 4px 4px; padding:15px; margin-bottom:20px;">'
                     
                     # File info
                     metadata_html += f'<p><strong>File Name:</strong> {result.get("file_name", uploaded_file.name)}</p>'
                     
-                    # Info about limited pages - dark theme
+                    # Info about limited pages - match page background
                     if 'limited_pages' in result:
-                        metadata_html += f'<p style="background:#37474f; padding:8px; border-radius:4px; color:#e0f7fa;"><strong>Pages:</strong> {result["limited_pages"]["processed"]} of {result["limited_pages"]["total"]} processed</p>'
+                        metadata_html += f'<p style="background:#f0f2f6; padding:8px; border-radius:4px; color:#ffffff;"><strong>Pages:</strong> {result["limited_pages"]["processed"]} of {result["limited_pages"]["total"]} processed</p>'
                     
                     # Languages
                     if 'languages' in result:
@@ -1257,8 +1257,8 @@ with main_tab1:
                     # Render the metadata HTML
                     st.markdown(metadata_html, unsafe_allow_html=True)
                     
-                    # Add content section heading - black background to match metadata
-                    st.markdown('<h3 style="margin-top:20px; margin-bottom:0; padding-bottom:0; color:#ffffff; background-color:#212121; padding:10px; border-radius:4px;">Document Content</h3>', unsafe_allow_html=True)
+                    # Add content section heading - match page background color
+                    st.markdown('<h3 style="margin-top:20px; margin-bottom:0; padding-bottom:0; color:#ffffff; background-color:#f0f2f6; padding:10px; border-radius:4px;">Document Content</h3>', unsafe_allow_html=True)
                     
                     # Start document content div with consistent styling class
                     st.markdown('<div class="document-content" style="margin-top:10px;">', unsafe_allow_html=True)