Improve UI with black background for metadata and content headers

app.py

@@ -1155,24 +1155,19 @@ with main_tab1:
                 
                 # Document results will be shown in the right column
                 with right_col:
-                    # Initial placeholder for the document title/heading
-                    st.markdown(f"## Document: {result.get('file_name', uploaded_file.name)}")
                     
-                    # Display Document Contents section
-                    st.subheader("Document Contents")
+                    # 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 direct HTML instead of expander to avoid white bars
-                    st.markdown('<h3 style="margin-bottom:0; padding-bottom:0;">Document Metadata</h3>', unsafe_allow_html=True)
-                    
-                    # Create metadata card with clean styling
-                    metadata_html = '<div class="metadata-card" style="background:#f8f9fa; border:1px solid #e0e0e0; border-radius:4px; padding:15px; margin-bottom:20px;">'
+                    # 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;">'
                     
                     # File info
                     metadata_html += f'<p><strong>File Name:</strong> {result.get("file_name", uploaded_file.name)}</p>'
                     
-                    # Info about limited pages
+                    # Info about limited pages - dark theme
                     if 'limited_pages' in result:
-                        metadata_html += f'<p style="background:#e1f5fe; padding:8px; border-radius:4px;"><strong>Pages:</strong> {result["limited_pages"]["processed"]} of {result["limited_pages"]["total"]} processed</p>'
+                        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>'
                     
                     # Languages
                     if 'languages' in result:
@@ -1195,8 +1190,11 @@ 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)
+                    
                     # Start document content div with consistent styling class
-                    st.markdown('<div class="document-content">', unsafe_allow_html=True)
+                    st.markdown('<div class="document-content" style="margin-top:10px;">', unsafe_allow_html=True)
                     if 'ocr_contents' in result:
                         # Check for has_images in the result
                         has_images = result.get('has_images', False)