Create enhanced_styles.css

enhanced_styles.css

@@ -0,0 +1,309 @@
+
+
+/* Enhanced styles for DocMap Agent */
+
+/* Document card enhancements */
+.document-item {
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+}
+
+.document-item:hover {
+  transform: translateX(5px);
+  background-color: #f8fafc;
+}
+
+/* Phase-specific colors */
+.document-item[data-phase="Discovery"] { border-left-color: #3b82f6; }
+.document-item[data-phase="Preclinical"] { border-left-color: #10b981; }
+.document-item[data-phase="Clinical Phase 1"] { border-left-color: #6366f1; }
+.document-item[data-phase="Clinical Phase 2"] { border-left-color: #8b5cf6; }
+.document-item[data-phase="Clinical Phase 3"] { border-left-color: #a855f7; }
+.document-item[data-phase="Clinical (All Phases)"] { border-left-color: #7c3aed; }
+.document-item[data-phase="Regulatory Submission"] { border-left-color: #ec4899; }
+.document-item[data-phase="Post-Marketing"] { border-left-color: #f59e0b; }
+
+/* Enhanced modal styles */
+.details-tabs {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 1rem;
+}
+
+.details-tab {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.details-tab.active {
+  border-bottom-color: #3b82f6;
+  color: #1e40af;
+}
+
+.details-tab:hover:not(.active) {
+  border-bottom-color: #e5e7eb;
+}
+
+.details-content {
+  display: none;
+}
+
+.details-content.active {
+  display: block;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Dependency graph enhancements */
+.dependency-graph {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.dependency-graph .node {
+  cursor: pointer;
+}
+
+.dependency-graph .node circle {
+  transition: r 0.2s ease;
+}
+
+.dependency-graph .node:hover circle {
+  r: 12;
+}
+
+.dependency-graph .node text {
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  fill: #4b5563;
+}
+
+.dependency-graph .link {
+  stroke-opacity: 0.6;
+}
+
+/* Flow visualization enhancements */
+.flow-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: white;
+}
+
+.flow-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-color: #3b82f6;
+}
+
+.flow-card.active {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.flow-graph-container {
+  width: 100%;
+  min-height: 500px;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  background-color: white;
+}
+
+/* Template card styles */
+.template-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: white;
+  transition: all 0.3s ease;
+}
+
+.template-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.template-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #1e3a8a;
+}
+
+.template-badge {
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background-color: #eff6ff;
+  color: #1e40af;
+}
+
+.template-description {
+  color: #4b5563;
+  margin-bottom: 1rem;
+}
+
+.template-sections {
+  background-color: #f9fafb;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+}
+
+.template-section {
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px dashed #e5e7eb;
+}
+
+.template-section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.template-section-title {
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.template-section-description {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.template-metadata {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+  gap: 0.75rem;
+}
+
+.template-metadata-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+  padding: 0.25rem 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+
+.template-metadata-item i {
+  margin-right: 0.375rem;
+  color: #4b5563;
+}
+
+/* Animation effects */
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
+  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+
+/* Loading animation */
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  margin: 2rem auto;
+  border-radius: 50%;
+  border: 4px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Tooltip styles */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 200px;
+  background-color: #1f2937;
+  color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 0.5rem;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 0.75rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+
+.tooltip .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #1f2937 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Filter pill styles */
+.filter-pill {
+  display: inline-flex;
+  align-items: center;
+  background-color: #eff6ff;
+  color: #1e40af;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.filter-pill:hover {
+  background-color: #dbeafe;
+}
+
+.filter-pill i {
+  margin-left: 0.375rem;
+  font-size: 0.75rem;
+}