Spaces:
Runtime error
Runtime error
| /* EMR Page Specific Styles */ | |
| .emr-container { | |
| min-height: 100vh; | |
| background-color: var(--bg-secondary); | |
| } | |
| /* Header */ | |
| .emr-header { | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: var(--spacing-lg); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .emr-header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .emr-title { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| } | |
| .emr-title i { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .emr-title h1 { | |
| margin: 0; | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .emr-actions { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| align-items: center; | |
| } | |
| /* Patient Info Bar */ | |
| .patient-info-bar { | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: var(--spacing-lg); | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .patient-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .patient-avatar { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| } | |
| .patient-details h3 { | |
| margin: 0; | |
| color: var(--text-primary); | |
| font-size: 1.125rem; | |
| } | |
| .patient-details p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .patient-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: var(--spacing-md); | |
| } | |
| .stat-item { | |
| background-color: var(--bg-secondary); | |
| padding: var(--spacing-md); | |
| border-radius: 8px; | |
| text-align: center; | |
| border: 1px solid var(--border-color); | |
| } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| /* File Upload Section */ | |
| .emr-upload-section { | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: var(--spacing-lg); | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .upload-container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .upload-header { | |
| text-align: center; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .upload-header h3 { | |
| margin: 0 0 var(--spacing-sm) 0; | |
| color: var(--text-primary); | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .upload-header p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .upload-area { | |
| border: 2px dashed var(--border-color); | |
| border-radius: 12px; | |
| padding: var(--spacing-2xl); | |
| text-align: center; | |
| background-color: var(--bg-secondary); | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--primary-color); | |
| background-color: var(--bg-tertiary); | |
| } | |
| .upload-area.dragover { | |
| border-color: var(--primary-color); | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .upload-content i { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .upload-area.dragover .upload-content i { | |
| color: white; | |
| } | |
| .upload-content h4 { | |
| margin: 0 0 var(--spacing-sm) 0; | |
| color: var(--text-primary); | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| } | |
| .upload-area.dragover .upload-content h4 { | |
| color: white; | |
| } | |
| .upload-content p { | |
| margin: 0 0 var(--spacing-lg) 0; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .upload-area.dragover .upload-content p { | |
| color: white; | |
| } | |
| .upload-progress { | |
| margin-top: var(--spacing-lg); | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: var(--primary-color); | |
| transition: width var(--transition-normal); | |
| width: 0%; | |
| } | |
| .progress-text { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| display: block; | |
| } | |
| /* Document Preview Modal */ | |
| .document-preview-modal { | |
| max-width: 900px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| } | |
| .document-preview-section { | |
| margin-bottom: var(--spacing-lg); | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: var(--spacing-md); | |
| border: 1px solid var(--border-color); | |
| } | |
| .document-preview-section h4 { | |
| margin: 0 0 var(--spacing-md) 0; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: var(--spacing-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .document-preview-section h4 i { | |
| color: var(--primary-color); | |
| } | |
| .editable-field { | |
| background-color: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| padding: var(--spacing-sm); | |
| margin-bottom: var(--spacing-sm); | |
| min-height: 40px; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .editable-field:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1); | |
| } | |
| .editable-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .editable-list li { | |
| background-color: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| padding: var(--spacing-sm); | |
| margin-bottom: var(--spacing-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .editable-list li input { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| outline: none; | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| } | |
| .editable-list li button { | |
| background: none; | |
| border: none; | |
| color: var(--accent-color); | |
| cursor: pointer; | |
| padding: var(--spacing-xs); | |
| border-radius: 4px; | |
| transition: background-color var(--transition-fast); | |
| } | |
| .editable-list li button:hover { | |
| background-color: var(--bg-tertiary); | |
| } | |
| .add-item-btn { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| cursor: pointer; | |
| font-size: 0.875rem; | |
| transition: background-color var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .add-item-btn:hover { | |
| background-color: var(--primary-hover); | |
| } | |
| .medication-preview-item { | |
| background-color: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: var(--spacing-md); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .medication-preview-item h5 { | |
| margin: 0 0 var(--spacing-sm) 0; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .medication-detail-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .medication-detail-row:last-child { | |
| margin-bottom: 0; | |
| } | |
| .medication-detail-row label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--spacing-xs); | |
| display: block; | |
| } | |
| .medication-detail-row input { | |
| width: 100%; | |
| background-color: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| padding: var(--spacing-sm); | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| } | |
| .medication-detail-row input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .vital-signs-preview-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: var(--spacing-md); | |
| } | |
| .vital-sign-preview-item { | |
| background-color: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: var(--spacing-md); | |
| text-align: center; | |
| } | |
| .vital-sign-preview-item label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--spacing-xs); | |
| display: block; | |
| } | |
| .vital-sign-preview-item input { | |
| width: 100%; | |
| background-color: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| padding: var(--spacing-sm); | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| text-align: center; | |
| } | |
| .vital-sign-preview-item input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .lab-result-preview-item { | |
| background-color: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: var(--spacing-md); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .lab-result-preview-item h5 { | |
| margin: 0 0 var(--spacing-sm) 0; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .lab-result-detail-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .lab-result-detail-row:last-child { | |
| margin-bottom: 0; | |
| } | |
| .lab-result-detail-row label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--spacing-xs); | |
| display: block; | |
| } | |
| .lab-result-detail-row input { | |
| width: 100%; | |
| background-color: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| padding: var(--spacing-sm); | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| } | |
| .lab-result-detail-row input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| /* Controls */ | |
| .emr-controls { | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: var(--spacing-lg); | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .search-container { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .search-input { | |
| flex: 1; | |
| padding: var(--spacing-md); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| font-size: 0.875rem; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1); | |
| } | |
| .search-btn { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color var(--transition-fast); | |
| } | |
| .search-btn:hover { | |
| background-color: var(--primary-hover); | |
| } | |
| .filter-container { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| } | |
| .filter-select { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| background-color: var(--bg-primary); | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| } | |
| /* Content */ | |
| .emr-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: var(--spacing-lg); | |
| } | |
| /* Table */ | |
| .emr-table-container { | |
| background-color: var(--bg-primary); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .emr-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .emr-table th { | |
| background-color: var(--bg-tertiary); | |
| padding: var(--spacing-md); | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| font-size: 0.875rem; | |
| } | |
| .emr-table td { | |
| padding: var(--spacing-md); | |
| border-bottom: 1px solid var(--border-color); | |
| vertical-align: top; | |
| font-size: 0.875rem; | |
| } | |
| .emr-table tbody tr:hover { | |
| background-color: var(--bg-secondary); | |
| } | |
| .emr-table tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* EMR Entry Types */ | |
| .emr-type { | |
| display: inline-block; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| border-radius: 4px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .emr-type-diagnosis { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .emr-type-medication { | |
| background-color: #dbeafe; | |
| color: #1e40af; | |
| } | |
| .emr-type-vitals { | |
| background-color: #f3e8ff; | |
| color: #7c3aed; | |
| } | |
| .emr-type-lab { | |
| background-color: #ecfdf5; | |
| color: #065f46; | |
| } | |
| .emr-type-general { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-secondary); | |
| } | |
| /* Confidence Score */ | |
| .confidence-score { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .confidence-bar { | |
| width: 60px; | |
| height: 4px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .confidence-fill { | |
| height: 100%; | |
| transition: width var(--transition-normal); | |
| } | |
| .confidence-fill.high { | |
| background-color: var(--success-color); | |
| } | |
| .confidence-fill.medium { | |
| background-color: var(--warning-color); | |
| } | |
| .confidence-fill.low { | |
| background-color: var(--accent-color); | |
| } | |
| .confidence-text { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| /* Action Buttons */ | |
| .action-buttons { | |
| display: flex; | |
| gap: var(--spacing-xs); | |
| } | |
| .action-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: var(--spacing-xs); | |
| border-radius: 4px; | |
| transition: all var(--transition-fast); | |
| font-size: 0.875rem; | |
| } | |
| .action-btn:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--primary-color); | |
| } | |
| .action-btn.danger:hover { | |
| color: var(--accent-color); | |
| } | |
| /* Loading and Empty States */ | |
| .loading-state, .empty-state { | |
| text-align: center; | |
| padding: var(--spacing-2xl); | |
| background-color: var(--bg-primary); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .loading-spinner { | |
| font-size: 2rem; | |
| color: var(--primary-color); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .empty-icon { | |
| font-size: 3rem; | |
| color: var(--text-muted); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .empty-state h3 { | |
| margin: 0 0 var(--spacing-md) 0; | |
| color: var(--text-primary); | |
| } | |
| .empty-state p { | |
| margin: 0 0 var(--spacing-lg) 0; | |
| color: var(--text-secondary); | |
| } | |
| /* EMR Detail Modal */ | |
| .emr-detail-modal { | |
| max-width: 800px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .emr-detail-section { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .emr-detail-section h4 { | |
| margin: 0 0 var(--spacing-md) 0; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: var(--spacing-sm); | |
| } | |
| .emr-detail-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .emr-detail-list li { | |
| padding: var(--spacing-sm) 0; | |
| border-bottom: 1px solid var(--bg-tertiary); | |
| } | |
| .emr-detail-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .medication-item { | |
| background-color: var(--bg-secondary); | |
| padding: var(--spacing-md); | |
| border-radius: 8px; | |
| margin-bottom: var(--spacing-sm); | |
| border: 1px solid var(--border-color); | |
| } | |
| .medication-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .medication-details { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .vital-signs-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: var(--spacing-md); | |
| } | |
| .vital-sign-item { | |
| background-color: var(--bg-secondary); | |
| padding: var(--spacing-md); | |
| border-radius: 8px; | |
| text-align: center; | |
| border: 1px solid var(--border-color); | |
| } | |
| .vital-sign-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .vital-sign-value { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .emr-header-content { | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| align-items: stretch; | |
| } | |
| .emr-actions { | |
| justify-content: center; | |
| } | |
| .patient-info { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .patient-stats { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .search-container { | |
| flex-direction: column; | |
| } | |
| .filter-container { | |
| flex-direction: column; | |
| } | |
| .emr-table-container { | |
| overflow-x: auto; | |
| } | |
| .emr-table { | |
| min-width: 600px; | |
| } | |
| .action-buttons { | |
| flex-direction: column; | |
| } | |
| } | |
| /* Dark Theme Support */ | |
| @media (prefers-color-scheme: dark) { | |
| .emr-container { | |
| background-color: var(--dark-bg-secondary); | |
| } | |
| .emr-header { | |
| background-color: var(--dark-bg-primary); | |
| border-bottom-color: var(--dark-border-color); | |
| } | |
| .emr-title h1 { | |
| color: var(--dark-text-primary); | |
| } | |
| .patient-info-bar { | |
| background-color: var(--dark-bg-primary); | |
| border-bottom-color: var(--dark-border-color); | |
| } | |
| .patient-details h3 { | |
| color: var(--dark-text-primary); | |
| } | |
| .patient-details p { | |
| color: var(--dark-text-secondary); | |
| } | |
| .emr-controls { | |
| background-color: var(--dark-bg-primary); | |
| border-bottom-color: var(--dark-border-color); | |
| } | |
| .search-input, .filter-select { | |
| background-color: var(--dark-bg-secondary); | |
| border-color: var(--dark-border-color); | |
| color: var(--dark-text-primary); | |
| } | |
| .emr-table-container { | |
| background-color: var(--dark-bg-primary); | |
| border-color: var(--dark-border-color); | |
| } | |
| .emr-table th { | |
| background-color: var(--dark-bg-tertiary); | |
| color: var(--dark-text-primary); | |
| border-bottom-color: var(--dark-border-color); | |
| } | |
| .emr-table td { | |
| border-bottom-color: var(--dark-border-color); | |
| color: var(--dark-text-primary); | |
| } | |
| .emr-table tbody tr:hover { | |
| background-color: var(--dark-bg-secondary); | |
| } | |
| } | |
| /* Tabbed Interface */ | |
| .emr-tabs { | |
| display: flex; | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: var(--spacing-lg); | |
| border-radius: 8px 8px 0 0; | |
| overflow-x: auto; | |
| } | |
| .tab-btn { | |
| background: none; | |
| border: none; | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| transition: all var(--transition-fast); | |
| border-bottom: 3px solid transparent; | |
| white-space: nowrap; | |
| min-width: 120px; | |
| text-align: center; | |
| } | |
| .tab-btn:hover { | |
| color: var(--primary-color); | |
| background-color: var(--bg-secondary); | |
| } | |
| .tab-btn.active { | |
| color: var(--primary-color); | |
| border-bottom-color: var(--primary-color); | |
| background-color: var(--bg-secondary); | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* EMR Sections */ | |
| .emr-section { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: var(--spacing-lg); | |
| margin-bottom: var(--spacing-lg); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .emr-section h3 { | |
| margin: 0 0 var(--spacing-lg) 0; | |
| color: var(--text-primary); | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| border-bottom: 2px solid var(--primary-color); | |
| padding-bottom: var(--spacing-sm); | |
| } | |
| /* Diagnosis Timeline */ | |
| .diagnosis-timeline { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| } | |
| .diagnosis-item { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--spacing-md); | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--primary-color); | |
| transition: all var(--transition-fast); | |
| } | |
| .diagnosis-item:hover { | |
| background-color: var(--bg-tertiary); | |
| transform: translateX(4px); | |
| } | |
| .diagnosis-date { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| min-width: 120px; | |
| margin-right: var(--spacing-md); | |
| } | |
| .diagnosis-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| flex: 1; | |
| } | |
| .diagnosis-confidence { | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| /* Medications Grid */ | |
| .medications-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: var(--spacing-md); | |
| } | |
| .medication-card { | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: var(--spacing-md); | |
| border: 1px solid var(--border-color); | |
| transition: all var(--transition-fast); | |
| } | |
| .medication-card:hover { | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .medication-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: var(--spacing-sm); | |
| font-size: 1.1rem; | |
| } | |
| .medication-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .medication-detail { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .medication-detail strong { | |
| color: var(--text-primary); | |
| } | |
| /* Vital Signs Chart */ | |
| .vitals-chart-container { | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: var(--spacing-lg); | |
| margin-bottom: var(--spacing-lg); | |
| text-align: center; | |
| } | |
| .vitals-chart-container canvas { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* Vital Signs Table */ | |
| .vitals-table-container { | |
| overflow-x: auto; | |
| } | |
| .vitals-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .vitals-table th, | |
| .vitals-table td { | |
| padding: var(--spacing-md); | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .vitals-table th { | |
| background-color: var(--bg-tertiary); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .vitals-table td { | |
| color: var(--text-secondary); | |
| } | |
| .vitals-table tr:hover { | |
| background-color: var(--bg-secondary); | |
| } | |
| /* Lab Results */ | |
| .lab-results-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| } | |
| .lab-result-item { | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: var(--spacing-md); | |
| border-left: 4px solid var(--secondary-color); | |
| } | |
| .lab-result-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .lab-test-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .lab-test-value { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--secondary-color); | |
| } | |
| .lab-test-details { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| /* Procedures Timeline */ | |
| .procedures-timeline { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| } | |
| .procedure-item { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--spacing-md); | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--accent-color); | |
| transition: all var(--transition-fast); | |
| } | |
| .procedure-item:hover { | |
| background-color: var(--bg-tertiary); | |
| transform: translateX(4px); | |
| } | |
| .procedure-date { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| min-width: 120px; | |
| margin-right: var(--spacing-md); | |
| } | |
| .procedure-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| flex: 1; | |
| } | |
| .procedure-status { | |
| background-color: var(--accent-color); | |
| color: white; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } |