cat-documents-ng 1.0.4 → 1.0.6

package/src/lib/document/components/document-content-viewer/document-content-viewer.component.scss

@@ -0,0 +1,1877 @@
+.document-content-viewer-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: auto;
+
+  // Zoom Controls Wrapper
+  .zoom-controls-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: rgba(248, 249, 250, 0.95);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid #e5e7eb;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 10px;
+  }
+
+  // Common zoom container styles
+  .docx-container {
+    overflow: auto;
+  }
+
+  // PDF Container
+  .pdf-container {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    overflow: auto;
+    
+    ::ng-deep {
+      .ng2-pdf-viewer-container {
+        height: 100%;
+        overflow: auto;
+        
+        // Ensure scrollbar is visible
+        &::-webkit-scrollbar {
+          width: 12px;
+          height: 12px;
+        }
+        
+        &::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 6px;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+          background: #888;
+          border-radius: 6px;
+          
+          &:hover {
+            background: #555;
+          }
+        }
+      }
+      
+      // For Firefox
+      .ng2-pdf-viewer-container {
+        scrollbar-width: thin;
+        scrollbar-color: #888 #f1f1f1;
+      }
+    }
+  }
+
+  // Image Container
+  .image-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    overflow: auto;
+    
+    .document-image {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+
+  // Excel Container
+  .excel-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-radius: 8px;
+    overflow: auto;
+
+
+
+    .loading-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+
+      .loading-content {
+        text-align: center;
+        color: #6b7280;
+
+        i {
+          margin-bottom: 1rem;
+          display: block;
+        }
+
+        p {
+          margin: 0;
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+      }
+    }
+
+    .error-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+
+      .error-content {
+        text-align: center;
+        color: #6b7280;
+        max-width: 400px;
+
+        i {
+          margin-bottom: 1rem;
+          display: block;
+        }
+
+        h4 {
+          margin: 0 0 0.5rem 0;
+          color: #dc2626;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+
+        p {
+          margin: 0 0 1.5rem 0;
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+
+        .error-actions {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+
+    .excel-viewer {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .excel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.5rem;
+        background: #f8fafc;
+        border-bottom: 1px solid #e2e8f0;
+
+        .excel-info {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+
+          i {
+            font-size: 2rem;
+            color: #10b981;
+          }
+
+          .excel-details {
+            h4 {
+              margin: 0 0 0.25rem 0;
+              color: #1f2937;
+              font-size: 1.125rem;
+              font-weight: 600;
+            }
+
+            p {
+              margin: 0;
+              color: #6b7280;
+              font-size: 0.875rem;
+            }
+          }
+        }
+
+        .excel-actions {
+          display: flex;
+          gap: 0.5rem;
+
+          .p-button {
+            &.p-button-sm {
+              padding: 0.375rem 0.75rem;
+              font-size: 0.75rem;
+            }
+          }
+        }
+      }
+
+      .excel-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        background: #fafafa;
+        overflow: hidden;
+
+        .sheet-navigation {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+          padding: 0.5rem;
+          background: white;
+          border-radius: 6px;
+          border: 1px solid #e5e7eb;
+
+          .sheet-label {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #6b7280;
+            margin-right: 0.5rem;
+          }
+
+          .sheet-tab {
+            padding: 0.375rem 0.75rem;
+            border: 1px solid #d1d5db;
+            background: white;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            color: #6b7280;
+            cursor: pointer;
+            transition: all 0.2s;
+
+            &:hover {
+              background: #f3f4f6;
+              border-color: #9ca3af;
+            }
+
+            &.active {
+              background: #10b981;
+              color: white;
+              border-color: #10b981;
+            }
+          }
+        }
+
+        .excel-table-container {
+          flex: 1;
+          overflow: auto;
+          background: white;
+          border-radius: 6px;
+          border: 1px solid #e5e7eb;
+          margin-bottom: 1rem;
+          min-width: 100%;
+          position: relative;
+          min-height: 300px;
+          overflow-x: auto;
+          overflow-y: auto;
+          
+          // Hide scrollbars but keep scrolling functionality
+          scrollbar-width: none; /* Firefox */
+          -ms-overflow-style: none; /* Internet Explorer 10+ */
+          
+          &::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
+          }
+
+            .excel-table {
+              width: 100%;
+              min-width: max-content;
+              border-collapse: collapse;
+              font-size: 0.875rem;
+              table-layout: auto;
+              border: 2px solid #e5e7eb;
+              word-wrap: break-word;
+              white-space: nowrap;
+
+            th, td {
+              padding: 0.5rem 0.75rem;
+              text-align: left;
+              border-bottom: 1px solid #f3f4f6;
+              border-right: 1px solid #f3f4f6;
+              min-width: 80px;
+              max-width: 300px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: normal;
+              position: relative;
+              box-sizing: border-box;
+              vertical-align: top;
+            }
+
+            // Ensure empty cells are visible with borders
+            td:empty::after {
+              content: '';
+              display: block;
+              min-height: 1.5rem;
+            }
+
+            // Ensure all columns are visible
+            th:last-child,
+            td:last-child {
+              border-right: 1px solid #e5e7eb;
+            }
+
+            // Add left border to first column
+            th:first-child,
+            td:first-child {
+              border-left: 1px solid #e5e7eb;
+            }
+
+            // Style empty cells to make them more visible
+            .empty-cell {
+              background-color: #fafafa;
+              color: #9ca3af;
+              font-style: italic;
+              border: 1px solid #e5e7eb;
+            }
+
+            // Ensure table has a grid-like appearance
+            tr {
+              border: 1px solid #e5e7eb;
+            }
+
+            th {
+              background: #f8fafc;
+              font-weight: 600;
+              color: #374151;
+              position: sticky;
+              top: 0;
+              z-index: 10;
+              border-bottom: 2px solid #e5e7eb;
+            }
+
+            td {
+              color: #6b7280;
+              background: white;
+
+              &:first-child {
+                font-weight: 500;
+                color: #374151;
+              }
+            }
+
+            tr:hover td {
+              background: #f9fafb;
+            }
+
+            tbody tr:last-child td {
+              border-bottom: none;
+            }
+          }
+        }
+
+        .excel-info-bar {
+          display: flex;
+          align-items: center;
+          gap: 1.5rem;
+          padding: 0.75rem;
+          background: white;
+          border-radius: 6px;
+          border: 1px solid #e5e7eb;
+          font-size: 0.75rem;
+
+          .info-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: #6b7280;
+
+            i {
+              color: #10b981;
+              font-size: 0.875rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Office Document Container (Excel, Word, CSV, Email, OpenDocument)
+  .office-document-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .document-preview {
+      background: white;
+      border-radius: 12px;
+      padding: 2rem;
+      text-align: center;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      max-width: 400px;
+      width: 100%;
+
+      .document-icon {
+        margin-bottom: 1.5rem;
+        
+        i {
+          font-size: 4rem;
+          color: #3b82f6;
+        }
+      }
+
+      .document-info {
+        margin-bottom: 2rem;
+
+        h4 {
+          margin: 0 0 0.5rem 0;
+          color: #1f2937;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+
+        p {
+          margin: 0.25rem 0;
+          color: #6b7280;
+          font-size: 0.875rem;
+
+          &.document-note {
+            color: #9ca3af;
+            font-style: italic;
+            margin-top: 0.75rem;
+          }
+        }
+      }
+
+      .document-actions {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        .p-button {
+          min-width: 120px;
+          
+          &.p-button-sm {
+            padding: 0.5rem 1rem;
+            font-size: 0.875rem;
+          }
+        }
+      }
+    }
+  }
+
+  // Unsupported Document Container
+  .unsupported-document-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .document-preview {
+      background: white;
+      border-radius: 12px;
+      padding: 2rem;
+      text-align: center;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      max-width: 400px;
+      width: 100%;
+      border: 2px solid #fbbf24;
+
+      .document-icon {
+        margin-bottom: 1.5rem;
+        
+        i {
+          font-size: 4rem;
+          color: #f59e0b;
+        }
+      }
+
+      .document-info {
+        margin-bottom: 2rem;
+
+        h4 {
+          margin: 0 0 0.5rem 0;
+          color: #92400e;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+
+        p {
+          margin: 0.25rem 0;
+          color: #6b7280;
+          font-size: 0.875rem;
+
+          &.document-note {
+            color: #d97706;
+            font-style: italic;
+            margin-top: 0.75rem;
+            background: #fef3c7;
+            padding: 0.5rem;
+            border-radius: 6px;
+            border: 1px solid #fde68a;
+          }
+        }
+      }
+
+      .document-actions {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        .p-button {
+          min-width: 120px;
+          
+          &.p-button-sm {
+            padding: 0.5rem 1rem;
+            font-size: 0.875rem;
+          }
+        }
+      }
+    }
+  }
+
+  // No Document State
+  .no-document-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .no-document-content {
+      text-align: center;
+      color: #6b7280;
+
+      i {
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      h4 {
+        margin: 0 0 0.5rem 0;
+        color: #374151;
+        font-size: 1.25rem;
+        font-weight: 600;
+      }
+
+      p {
+        margin: 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+      }
+    }
+  }
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+  .document-content-viewer-container {
+    .office-document-container,
+    .unsupported-document-container {
+      padding: 1rem;
+
+      .document-preview {
+        padding: 1.5rem;
+        max-width: 100%;
+
+        .document-icon i {
+          font-size: 3rem;
+        }
+
+        .document-actions {
+          flex-direction: column;
+          align-items: center;
+
+          .p-button {
+            width: 100%;
+            max-width: 200px;
+          }
+        }
+      }
+    }
+
+    .image-container {
+      padding: 0.5rem;
+    }
+
+    .excel-container {
+      .excel-viewer {
+        .excel-header {
+          flex-direction: column;
+          gap: 1rem;
+          padding: 1rem;
+
+          .excel-info {
+            justify-content: center;
+          }
+
+          .excel-actions {
+            justify-content: center;
+            width: 100%;
+
+            .p-button {
+              flex: 1;
+              max-width: 150px;
+            }
+          }
+        }
+
+        .excel-content {
+          padding: 0.5rem;
+
+          .sheet-navigation {
+            flex-wrap: wrap;
+            gap: 0.25rem;
+
+            .sheet-tab {
+              font-size: 0.7rem;
+              padding: 0.25rem 0.5rem;
+            }
+          }
+
+          .excel-table-container {
+            .excel-table {
+              font-size: 0.75rem;
+
+              th, td {
+                padding: 0.25rem 0.5rem;
+                min-width: 80px;
+                max-width: 150px;
+              }
+            }
+          }
+
+          .excel-info-bar {
+            flex-wrap: wrap;
+            gap: 1rem;
+            font-size: 0.7rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Dark mode support (if needed)
+@media (prefers-color-scheme: dark) {
+  .document-content-viewer-container {
+    background: #1f2937;
+
+    .office-document-container,
+    .unsupported-document-container {
+      .document-preview {
+        background: #374151;
+        color: #f9fafb;
+
+        .document-info h4 {
+          color: #f9fafb;
+        }
+
+        .document-info p {
+          color: #d1d5db;
+
+          &.document-note {
+            color: #9ca3af;
+            background: #4b5563;
+            border-color: #6b7280;
+          }
+        }
+      }
+    }
+
+    .excel-container {
+      background: #374151;
+
+      .excel-viewer {
+        .excel-header {
+          background: #4b5563;
+          border-color: #6b7280;
+
+          .excel-info {
+            .excel-details h4 {
+              color: #f9fafb;
+            }
+
+            .excel-details p {
+              color: #d1d5db;
+            }
+          }
+        }
+
+        .excel-content {
+          background: #374151;
+
+          .sheet-navigation {
+            background: #4b5563;
+            border-color: #6b7280;
+
+            .sheet-tab {
+              background: #4b5563;
+              border-color: #6b7280;
+              color: #d1d5db;
+
+              &:hover {
+                background: #6b7280;
+                border-color: #9ca3af;
+              }
+
+              &.active {
+                background: #10b981;
+                color: white;
+                border-color: #10b981;
+              }
+            }
+          }
+
+          .excel-table-container {
+            background: #4b5563;
+            border-color: #6b7280;
+
+            .excel-table {
+              th {
+                background: #6b7280;
+                color: #f9fafb;
+                border-color: #9ca3af;
+              }
+
+              td {
+                background: #4b5563;
+                color: #d1d5db;
+                border-color: #6b7280;
+
+                &:first-child {
+                  color: #f9fafb;
+                }
+              }
+
+              tr:hover td {
+                background: #6b7280;
+              }
+            }
+          }
+
+          .excel-info-bar {
+            background: #4b5563;
+            border-color: #6b7280;
+            color: #d1d5db;
+          }
+        }
+      }
+    }
+
+    .no-document-container .no-document-content {
+      color: #9ca3af;
+
+      h4 {
+        color: #f9fafb;
+      }
+
+      p {
+        color: #d1d5db;
+      }
+    }
+  }
+}
+
+.excel-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.875rem;
+  
+  th, td {
+    padding: 0.5rem;
+    border: 1px solid #e2e8f0;
+    text-align: left;
+    vertical-align: top;
+    min-width: 80px;
+    
+    // Handle styled cells
+    &[style*="background-color"] {
+      // Ensure text is readable on colored backgrounds
+      &:not([style*="color"]) {
+        color: #1f2937; // Default dark text
+      }
+    }
+    
+    // Handle bold text
+    &[style*="font-weight: bold"] {
+      font-weight: 600;
+    }
+    
+    // Handle italic text
+    &[style*="font-style: italic"] {
+      font-style: italic;
+    }
+  }
+  
+  th {
+    background-color: #f8fafc;
+    font-weight: 600;
+    color: #475569;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  
+  td {
+    background-color: white;
+    
+    &.empty-cell {
+      background-color: #f8fafc;
+      color: #9ca3af;
+    }
+  }
+  
+  // Hover effect for rows
+  tbody tr:hover td {
+    background-color: #f1f5f9;
+    
+    // Preserve custom background colors on hover
+    &[style*="background-color"] {
+      opacity: 0.8;
+    }
+  }
+}
+
+.debug-info {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: 8px;
+  
+  summary {
+    cursor: pointer;
+    font-weight: 600;
+    color: #d97706;
+    margin-bottom: 0.5rem;
+    
+    &:hover {
+      color: #b45309;
+    }
+  }
+  
+  .debug-content {
+    margin-top: 0.5rem;
+    
+    p {
+      margin: 0.5rem 0;
+      color: #92400e;
+    }
+    
+    ul {
+      margin: 0.5rem 0;
+      padding-left: 1.5rem;
+      color: #92400e;
+    }
+    
+    li {
+      margin: 0.25rem 0;
+    }
+    
+    button {
+      margin-top: 0.5rem;
+    }
+  }
+}
+
+// DOCX Container
+.docx-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  overflow: hidden;
+
+  .loading-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .loading-content {
+      text-align: center;
+      color: #6b7280;
+
+      i {
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      p {
+        margin: 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+      }
+    }
+  }
+
+  .error-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .error-content {
+      text-align: center;
+      color: #6b7280;
+      max-width: 400px;
+
+      i {
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      h4 {
+        margin: 0 0 0.5rem 0;
+        color: #dc2626;
+        font-size: 1.25rem;
+        font-weight: 600;
+      }
+
+      p {
+        margin: 0 0 1rem 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+      }
+
+      .error-actions {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  .docx-viewer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: white;
+
+    .docx-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.5rem;
+      border-bottom: 1px solid #e5e7eb;
+      background-color: #f9fafb;
+
+      .docx-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        i {
+          font-size: 2rem;
+          color: #2563eb;
+        }
+
+        .docx-details {
+          h4 {
+            margin: 0 0 0.25rem 0;
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #111827;
+          }
+
+          p {
+            margin: 0 0 0.125rem 0;
+            font-size: 0.875rem;
+            color: #6b7280;
+          }
+
+          .document-title {
+            font-weight: 500;
+            color: #374151;
+            font-size: 0.875rem;
+          }
+
+          .document-author {
+            font-style: italic;
+            color: #6b7280;
+            font-size: 0.75rem;
+          }
+        }
+      }
+
+      .docx-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+    }
+
+    .docx-content {
+      flex: 1;
+      overflow: auto;
+      padding: 1.5rem;
+
+      .docx-stats {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        padding: 1rem;
+        background-color: #f8fafc;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+
+        .stat-item {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 0.75rem;
+          background-color: white;
+          border-radius: 6px;
+          border: 1px solid #e2e8f0;
+          font-size: 0.75rem;
+          color: #475569;
+          font-weight: 500;
+
+          i {
+            color: #64748b;
+          }
+        }
+      }
+
+      .docx-content-body {
+        line-height: 1.6;
+        color: #1f2937;
+
+        // DOCX specific styling
+        .docx-paragraph {
+          margin: 0 0 1rem 0;
+          text-align: justify;
+        }
+
+        .docx-heading {
+          margin: 1.5rem 0 1rem 0;
+          font-weight: 600;
+          color: #111827;
+          line-height: 1.3;
+
+          &.docx-h1 {
+            font-size: 1.875rem;
+            border-bottom: 2px solid #e5e7eb;
+            padding-bottom: 0.5rem;
+          }
+
+          &.docx-h2 {
+            font-size: 1.5rem;
+            border-bottom: 1px solid #e5e7eb;
+            padding-bottom: 0.25rem;
+          }
+
+          &.docx-h3 {
+            font-size: 1.25rem;
+          }
+
+          &.docx-h4, &.docx-h5, &.docx-h6 {
+            font-size: 1.125rem;
+          }
+        }
+
+        .docx-table {
+          width: 100%;
+          margin: 1rem 0;
+          border-collapse: collapse;
+          border: 1px solid #e5e7eb;
+          background-color: white;
+
+          .docx-header {
+            background-color: #f8fafc;
+            font-weight: 600;
+            color: #374151;
+          }
+
+          .docx-cell, .docx-header {
+            padding: 0.75rem;
+            border: 1px solid #e5e7eb;
+            text-align: left;
+            vertical-align: top;
+          }
+
+          .docx-row:hover {
+            background-color: #f9fafb;
+          }
+        }
+
+        .docx-list {
+          margin: 1rem 0;
+          padding-left: 1.5rem;
+
+          &.docx-ul {
+            list-style-type: disc;
+          }
+
+          &.docx-ol {
+            list-style-type: decimal;
+          }
+
+          .docx-list-item {
+            margin: 0.5rem 0;
+            line-height: 1.5;
+          }
+        }
+
+        .docx-image {
+          max-width: 100%;
+          height: auto;
+          border-radius: 6px;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+          margin: 1rem 0;
+        }
+
+        // Handle blockquotes
+        blockquote {
+          margin: 1rem 0;
+          padding: 1rem 1.5rem;
+          border-left: 4px solid #3b82f6;
+          background-color: #f8fafc;
+          font-style: italic;
+          color: #374151;
+        }
+
+        // Handle code blocks
+        pre, code {
+          background-color: #f1f5f9;
+          border: 1px solid #e2e8f0;
+          border-radius: 4px;
+          padding: 0.5rem;
+          font-family: 'Courier New', monospace;
+          font-size: 0.875rem;
+          color: #1e293b;
+          overflow-x: auto;
+        }
+
+        pre {
+          padding: 1rem;
+          margin: 1rem 0;
+        }
+
+        // Handle links
+        a {
+          color: #2563eb;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        // Handle emphasis
+        em, i {
+          font-style: italic;
+        }
+
+        strong, b {
+          font-weight: 600;
+        }
+
+        // Handle horizontal rules
+        hr {
+          border: none;
+          border-top: 1px solid #e5e7eb;
+          margin: 2rem 0;
+        }
+      }
+    }
+  }
+}
+
+.word-loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  width: 100%;
+  background-color: #f9fafb;
+  border-radius: 8px;
+  
+  .loading-content {
+    text-align: center;
+    
+    i {
+      margin-bottom: 1rem;
+      display: block;
+      font-size: 2rem;
+      color: #3b82f6;
+    }
+    
+    p {
+      margin: 0;
+      color: #6b7280;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+}
+
+.docx-container {
+  min-height: 400px; // Prevent layout shift during loading
+  overflow: auto;
+}
+
+// Document viewer wrapper for zoom functionality
+.doc-viewer-wrapper {
+  transition: transform 0.2s ease-in-out;
+  overflow: auto;
+  position: relative;
+  transform-origin: center center;
+  height: 100%;
+  // Enable smooth scrolling for both directions
+  scroll-behavior: smooth;
+  
+  // Invisible overlay to capture wheel events over document content
+  .wheel-capture-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    z-index: 5;
+    pointer-events: auto;
+    
+    // Allow click events to pass through to iframe
+    &:active {
+      pointer-events: none;
+    }
+  }
+  
+  // Apply zoom to the iframe content directly for Word document zoom
+  ngx-doc-viewer {
+    ::ng-deep iframe {
+      transition: transform 0.2s ease-in-out;
+      transform-origin: top left; // Start zoom from top-left like Word
+      border: none;
+      // Ensure iframe can be properly scaled
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+}
+
+// Excel-specific zoom wrapper to handle overflow properly
+.excel-zoom-wrapper {
+  overflow: auto;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  // Enable smooth scrolling for both directions
+  scroll-behavior: smooth;
+  
+  // Invisible overlay to capture wheel events over document content
+  .wheel-capture-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    z-index: 5;
+    pointer-events: auto;
+    
+    // Allow click events to pass through to iframe
+    &:active {
+      pointer-events: none;
+    }
+  }
+  
+  // Default state - center content when not zoomed
+  &:not(.zoomed) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  // When zoomed, remove flex centering and ensure proper scrolling
+  &.zoomed {
+    overflow: auto;
+    display: block; // Remove flex centering when zoomed
+  }
+  
+  // Scale the document content inside ngx-doc-viewer, not the container
+  ngx-doc-viewer {
+    transition: transform 0.2s ease-in-out;
+    transform-origin: center center;
+    display: block;
+    width: 100%;
+    height: 100%;
+    
+    // Apply zoom to the iframe content directly for Excel sheet zoom
+    ::ng-deep iframe {
+      transition: transform 0.2s ease-in-out;
+      transform-origin: top left; // Start zoom from top-left like Excel
+      border: none;
+      // Ensure iframe can be properly scaled
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+}
+
+// Ensure ngx-doc-viewer doesn't cause layout shifts
+ngx-doc-viewer {
+  display: block;
+  width: 100%;
+  height: 100%;
+  
+  // Allow iframe scaling and interactions
+  ::ng-deep iframe {
+    transition: transform 0.2s ease-in-out;
+    transform-origin: center center;
+  }
+}
+
+  // CSV Container
+  .csv-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-radius: 8px;
+    overflow: auto;
+
+    // Global scrollbar hiding for all CSV content
+    * {
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+  .loading-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .loading-content {
+      text-align: center;
+      color: #6b7280;
+
+      i {
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      p {
+        margin: 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+      }
+    }
+  }
+
+  .error-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    .error-content {
+      text-align: center;
+      color: #6b7280;
+      max-width: 400px;
+
+      i {
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      h4 {
+        margin: 0 0 0.5rem 0;
+        color: #dc2626;
+        font-size: 1.25rem;
+        font-weight: 600;
+      }
+
+      p {
+        margin: 0 0 1rem 0;
+        color: #6b7280;
+        font-size: 0.875rem;
+      }
+
+      .error-actions {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  .csv-content {
+    width: 100%;
+    height: 98%;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+
+    .csv-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid #e5e7eb;
+
+      .csv-info {
+        h4 {
+          margin: 0 0 0.5rem 0;
+          color: #111827;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+
+        p {
+          margin: 0 0 0.25rem 0;
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+
+        .csv-stats {
+          display: inline-block;
+          background-color: #f3f4f6;
+          color: #6b7280;
+          font-size: 0.75rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          font-weight: 500;
+        }
+      }
+
+      .csv-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+    }
+
+    .csv-table-container {
+      flex: 1;
+      overflow: auto;
+      border-radius: 6px;
+      min-width: 0;
+      min-height: 0;
+      transition: transform 0.2s ease-in-out;
+      scroll-behavior: smooth;
+      transform-origin: center center;
+
+      // Hide scrollbars for webkit browsers
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      // Hide scrollbars for Firefox
+      scrollbar-width: none;
+
+      // Hide scrollbars for IE/Edge
+      -ms-overflow-style: none;
+
+      .csv-table {
+        ::ng-deep {
+          .p-datatable-wrapper {
+            height: 100%;
+            
+            // Hide scrollbars for webkit browsers
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            
+            // Hide scrollbars for Firefox
+            scrollbar-width: none;
+            
+            // Hide scrollbars for IE/Edge
+            -ms-overflow-style: none;
+          }
+
+          // Hide scrollbars on the table body wrapper
+          .p-datatable-scrollable-body {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+
+          // Hide scrollbars on the table header wrapper
+          .p-datatable-scrollable-header {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+
+          // Hide scrollbars on the table footer wrapper
+          .p-datatable-scrollable-footer {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+
+          // Additional scrollbar hiding for any scrollable elements
+          .p-scrollbar-wrapper {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+
+          .p-datatable-table {
+            border-collapse: collapse;
+          }
+
+          .p-datatable-thead > tr > th {
+            background-color: #f8f9fa;
+            border: 1px solid #e5e7eb;
+            padding: 0.75rem;
+            font-weight: 600;
+            color: #374151;
+            text-align: left;
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            word-wrap: break-word;
+            white-space: normal;
+
+            &.csv-header-cell {
+              background-color: #f1f5f9;
+              font-weight: 700;
+              color: #1e293b;
+            }
+          }
+
+          .p-datatable-tbody > tr > td {
+            border: 1px solid #e5e7eb;
+            padding: 0.75rem;
+            color: #374151;
+            vertical-align: top;
+            word-wrap: break-word;
+            white-space: normal;
+
+            &.csv-header-cell {
+              background-color: #f1f5f9;
+              font-weight: 600;
+              color: #1e293b;
+            }
+          }
+
+          .p-datatable-tbody > tr:nth-child(even) {
+            background-color: #f9fafb;
+          }
+
+          .p-datatable-tbody > tr:hover {
+            background-color: #f3f4f6;
+          }
+        }
+      }
+    }
+  }
+
+  // Email Container
+  .email-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-radius: 8px;
+    overflow: auto;
+
+    .loading-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      text-align: center;
+      color: #6b7280;
+
+      i {
+        margin-bottom: 1rem;
+      }
+
+      p {
+        margin: 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+      }
+    }
+
+    .error-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+
+      .error-content {
+        text-align: center;
+        max-width: 400px;
+
+        i {
+          margin-bottom: 1rem;
+        }
+
+        h4 {
+          margin: 0 0 0.5rem 0;
+          color: #111827;
+          font-size: 1.25rem;
+        }
+
+        p {
+          margin: 0 0 1.5rem 0;
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+
+        .error-actions {
+          display: flex;
+          justify-content: center;
+          gap: 0.5rem;
+        }
+      }
+    }
+
+    .no-email-data {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      text-align: center;
+      color: #6b7280;
+
+      i {
+        margin-bottom: 1rem;
+      }
+
+      p {
+        margin: 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+      }
+    }
+
+    .email-viewer {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+
+      .email-header {
+        position: relative;
+        padding: 1.5rem;
+        border-bottom: 2px solid #e5e7eb;
+        background: linear-gradient(to bottom, #ffffff, #f9fafb);
+
+        .email-actions {
+          position: absolute;
+          top: 1rem;
+          right: 1rem;
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        .email-subject {
+          margin: 0 0 1rem 0;
+          padding-right: 100px;
+          color: #111827;
+          font-size: 1.5rem;
+          font-weight: 600;
+          line-height: 1.4;
+          word-break: break-word;
+        }
+
+        .email-metadata {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+
+          .email-field {
+            display: flex;
+            gap: 0.75rem;
+            font-size: 0.875rem;
+            line-height: 1.5;
+
+            .field-label {
+              min-width: 80px;
+              color: #6b7280;
+              font-weight: 600;
+            }
+
+            .field-value {
+              color: #374151;
+              word-break: break-word;
+              flex: 1;
+
+              i {
+                margin-right: 0.25rem;
+                color: #6b7280;
+              }
+            }
+          }
+        }
+      }
+
+      .email-body-container {
+        flex: 1;
+        overflow: auto;
+        padding: 1.5rem;
+        background: white;
+
+        .email-body {
+          max-width: 100%;
+          min-height: 200px;
+
+          &.email-body-html {
+            ::ng-deep {
+              // Style common HTML elements in emails
+              p {
+                margin: 0 0 1rem 0;
+                line-height: 1.6;
+              }
+
+              a {
+                color: #3b82f6;
+                text-decoration: none;
+
+                &:hover {
+                  text-decoration: underline;
+                }
+              }
+
+              img {
+                max-width: 100%;
+                height: auto;
+                border-radius: 4px;
+              }
+
+              table {
+                border-collapse: collapse;
+                width: 100%;
+                margin: 1rem 0;
+
+                td, th {
+                  padding: 0.5rem;
+                  border: 1px solid #e5e7eb;
+                }
+
+                th {
+                  background-color: #f9fafb;
+                  font-weight: 600;
+                }
+              }
+
+              blockquote {
+                margin: 1rem 0;
+                padding-left: 1rem;
+                border-left: 3px solid #e5e7eb;
+                color: #6b7280;
+              }
+
+              ul, ol {
+                margin: 0 0 1rem 0;
+                padding-left: 1.5rem;
+              }
+
+              li {
+                margin: 0.25rem 0;
+              }
+            }
+          }
+
+          &.email-body-text {
+            pre {
+              margin: 0;
+              padding: 1rem;
+              background: #f9fafb;
+              border: 1px solid #e5e7eb;
+              border-radius: 6px;
+              font-family: 'Courier New', Courier, monospace;
+              font-size: 0.875rem;
+              line-height: 1.6;
+              color: #374151;
+              white-space: pre-wrap;
+              word-break: break-word;
+              overflow-x: auto;
+            }
+          }
+        }
+      }
+
+      .email-attachments {
+        padding: 1rem 1.5rem;
+        border-top: 1px solid #e5e7eb;
+        background: #f9fafb;
+
+        h4 {
+          margin: 0 0 0.75rem 0;
+          color: #374151;
+          font-size: 0.875rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+
+        .attachment-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+
+          .attachment-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.625rem 0.875rem;
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            color: #374151;
+            transition: all 0.2s ease;
+
+            i {
+              color: #6b7280;
+              font-size: 1rem;
+            }
+
+            span {
+              word-break: break-word;
+            }
+
+            &:hover {
+              background: #f3f4f6;
+              border-color: #d1d5db;
+            }
+          }
+        }
+      }
+    }
+  }
+}