Improve the visual appearance of reports with enhanced styling

Update the Report page to apply custom CSS to iframe content for a more aesthetically pleasing presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/g8mUCzT

client/src/pages/Report.tsx

@@ -64,31 +64,185 @@ export default function Report() {
     return `${baseUrl}${content.pptPath}`;
   };
 
-  // Remove margins and padding from iframe content
+  // Enhance report styling
   const handleReportLoad = (e: React.SyntheticEvent<HTMLIFrameElement>) => {
     try {
       const iframe = e.currentTarget;
       const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
-      if (iframeDoc) {
+      if (iframeDoc && iframeDoc.body) {
+        // Wrap all body content in a container if not already wrapped
+        if (!iframeDoc.querySelector('.sapiens-report-wrapper')) {
+          const wrapper = iframeDoc.createElement('div');
+          wrapper.className = 'sapiens-report-wrapper';
+          while (iframeDoc.body.firstChild) {
+            wrapper.appendChild(iframeDoc.body.firstChild);
+          }
+          iframeDoc.body.appendChild(wrapper);
+        }
+
         const style = iframeDoc.createElement('style');
         style.textContent = `
           html, body {
             margin: 0 !important;
             padding: 0 !important;
+            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%) !important;
+            max-width: none !important;
+            width: 100% !important;
           }
-          body > * {
+          
-            margin: 0 !important;
+          body {
+            padding: 48px 32px !important;
           }
-          h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
+          
+          .sapiens-report-wrapper {
+            background: white !important;
+            border-radius: 16px !important;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
+            padding: 56px !important;
+            max-width: 1000px !important;
+            margin: 0 auto !important;
+          }
+          
+          h1 {
+            font-size: 36px !important;
+            font-weight: 700 !important;
+            color: #1a202c !important;
+            margin-bottom: 28px !important;
             margin-top: 0 !important;
+            padding-bottom: 20px !important;
+            border-bottom: 3px solid #3b82f6 !important;
+            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+            -webkit-background-clip: text !important;
+            -webkit-text-fill-color: transparent !important;
+            background-clip: text !important;
           }
-          .report, .container, .page, .content {
+          
-            margin: 0 !important;
+          h2 {
-            padding: 8px !important;
+            font-size: 26px !important;
+            font-weight: 600 !important;
+            color: #2d3748 !important;
+            margin-top: 44px !important;
+            margin-bottom: 18px !important;
+            padding-bottom: 10px !important;
+            border-bottom: 2px solid #e2e8f0 !important;
           }
+          
+          h3 {
+            font-size: 22px !important;
+            font-weight: 600 !important;
+            color: #374151 !important;
+            margin-top: 32px !important;
+            margin-bottom: 14px !important;
+          }
+          
+          h4 {
+            font-size: 19px !important;
+            font-weight: 600 !important;
+            color: #4b5563 !important;
+            margin-top: 26px !important;
+            margin-bottom: 12px !important;
+          }
+          
+          p {
+            font-size: 17px !important;
+            line-height: 1.8 !important;
+            color: #374151 !important;
+            margin-bottom: 18px !important;
+            text-align: justify !important;
+          }
+          
+          .metadata {
+            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
+            padding: 24px !important;
+            border-radius: 12px !important;
+            border-left: 4px solid #3b82f6 !important;
+            margin-bottom: 36px !important;
+            font-size: 15px !important;
+            color: #1e40af !important;
+            text-align: center !important;
+          }
+          
+          .section {
+            margin-bottom: 36px !important;
+          }
+          
+          ul, ol {
+            margin-bottom: 20px !important;
+            padding-left: 32px !important;
+          }
+          
+          li {
+            font-size: 17px !important;
+            line-height: 1.8 !important;
+            color: #4b5563 !important;
+            margin-bottom: 10px !important;
+          }
+          
+          .highlight {
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
+            padding: 24px !important;
+            border-left: 4px solid #f59e0b !important;
+            border-radius: 10px !important;
+            margin: 28px 0 !important;
+            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important;
+          }
+          
+          .quote {
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
+            padding: 24px 28px !important;
+            border-left: 4px solid #6b7280 !important;
+            border-radius: 10px !important;
+            margin: 28px 0 !important;
+            font-style: italic !important;
+            color: #374151 !important;
+            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important;
+          }
+          
+          strong {
+            font-weight: 700 !important;
+            color: #1f2937 !important;
+          }
+          
+          img {
+            max-width: 100% !important;
+            height: auto !important;
+            border-radius: 12px !important;
+            box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15) !important;
+            margin: 20px 0 !important;
+          }
+          
+          table {
+            max-width: 100% !important;
+            width: 100% !important;
+            border-collapse: collapse !important;
+            margin: 20px 0 !important;
+          }
+          
+          table, iframe {
+            max-width: 100% !important;
+          }
+          
           @page {
             margin: 0 !important;
           }
+          
+          @media (max-width: 768px) {
+            .sapiens-report-wrapper {
+              padding: 32px 24px !important;
+            }
+            
+            h1 {
+              font-size: 28px !important;
+            }
+            
+            h2 {
+              font-size: 22px !important;
+            }
+            
+            h3 {
+              font-size: 19px !important;
+            }
+          }
         `;
         iframeDoc.head.appendChild(style);
       }