cat-documents-ng 1.0.6 → 1.0.8

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

@@ -1,1877 +0,0 @@
-.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;
-            }
-          }
-        }
-      }
-    }
-  }
-}