/* Medical Transcription Live Preview Enhancements */
.medical-live-preview {
    position: relative;
    overflow: hidden;
}

.medical-live-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.medical-live-preview.updating::before {
    left: 100%;
}

.medical-transcript-container {
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.medical-live-preview + .medical-transcript {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Improved medical streaming status indicators */
.medical-streaming-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-live {
    background: linear-gradient(135deg, #ff5722, #f44336);
    color: white;
    animation: pulse-live 2s infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.status-processing {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
}

.status-ready {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: white;
}

/* Enhanced transcript text styling */
.medical-transcript {
    font-feature-settings: 'liga' 1, 'kern' 1;
    line-height: 1.7 !important;
    letter-spacing: 0.02em;
}

/* Confidence score styling */
.confidence-high { color: #4caf50; font-weight: 600; }
.confidence-medium { color: #ff9800; font-weight: 500; }
.confidence-low { color: #f44336; font-weight: 400; }

/* Smooth transitions for all transcript elements */
.medical-live-preview,
.medical-transcript,
.medical-streaming-controls * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset default styles - Unified Inter font system */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}

/* ===== CLEAN UP OLD LOADER STYLES ===== */
/* Remove all old loader interference */
#transcript-spinner:not(.bulletproof-loader),
.simple-loading,
.basic-loader,
.old-spinner,
.spinner-container,
.loading-dots,
.generic-spinner,
.ugly-loader,
.macos-spinner,
.lds-ring,
.lds-dual-ring,
.medical-loading-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure bulletproof loader is always visible */
.bulletproof-loader,
.bulletproof-loader * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ======================================
   AI INSIGHTS COLLAPSED CARD - BEAUTIFUL WHITE DESIGN
   ====================================== */

/* AI Insights Collapsed Card - Compact Medora Theme */
.ai-insights-collapsed {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 1px solid #00BFFF;
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 191, 255, 0.1);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.ai-insights-collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #00BFFF 0%, #0066FF 50%, #00BFFF 100%);
    border-radius: 12px 12px 0 0;
}

.ai-insights-collapsed:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 191, 255, 0.2);
    border-color: #00BFFF;
}

.ai-insights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ai-insights-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #00BFFF;
}

.insights-count {
    background: linear-gradient(135deg, #00BFFF, #0066FF);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.3);
}

.expand-icon {
    font-size: 20px;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 600;
}

.ai-insights-collapsed:hover .expand-icon {
    transform: translateX(6px);
    color: #00BFFF;
}

.ai-insights-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 8px 0;
    padding: 8px;
    background: transparent;
    border-radius: 6px;
}

.summary-item {
    text-align: center;
    padding: 6px 4px;
    background: rgba(0, 191, 255, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.summary-item:hover {
    background: rgba(0, 191, 255, 0.1);
    transform: translateY(-1px);
}

.summary-count {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #00BFFF !important;
    margin-bottom: 2px;
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.2);
}

.summary-label {
    font-size: 9px;
    font-weight: 600;
    color: #1f2937 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Override any dark theme affecting the collapsed card */
.ai-insights-collapsed .summary-count {
    color: #00BFFF !important;
}

.ai-insights-collapsed .summary-label {
    color: #1f2937 !important;
}

.ai-insights-collapsed .ai-insights-title {
    color: #00BFFF !important;
}

.ai-insights-collapsed .alert-text {
    color: #374151 !important;
}

.ai-insights-collapsed .loading-text {
    color: #00BFFF !important;
}

.alert-indicators {
    padding: 12px 0;
}

.alert-text {
    font-size: 14px;
    color: #374151;
    font-style: italic;
    font-weight: 500;
}

.loading-text {
    color: #00BFFF;
    font-weight: 600;
}

/* AI Insights Modal - Beautiful White Design */
.ai-insights-modal {
    background: #ffffff !important;
    border-radius: 16px;
    width: 95%;
    max-width: 1000px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
    position: relative;
    border: 2px solid #00BFFF;
}

/* Force white background for modal overlay */
#ai-insights-modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Override any dark theme styles */
#ai-insights-modal-overlay * {
    background-color: transparent !important;
}

#ai-insights-modal-overlay .ai-insights-modal {
    background: #ffffff !important;
}

#ai-insights-modal-overlay .modal-content {
    background: #fafbfc !important;
    color: #374151 !important;
}

#ai-insights-modal-overlay .modal-card {
    background: #ffffff !important;
    color: #374151 !important;
}

#ai-insights-modal-overlay .modal-card-content {
    background: #ffffff !important;
    color: #374151 !important;
}

#ai-insights-modal-overlay .modal-card-content * {
    color: #374151 !important;
}

#ai-insights-modal-overlay .modal-card-content p,
#ai-insights-modal-overlay .modal-card-content div,
#ai-insights-modal-overlay .modal-card-content span {
    color: #374151 !important;
}

.modal-header {
    background: linear-gradient(135deg, #00BFFF, #0066FF);
    color: white;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content {
    flex: 1;
}

.modal-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.insights-count-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.modal-subtitle {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 500;
}

.close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.modal-content {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
    background: #fafbfc;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.modal-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    position: relative;
}

/* Add neon blue glow accent to cards */
#ai-insights-modal-overlay .modal-card {
    border: 1px solid #00BFFF !important;
    box-shadow: 0 2px 12px rgba(0, 191, 255, 0.1) !important;
    position: relative;
}

#ai-insights-modal-overlay .modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00BFFF 0%, #0066FF 50%, #00BFFF 100%);
    z-index: 1;
}

.modal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(0, 191, 255, 0.25) !important;
    border-color: #0066FF !important;
}

.modal-card.full-width {
    grid-column: 1 / -1;
}

.modal-card-header {
    background: linear-gradient(135deg, #00BFFF 0%, #0099ff 100%);
    padding: 10px 14px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.allergy-icon {
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
}

.safety-icon {
    background: linear-gradient(135deg, #fecaca, #ef4444);
}

.condition-icon {
    background: linear-gradient(135deg, #dbeafe, #3b82f6);
}

.followup-icon {
    background: linear-gradient(135deg, #ffffff, #00BFFF);
}

.modal-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Neon Blue Highlights for Main Sections */
#ai-insights-modal-overlay .modal-card-header {
    background: linear-gradient(135deg, #00BFFF, #0099ff) !important;
    color: white !important;
    border-bottom: none;
}

#ai-insights-modal-overlay .modal-card-title {
    color: white !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    font-size: 13px;
    font-weight: 600;
}

#ai-insights-modal-overlay .modal-card-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.modal-card-content {
    padding: 12px;
    min-height: 60px;
    max-height: 250px;
    overflow-y: auto;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    line-height: 1.5;
}

.modal-card-content p {
    color: #374151;
    margin-bottom: 8px;
}

.modal-card-content div {
    color: #374151;
}

.loading-message {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 12px;
    font-size: 12px;
}

.modal-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 2px solid #f3f4f6;
    margin-top: 24px;
}

/* Safety Flags in Modal - White Theme with Strong Overrides */
#ai-insights-modal-overlay .modal-card-content .safety-flag-item,
.modal-card-content .safety-flag-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

#ai-insights-modal-overlay .modal-card-content .safety-flag-item:hover,
.modal-card-content .safety-flag-item:hover {
    border-color: #00BFFF !important;
    box-shadow: 0 4px 16px rgba(0, 191, 255, 0.15);
}

#ai-insights-modal-overlay .modal-card-content .safety-flag-text,
.modal-card-content .safety-flag-text {
    color: #374151 !important;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
}

#ai-insights-modal-overlay .modal-card-content .safety-flag-icon,
.modal-card-content .safety-flag-icon {
    color: #f59e0b !important;
}

#ai-insights-modal-overlay .modal-card-content .safety-flag-expand,
.modal-card-content .safety-flag-expand {
    background: #00BFFF !important;
    color: white !important;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
}

#ai-insights-modal-overlay .modal-card-content .safety-flag-expand:hover,
.modal-card-content .safety-flag-expand:hover {
    background: #0066FF !important;
}

/* Force all safety flag content to be dark text on white */
#ai-insights-modal-overlay .safety-flag-content,
#ai-insights-modal-overlay .safety-flag-content *,
#ai-insights-modal-overlay .safety-flag-details,
#ai-insights-modal-overlay .safety-flag-details *,
#ai-insights-modal-overlay .safety-flag-evidence,
#ai-insights-modal-overlay .safety-flag-evidence *,
#ai-insights-modal-overlay .safety-flag-action,
#ai-insights-modal-overlay .safety-flag-action * {
    color: #374151 !important;
    background-color: transparent !important;
}

/* Neon Blue Highlights for Important Content */
#ai-insights-modal-overlay .safety-flag-text,
#ai-insights-modal-overlay .allergy-item strong,
#ai-insights-modal-overlay .condition-item strong {
    color: #00BFFF !important;
    font-weight: 700;
}

/* Special highlight for priority levels and important info */
#ai-insights-modal-overlay strong,
#ai-insights-modal-overlay .evidence-content strong,
#ai-insights-modal-overlay .action-content strong {
    color: #00BFFF !important;
    font-weight: 700;
}

/* Highlight key medical terms */
#ai-insights-modal-overlay .modal-card-content em,
#ai-insights-modal-overlay .modal-card-content .highlight {
    background: linear-gradient(120deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
    padding: 2px 4px;
    border-radius: 3px;
    font-style: normal;
    font-weight: 600;
    color: #00BFFF !important;
}

/* Allergy Triggers in Modal - White Theme with Strong Overrides */
#ai-insights-modal-overlay .modal-card-content .allergy-item,
.modal-card-content .allergy-item {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 0 8px 8px 0;
    color: #374151 !important;
}

/* Conditions in Modal - White Theme with Strong Overrides */
#ai-insights-modal-overlay .modal-card-content .condition-item,
.modal-card-content .condition-item {
    background: #eff6ff !important;
    border-left: 4px solid #3b82f6;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 0 8px 8px 0;
    color: #374151 !important;
}

/* Follow-up Actions in Modal - White Theme */
#ai-insights-modal-overlay .modal-card-content .followup-sections,
.modal-card-content .followup-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#ai-insights-modal-overlay .modal-card-content .followup-category,
.modal-card-content .followup-category {
    background: #ffffff !important;
    border-left: 4px solid #00BFFF;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 0 8px 8px 0;
    color: #374151 !important;
}

#ai-insights-modal-overlay .modal-card-content .followup-category-header,
.modal-card-content .followup-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

#ai-insights-modal-overlay .modal-card-content .followup-category-title,
.modal-card-content .followup-category-title {
    font-weight: 700;
    color: #00BFFF !important;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}

#ai-insights-modal-overlay .modal-card-content .followup-items,
.modal-card-content .followup-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ai-insights-modal-overlay .modal-card-content .followup-item,
.modal-card-content .followup-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
}

#ai-insights-modal-overlay .modal-card-content .followup-bullet,
.modal-card-content .followup-bullet {
    color: #00BFFF !important;
    font-weight: 700;
    font-size: 16px;
    margin-top: 2px;
}

#ai-insights-modal-overlay .modal-card-content .followup-text,
.modal-card-content .followup-text {
    color: #374151 !important;
    line-height: 1.5;
    flex: 1;
}

/* Collapsible Follow-up Card Styles */
.collapsible-card .clickable-header {
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.collapsible-card .clickable-header:hover {
    background: linear-gradient(135deg, #0066FF, #0052CC) !important;
}

.collapse-indicator {
    font-size: 16px;
    font-weight: 700;
    color: white !important;
    transition: transform 0.3s ease;
    margin-left: auto;
    padding-left: 12px;
}

.collapsible-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Allergist Co-Pilot Action Styling */
.allergist-copilot-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.allergist-action {
    background: linear-gradient(120deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03)) !important;
    border: 1px solid rgba(0, 191, 255, 0.2) !important;
    border-left: 4px solid #00BFFF !important;
    padding: 16px;
    margin: 8px 0;
    border-radius: 0 8px 8px 0;
    transition: all 0.2s ease;
}

.allergist-action:hover {
    border-color: #00BFFF !important;
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.15) !important;
}

.action-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.action-icon {
    font-size: 20px;
    min-width: 24px;
}

.action-title {
    font-weight: 700;
    color: #00BFFF !important;
    font-size: 15px;
    flex: 1;
    min-width: 200px;
}

.allergist-priority {
    background: rgba(0, 191, 255, 0.1);
    color: #00BFFF !important;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 191, 255, 0.3);
}

.allergist-priority:contains("HIGH") {
    background: rgba(0, 191, 255, 0.2);
    color: #00BFFF !important;
    border-color: #00BFFF;
}

.allergist-priority:contains("URGENT") {
    background: rgba(0, 191, 255, 0.3);
    color: #00BFFF !important;
    border-color: #00BFFF;
    animation: pulse 2s infinite;
}
.allergist-priority:contains("ACKNOWLEDGED") {
    background: rgba(0, 191, 255, 0.15);
    color: #00BFFF !important;
    border-color: #00BFFF;
}

.action-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-description {
    color: #374151 !important;
    font-weight: 500;
    line-height: 1.5;
}

.allergist-timeline {
    background: rgba(0, 191, 255, 0.1);
    color: #00BFFF !important;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(5, 150, 105, 0.3);
    align-self: flex-start;
}

.action-details {
    color: #6b7280 !important;
    font-size: 13px;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 2px solid #e5e7eb;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* NUCLEAR OVERRIDE: Force all text in AI Insights modal to be dark */
#ai-insights-modal-overlay,
#ai-insights-modal-overlay *:not(.close-btn):not(.modal-title):not(.modal-subtitle):not(.insights-count-badge):not(.btn-primary) {
    color: #374151 !important;
}

#ai-insights-modal-overlay .modal-card-title {
    color: #00BFFF !important;
}

/* Force white backgrounds for all cards and content */
#ai-insights-modal-overlay .modal-card,
#ai-insights-modal-overlay .modal-card-content,
#ai-insights-modal-overlay .modal-card-header {
    background: #ffffff !important;
}

/* Ensure loading messages are visible */
#ai-insights-modal-overlay .loading-message {
    color: #6b7280 !important;
}

.btn {
    padding: 12px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn:hover {
    background: #f8fafc;
    border-color: #00BFFF;
    color: #00BFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 191, 255, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #00BFFF, #0066FF);
    color: white;
    border-color: #00BFFF;
    box-shadow: 0 4px 16px rgba(0, 191, 255, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0066FF, #0052CC);
    border-color: #0066FF;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 191, 255, 0.4);
}

/* Hide nav by default on mobile */
@media (max-width: 900px) {
  .nav-container {
    display: none;
    position: absolute;
    top: 60px; /* adjust as needed */
    right: 0;
    background: #fff;
    width: 100%;
    z-index: 1000;
  }
  .nav-container.nav-open {
    display: block;
  }
  .mobile-menu-btn {
    display: block;
  }
}

/* Show nav on desktop */
@media (min-width: 901px) {
  .nav-container {
    display: block !important;
    position: static;
    background: none;
    width: auto;
  }
  .mobile-menu-btn {
    display: none;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-insights-summary {
        flex-direction: column;
        gap: 8px;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    
    .summary-count {
        margin-bottom: 0;
    }
}

/* Body and layout */
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    background-color: #f8fafd;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

/* Header */
header {
    background: #F0F7FF;
    color: #3a5ba9;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e5e7eb;
}

/* Enlarged Logo */
.logo {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 6px 12px;
    box-shadow: none;
}

.logo-image {
    height: 48px;
    width: auto;
    border-radius: 50%;
    object-fit: contain;
    filter: none;
}

/* Logout Button */
#logout-btn {
    background-color: #3a5ba9;
    color: #fff;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(58, 91, 169, 0.2);
}

#logout-btn:hover {
    background-color: #2d4b8a;
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(58, 91, 169, 0.3);
}

/* Provider icon in menu button */
.provider-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modified Logout/Menu Button Style */
#logout-btn.has-dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    position: relative;
    background-color: #3a5ba9;
    color: white;
}

#logout-btn.has-dropdown::after {
    content: '▼';
    font-size: 8px;
    opacity: 0.9;
    position: absolute;
    bottom: 2px;
    right: 0;
    background-color: #2d4b8a;
    color: white;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* =============================================================================
   MEDORA APP SHELL - 3-Column Layout
   Left: Patient sidebar (280px)
   Center: SOAP notes (flexible)
   Right: Insights panel (340px)
   ============================================================================= */

/* Main container - 3 column grid */
.container,
.main-container.container {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 340px;
    grid-template-rows: 1fr;
    gap: 16px;
    height: calc(100vh - 64px);
    width: 100%;
    max-width: 1600px;
    padding: 16px;
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent;
}

/* Patient view - same 3 columns, sidebar can collapse */
.container.patient-view,
.main-container.container.patient-view {
    grid-template-columns: 280px minmax(0, 1fr) 340px;
    gap: 16px;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1200px) {
    .container,
    .main-container.container,
    .container.patient-view,
    .main-container.container.patient-view {
        grid-template-columns: 260px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .right-panel,
    #right-panel {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 768px) {
    .container,
    .main-container.container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #patient-sidebar,
    #main-content,
    .right-panel,
    #right-panel {
        grid-column: 1;
    }
}

/* Right panel - third column */
.right-panel,
#right-panel {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Patient Sidebar - first column */
#patient-sidebar {
    grid-column: 1;
    grid-row: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Main content - second column */
#main-content {
    grid-column: 2;
    grid-row: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Collapsed sidebar state */
#patient-sidebar.collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    border: none;
    box-shadow: none;
    position: absolute;
    left: -9999px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

#patient-sidebar h2 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a3c5e;
    letter-spacing: 0.5px;
}

#patient-filter {
    padding: 6px 10px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    font-size: 12px;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

#patient-filter:focus {
    outline: none;
    border-color: #3a5ba9;
    box-shadow: 0 0 0 3px rgba(58, 91, 169, 0.1);
}

#patient-list {
    max-height: calc(100% - 50px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/* Styles for the faint "Loading..." text in patient list */
.patient-list-loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.5;
    z-index: 10;
    transition: opacity 0.3s ease;
}

/* =============================================================================
   PATIENT LIST - Medical Enterprise Grade (Light Clinical Theme)
   Clean, bright, professional - like Epic/Cerner/Athena
   ============================================================================= */

/* Patient Card Base - Enterprise Grade
   Neutral background, clear separation, 3px left accent on hover/selected */
.patient-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-left: 3px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-bottom: 8px;
    gap: 12px;
    position: relative;
}

/* Patient Card Hover State - Subtle tint + left accent */
.patient-item:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(148, 163, 184, 0.25);
    border-left-color: #64748b;
}

/* Patient Card Selected State - Persistent tint + accent */
.patient-item.selected,
.patient-item.active {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
    border-left-color: #64748b;
}

/* Selected + Hover combined */
.patient-item.selected:hover,
.patient-item.active:hover {
    background: rgba(100, 116, 139, 0.18);
}

/* Avatar - Professional Medical Badge */
.patient-initials {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

/* Patient Info Container */
.patient-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Patient Name - Primary Text */
.patient-info .name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Secondary Line (age / short note) */
.patient-info .details {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Tertiary Line (created date) - smaller and more muted */
.patient-info .details:last-child {
    font-size: 11px;
    color: #94a3b8;
}

.visit-badge {
    background: #10b981;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.visit-badge.today {
    background: #3b82f6;
}

/* Delete Button - Outlook-style hover reveal */
.delete-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, color 0.15s ease, background 0.15s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show delete button on card hover */
.patient-item:hover .delete-btn {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Delete button hover state */
.delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    cursor: pointer;
}

/* Main Content Area */
#main-content {
    grid-column: 2;
    grid-row: 2 / 3;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 15px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    transition: all 0.3s ease;
    position: relative;
}

/* Tab content - ensure full width usage - FORCE with !important */
.tab-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#ai-insights-tab,
#allergeniq-tab,
#references-tab {
    width: 100% !important;
}

.ai-insights-section,
.allergeniq-section,
.references-section {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.ai-insights-collapsed {
    width: 100% !important;
    max-width: none !important;
}

/* Force all nested divs in tabs to use full width */
#ai-insights-tab > *,
#allergeniq-tab > *,
#references-tab > * {
    width: 100% !important;
    max-width: none !important;
}

#allergeniq-collapsed-card,
#ai-insights-collapsed-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Styles for the faint "Loading..." text in main content */
.content-loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.5;
    z-index: 10;
    transition: opacity 0.3s ease;
}

/* Transcript Section */
#transcript-section {
    margin-bottom: 20px;
    position: relative;
}

#patient-details {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f9fafb;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: none;
}

.patient-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

#patient-details h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a3c5e;
}

/* Enhanced Back to Patient List Button */
.patient-details-header button {
    background: linear-gradient(135deg, #4d8af0 0%, #3a5ba9 100%);
    color: white;
    font-weight: 500;
    border-radius: 20px;
    padding: 8px 16px;
    border: none;
    box-shadow: 0 2px 8px rgba(58, 91, 169, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: backButtonPulse 2s infinite;
}

/* Pulsing animation for back button */
@keyframes backButtonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(77, 138, 240, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(77, 138, 240, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(77, 138, 240, 0);
    }
}

.patient-details-header button:hover {
    background: linear-gradient(135deg, #3a5ba9 0%, #2d4b8a 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(58, 91, 169, 0.4);
}

#patient-details p {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 4px;
}

#patient-details div {
    font-size: 12px;
    color: #4b5563;
}

/* Add blinking effect to the patient name input */
@keyframes inputPulse {
    0% { box-shadow: 0 0 0 0 rgba(58, 91, 169, 0.4); border-color: #3a5ba9; }
    50% { box-shadow: 0 0 0 4px rgba(58, 91, 169, 0.2); border-color: #4d8af0; }
    100% { box-shadow: 0 0 0 0 rgba(58, 91, 169, 0.4); border-color: #3a5ba9; }
}

#patient-id {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    background-color: #fff;
    animation: inputPulse 2s infinite;
    position: relative;
}

#patient-id::placeholder {
    color: #4d8af0;
    opacity: 0.8;
    font-weight: 500;
}

#patient-id:focus {
    outline: none;
    border-color: #3a5ba9;
    box-shadow: 0 0 0 3px rgba(58, 91, 169, 0.1);
    background-color: #fff;
}

#template-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

#template-select:focus {
    outline: none;
    border-color: #3a5ba9;
    box-shadow: 0 0 0 3px rgba(58, 91, 169, 0.1);
    background-color: #fff;
}

#transcript-input {
    width: 100%;
    height: 100px;
    padding: 12px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    font-size: 13px;
    resize: none;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

#transcript-input:focus {
    outline: none;
    border-color: #3a5ba9;
    box-shadow: 0 0 0 3px rgba(58, 91, 169, 0.1);
    background-color: #fff;
}

.action-buttons {
    display: flex;
    gap: 12px;
    position: relative;
    flex-wrap: wrap;
}

/* Enhanced button styling */
button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

#start-visit-btn {
    background-color: #3a5ba9;
    color: #fff;
}

#start-visit-btn:hover {
    background-color: #2d4b8a;
}

#start-speech-btn {
    background-color: #10b981;
    color: #fff;
    transition: all 0.15s ease;
}

#start-speech-btn:hover {
    background-color: #059669;
}

#start-speech-btn.active-start {
    animation: pulse 1.5s infinite;
}

#stop-speech-btn {
    background-color: #ef4444;
    color: #fff;
}

#stop-speech-btn:hover {
    background-color: #dc2626;
}

#submit-transcript-btn {
    background-color: #3a5ba9;
    color: #fff;
}

#submit-transcript-btn:hover {
    background-color: #2d4b8a;
}

#smart-learning-badge {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
}

#smart-learning-badge:hover {
    background-color: #43a047;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.4);
}

button.disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

button.hidden {
    display: none;
}

button.active-start {
    background-color: #10b981;
}

button.active-stop {
    background-color: #ef4444;
}

/* Enhanced pulsing animation for active recording */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50% { transform: scale(1.05); opacity: 0.7; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ============================================================================
   Quality Banner - Displays SOAP quality gate results to providers
   ============================================================================ */

.quality-banner {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.quality-banner-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quality-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quality-banner-icon {
    font-size: 16px;
    font-weight: bold;
}

.quality-banner-title {
    font-weight: 600;
    color: inherit;
}

.quality-banner-stats {
    font-size: 12px;
    opacity: 0.8;
    margin-left: auto;
}

.quality-banner-issues {
    margin: 8px 0 0 24px;
    padding: 0;
    list-style-type: disc;
}

.quality-banner-issues li {
    margin: 4px 0;
    font-size: 12px;
}

/* Green banner - All checks passed */
.quality-ok-banner {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
    color: #065f46;
}

.quality-ok-banner .quality-banner-icon {
    color: #059669;
}

.quality-ok-banner .quality-banner-content {
    flex-direction: row;
    align-items: center;
}

/* Yellow/orange banner - Review recommended */
.quality-warning-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    color: #92400e;
}

.quality-warning-banner .quality-banner-icon {
    color: #d97706;
}

.quality-warning-banner .quality-banner-issues li {
    color: #78350f;
}

/* Hover effects */
.quality-banner:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Red/error banner - High severity issues (allergy safety, etc.) */
.quality-error-banner {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #dc2626;
    color: #7f1d1d;
}

.quality-error-banner .quality-banner-icon {
    font-size: 1.3em;
}

.quality-error-banner .quality-banner-title {
    font-weight: 700;
}

.quality-error-banner .quality-banner-issues li {
    color: #7f1d1d;
}

/* Clickable issue items */
.quality-issue {
    cursor: pointer;
    padding: 6px 8px;
    margin: 4px 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.quality-issue:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.quality-issue-high {
    font-weight: 600;
    border-left: 3px solid #dc2626;
    padding-left: 10px;
}

.quality-issue-warning {
    border-left: 3px solid #f59e0b;
    padding-left: 10px;
}

/* Section Status Dots */
.section-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    animation: pulse-dot 2s infinite;
}

.section-status-warning {
    background-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.section-status-error {
    background-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Section Highlight Animation (when scrolled to) */
.section-highlight {
    animation: highlight-section 2s ease-out;
}

@keyframes highlight-section {
    0% {
        background-color: #fef3c7;
        border-left-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
    }
    100% {
        background-color: #ffffff;
        border-left-color: #e5e7eb;
        box-shadow: none;
    }
}

/* Quality Highlight Animation (for anchor scroll targets) */
.quality-highlight {
    animation: quality-highlight-pulse 2s ease-out;
    position: relative;
}

.quality-highlight::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #f59e0b;
    animation: highlight-bar 2s ease-out;
}

@keyframes quality-highlight-pulse {
    0% {
        background-color: #fff7ed;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.4);
    }
    50% {
        background-color: #fef3c7;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }
    100% {
        background-color: inherit;
        box-shadow: none;
    }
}

@keyframes highlight-bar {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quality-banner {
        padding: 10px 12px;
    }

    .quality-banner-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .quality-banner-stats {
        margin-left: 0;
        margin-top: 4px;
    }

    .quality-issue {
        font-size: 0.9em;
    }

    .section-status-dot {
        width: 8px;
        height: 8px;
    }
}

/* ============================================================================
   SOAP Notes Section
   ============================================================================ */

#notes-section {
    margin-top: 20px;
    display: block;
}

.soap-section {
    margin-bottom: 24px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: none;
    padding: 20px;
    border: none;
    border-left: 3px solid #e5e7eb;
    position: relative;
    transition: all 0.3s ease;
}

/* Removed the clipboard emoji ::before pseudo-element */

.soap-section:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    transform: translateX(-50%);
}

/* FONT CONSISTENCY PATCH */
.soap-section,
.soap-section .content,
.soap-section .content p,
.soap-section .content strong,
.plan-section,
.plan-section ul li,
#ai-insights .insights-section,
#ai-insights .insights-section p,
#ai-insights .insights-section h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    line-height: 1.4 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-style: normal !important;
    font-variant: normal !important;
    letter-spacing: 0 !important;
    font-synthesis: none !important;
}

/* Enhanced heading styles for each section */
.soap-section h3,
.plan-section h3,
#ai-insights .insights-section h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a3c5e !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-synthesis: none !important;
    letter-spacing: 0.5px !important;
}

/* Enhanced reusable class for consistent look */
.ai-style {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    line-height: 1.4 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ASSESSMENT CONTENT FORMATTING */
.assessment-content,
.differential-diagnosis,
.soap-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    line-height: 1.4 !important;
    white-space: normal;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    margin: 0;
    padding: 0;
}

.assessment-content {
    white-space: normal;
}

.assessment-content br {
    line-height: 1.2;
}

/* Enhanced action buttons */
.soap-section .action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

/* Enhanced Copy/Edit buttons */
.soap-section .action-buttons button {
    background-color: #f0f2f5;
    color: #4b5563;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.soap-section .action-buttons button:hover {
    background-color: #e5e7eb;
    transform: scale(1.05);
}

/* Inline editing styles */
.edit-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    font-size: 12px;
    resize: vertical;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

.edit-textarea:focus {
    outline: none;
    border-color: #3a5ba9;
    box-shadow: 0 0 0 3px rgba(58, 91, 169, 0.1);
    background-color: #fff;
}

.edit-buttons {
    display: flex;
    gap: 8px;
}

.save-btn {
    background-color: #3a5ba9;
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.save-btn:hover {
    background-color: #2d4b8a;
    transform: scale(1.05);
}

.cancel-btn {
    background-color: #ef4444;
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cancel-btn:hover {
    background-color: #dc2626;
    transform: scale(1.05);
}

#plan-content-container {
    margin-bottom: 8px;
}

/* AI Insights Section - Hidden to fix white space */
#ai-insights {
    display: none;
    grid-column: 3;
    grid-row: 1 / 3;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
}

#ai-insights h2 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a3c5e;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

#ai-insights h2::before {
    content: '\2728';
    margin-right: 8px;
    font-size: 18px;
}

.insights-section {
    margin-bottom: 8px;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 12px;
    border: none;
    position: relative;
    transition: all 0.3s ease;
}

.insights-section::before {
    content: '\1F4A1';
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 14px;
    opacity: 0.2;
}

.insights-section:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    transform: translateX(-50%);
}

/* Updated bullet styling for Recommendations */
.insights-section.bulleted {
    padding-left: 0;
}

.insights-section.bulleted ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

.insights-section.bulleted li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 8px;
}

/* Remove the old ::before pseudo-element since we're using proper <ul><li> */
.insights-section.bulleted p::before {
    content: none;
}

/* Enhanced keyword highlighting */
.insights-section .highlight {
    font-weight: 600;
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);

/* ===== AI INSIGHTS CONTAINER STYLING ===== */
.ai-insights-container {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 191, 255, 0.1);
    border: 2px solid rgba(0, 191, 255, 0.2);
    margin-bottom: 32px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.ai-insights-container:hover {
    box-shadow: 0 6px 25px rgba(0, 191, 255, 0.15);
    border-color: rgba(0, 191, 255, 0.3);
}

.ai-insights-header {
    background: linear-gradient(135deg, #00BFFF, #0066FF);
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.ai-insights-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: aiShimmer 3s infinite;
}

@keyframes aiShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.ai-insights-icon {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.ai-insights-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ai-insights-subtitle {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 400;
    margin-left: auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ai-insights-content {
    padding: 0;
}

.ai-insight-item {
    border-bottom: 1px solid rgba(0, 191, 255, 0.1);
    position: relative;
    transition: all 0.2s ease;
}

.ai-insight-item:last-child {
    border-bottom: none;
}

.ai-insight-item:hover {
    background: rgba(0, 191, 255, 0.02);
}

.ai-insight-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px 12px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(0, 191, 255, 0.08);
    background: rgba(0, 191, 255, 0.02);
}

.ai-insight-icon {
    font-size: 16px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.ai-insight-content {
    padding: 16px 24px 20px 24px;
    background: white;
    line-height: 1.6;
    font-size: 14px;
    color: #374151;
}

.info-badge {
    margin-left: auto;
    opacity: 0.6;
    cursor: help;
    font-size: 12px;
    transition: opacity 0.2s ease;
}

.info-badge:hover {
    opacity: 1;
}

.safety-badge {
    color: #ef4444 !important;
    opacity: 0.8;
}

.safety-badge:hover {
    opacity: 1;
}
    padding: 0 2px;
    border-radius: 2px;
}

.insights-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

#insights-detail-toggle,
#insights-bullet-toggle {
    background-color: #f0f2f5;
    color: #4b5563;
}

#insights-detail-toggle:hover,
#insights-bullet-toggle:hover {
    background-color: #e5e7eb;
    transform: scale(1.05);
}

#insights-detail-toggle.active,
#insights-bullet-toggle.active {
    background-color: #3a5ba9;
    color: #fff;
}

.insights-actions button:last-child {
    background: none;
    color: #3a5ba9;
    border: 1px solid #3a5ba9;
}

.insights-actions button:last-child:hover {
    background-color: #f0f7ff;
    transform: scale(1.05);
}

/* ======================================
   AllergenIQ™ Enhanced Profile Styles - MEDORA THEME  
   OPTIMIZED FOR READABILITY
   ====================================== */

/* 📖 READABILITY IMPROVEMENTS */

/* AllergenIQ Collapsed Card - Dark Theme */
.allergeniq-collapsed {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.allergeniq-collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9 0%, #1e90ff 50%, #00bfff 100%);
}

.allergeniq-collapsed:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
    border-color: #0ea5e9;
}

.allergeniq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.allergeniq-title {
    font-size: 14px;
    font-weight: 700;
    color: #0ea5e9;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.new-badge {
    background: linear-gradient(135deg, #0ea5e9 0%, #1e90ff 100%);
    color: #0d1117;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    animation: pulse-badge 2s infinite;
    box-shadow: 0 2px 4px rgba(0, 212, 255, 0.3);
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.expand-icon {
    font-size: 18px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

.allergeniq-collapsed:hover .expand-icon {
    transform: translateX(4px);
    color: #0ea5e9;
}

.quick-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.summary-item {
    text-align: center;
    flex: 1;
}

.summary-count {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.summary-label {
    font-size: 11px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.alert-indicators {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.severity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.severity-dot.severity-high {
    background-color: #ff4757;
    box-shadow: 0 0 6px rgba(255, 71, 87, 0.6);
}

.severity-dot.severity-medium {
    background-color: #ffa502;
    box-shadow: 0 0 6px rgba(255, 165, 2, 0.6);
}

.severity-dot.severity-low {
    background-color: #2ed573;
    box-shadow: 0 0 6px rgba(46, 213, 115, 0.6);
}

.alert-text {
    font-size: 12px;
    color: #8b949e;
    font-weight: 500;
}

.alert-text.has-alerts {
    color: #0ea5e9;
    font-weight: 600;
}

/* AllergenIQ Modal Overlay - Dark Theme */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Ensure modal shows when opened directly */
#allergeniq-modal-overlay {
    display: flex !important;
}

/* Force the modal to be visible when active class is added */
#allergeniq-modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* AllergenIQ Modal - Dark Theme with stronger selectors */
.allergeniq-modal,
#allergeniq-modal-overlay .allergeniq-modal {
    background: #0d1117 !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 900px !important;
    max-height: 90vh !important;
    overflow: visible !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    transform: scale(0.9) translateY(20px) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #30363d !important;
}

.modal-overlay.active .allergeniq-modal,
#allergeniq-modal-overlay.active .allergeniq-modal {
    transform: scale(1) translateY(0) !important;
}

/* Force the modal to show its content properly */
#allergeniq-modal-overlay .allergeniq-modal {
    display: flex !important;
    flex-direction: column !important;
    min-height: 500px;
}

/* Enhanced Modal Header with Subtitle - Dark Theme */
.modal-header,
#allergeniq-modal-overlay .modal-header,
.allergeniq-modal .modal-header {
    background: #0d1117 !important;
    color: #ffffff !important;
    padding: 24px 28px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    position: relative !important;
    flex-shrink: 0 !important;
    border-bottom: 2px solid #0ea5e9 !important;
}

.modal-title,
#allergeniq-modal-overlay .modal-title,
.allergeniq-modal .modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
    color: #0ea5e9 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.modal-subtitle {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 400;
    margin-top: 4px;
    color: #ffffff;
}

.close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
    border: 1px solid #30363d;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: #0ea5e9;
}

/* Force modal content to be visible - Dark Theme */
.modal-content,
#allergeniq-modal-overlay .modal-content,
.allergeniq-modal .modal-content {
    display: block !important;
    padding: 24px !important;
    max-height: calc(90vh - 100px) !important;
    overflow-y: auto !important;
    background: #0d1117 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1001 !important;
}

/* Specifically target the AllergenIQ modal content */
#allergeniq-modal-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 400px !important;
    background: #0d1117 !important;
}

/* All text inside modal cards should be white with stronger selectors */
.modal-card p,
.modal-card li,
.modal-card div,
.modal-card span,
.modal-card .content,
#allergeniq-modal-overlay .modal-card p,
#allergeniq-modal-overlay .modal-card li,
#allergeniq-modal-overlay .modal-card div,
#allergeniq-modal-overlay .modal-card span,
#allergeniq-modal-overlay .modal-card .content,
.allergeniq-modal .modal-card p,
.allergeniq-modal .modal-card li,
.allergeniq-modal .modal-card div,
.allergeniq-modal .modal-card span,
.allergeniq-modal .modal-card .content {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Modal Grid Layout */
.modal-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Ensure modal cards are visible - Dark Theme with consistent clinic black */
.modal-card {
    display: block !important;
    background: #0d1117 !important;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #484f58;
}

.modal-card.full-width {
    grid-column: 1 / -1;
}

.modal-card-header {
    display: flex !important;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #30363d;
}

/* Hide all modal card icons */
.modal-card-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.diagnosis-icon,
.allergen-icon,
.symptoms-icon,
.medication-icon {
    display: none !important;
    visibility: hidden !important;
}

.modal-card-title,
#allergeniq-modal-overlay .modal-card-title,
.allergeniq-modal .modal-card-title,
.modal-card h3,
.modal-card h4,
#allergeniq-modal-overlay .modal-card h3,
#allergeniq-modal-overlay .modal-card h4,
.modal-card-header h3,
.modal-card-header h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* Force all modal cards to have consistent clinic black background */
.modal-card,
#allergeniq-modal-overlay .modal-card,
.allergeniq-modal .modal-card {
    display: block !important;
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.modal-card:hover,
#allergeniq-modal-overlay .modal-card:hover,
.allergeniq-modal .modal-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-color: #484f58 !important;
}

/* All text inside modal cards should be white */
.modal-card p,
.modal-card li,
.modal-card div,
.modal-card span,
.modal-card .content {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.5;
}

/* Specific text styling for different sections */
.modal-card .diagnosis-text,
.modal-card .allergen-text,
.modal-card .symptom-text,
.modal-card .medication-text {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.5;
}

/* Enterprise-level section headings - Make ALL headings neon blue */
.modal-card h3,
.modal-card h4,
.modal-card .section-title,
.modal-card-header h3,
.modal-card-header h4,
.modal-card-header .section-title,
#allergeniq-modal-overlay .modal-card h3,
#allergeniq-modal-overlay .modal-card h4,
#allergeniq-modal-overlay .modal-card .section-title,
#allergeniq-modal-overlay .modal-card-header h3,
#allergeniq-modal-overlay .modal-card-header h4,
#allergeniq-modal-overlay .modal-card-header .section-title,
.allergeniq-modal .modal-card h3,
.allergeniq-modal .modal-card h4,
.allergeniq-modal .modal-card .section-title,
.allergeniq-modal .modal-card-header h3,
.allergeniq-modal .modal-card-header h4,
.allergeniq-modal .modal-card-header .section-title {
    color: #0ea5e9 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Target the main card titles specifically - PRIMARY DIAGNOSIS, KNOWN ALLERGENS, etc. */
.modal-card-title,
#allergeniq-modal-overlay .modal-card-title,
.allergeniq-modal .modal-card-title,
.modal-card-header .modal-card-title,
#allergeniq-modal-overlay .modal-card-header .modal-card-title,
.allergeniq-modal .modal-card-header .modal-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* Catch any dynamically generated headings */
#allergeniq-modal-overlay h1,
#allergeniq-modal-overlay h2,
#allergeniq-modal-overlay h3,
#allergeniq-modal-overlay h4,
#allergeniq-modal-overlay h5,
#allergeniq-modal-overlay h6,
.allergeniq-modal h1,
.allergeniq-modal h2,
.allergeniq-modal h3,
.allergeniq-modal h4,
.allergeniq-modal h5,
.allergeniq-modal h6 {
    color: #0ea5e9 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Specific targeting for section headers that might be generated dynamically */
.modal-content h1,
.modal-content h2, 
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6,
#allergeniq-modal-content h1,
#allergeniq-modal-content h2,
#allergeniq-modal-content h3,
#allergeniq-modal-content h4,
#allergeniq-modal-content h5,
#allergeniq-modal-content h6 {
    color: #0ea5e9 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Highlight important text with neon blue */
.modal-card strong,
.modal-card .highlight,
.modal-card .severity-text,
.modal-card .alert-text,
.modal-card .important,
#allergeniq-modal-overlay .modal-card strong,
#allergeniq-modal-overlay .modal-card .highlight,
#allergeniq-modal-overlay .modal-card .severity-text,
#allergeniq-modal-overlay .modal-card .alert-text,
#allergeniq-modal-overlay .modal-card .important {
    color: #0ea5e9 !important;
    font-weight: 600 !important;
}

/* Warning text styling */
.modal-card .warning-text,
.modal-card .systemic-risk,
.modal-card .critical,
#allergeniq-modal-overlay .modal-card .warning-text,
#allergeniq-modal-overlay .modal-card .systemic-risk,
#allergeniq-modal-overlay .modal-card .critical {
    color: #ff4757 !important;
    font-weight: 600 !important;
    background: rgba(255, 71, 87, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Catch-all for any dynamically generated content */
#allergeniq-modal-overlay *,
.allergeniq-modal * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Override any inline styles or JS-generated styles */
#allergeniq-modal-overlay [style*="color"],
.allergeniq-modal [style*="color"] {
    color: #ffffff !important;
}

#allergeniq-modal-overlay h1,
#allergeniq-modal-overlay h2,
#allergeniq-modal-overlay h3,
#allergeniq-modal-overlay h4,
#allergeniq-modal-overlay h5,
#allergeniq-modal-overlay h6,
.allergeniq-modal h1,
.allergeniq-modal h2,
.allergeniq-modal h3,
.allergeniq-modal h4,
.allergeniq-modal h5,
.allergeniq-modal h6 {
    color: #0ea5e9 !important;
}

/* Modal Actions - Dark Theme */
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #30363d;
    margin-top: 20px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #1e90ff 100%);
    color: #0d1117;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
}

.btn:not(.btn-primary) {
    background: #0d1117;
    color: #ffffff;
    border: 1px solid #30363d;
}

.btn:not(.btn-primary):hover {
    background: #21262d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: #484f58;
}

/* Enterprise-level enhancements */
.modal-card {
    position: relative;
}

.modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #0ea5e9 0%, #1e90ff 100%);
    border-radius: 0 0 0 12px;
    opacity: 0.8;
}

/* Professional spacing and typography */
.modal-card .content {
    margin-top: 16px;
}

.modal-card ul {
    padding-left: 20px;
    margin: 12px 0;
}

.modal-card li {
    margin-bottom: 6px;
    position: relative;
}

.modal-card li::marker {
    color: #0ea5e9;
}

/* ============================================
   ULTRA-COMPACT SYMPTOM HEAT MAP - MEDORA THEME
   Minimal space usage, maximum content density
   ============================================ */

/* Container for symptom heat map - ULTRA COMPACT */
.symptom-heatmap-container {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important; /* Reduced from 8px */
    padding: 6px !important; /* Reduced from 8px */
    margin-bottom: 6px !important; /* Reduced from 8px */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Heat map grid layout - ZERO WASTED SPACE */
.symptom-heatmap-grid {
    display: grid !important;
    gap: 1px !important; /* Minimal gap */
    margin-top: 2px !important; /* Reduced from 4px */
    margin-bottom: 0 !important;
}

/* Individual symptom rows - MAXIMUM COMPACT */
.symptom-row {
    display: grid !important;
    grid-template-columns: 1fr 80px 35px !important; /* Better proportions */
    align-items: center !important;
    gap: 4px !important; /* Reduced from 8px */
    padding: 3px 6px !important; /* Reduced from 4px 8px */
    border-radius: 3px !important; /* Reduced from 3px */
    border-left: 2px solid #30363d !important; /* Thinner border */
    background: rgba(255, 255, 255, 0.02) !important;
    color: #ffffff !important;
    font-size: 11px !important; /* Reduced from 12px */
    line-height: 1.1 !important; /* Tighter line height */
    transition: all 0.3s ease !important;
    position: relative !important;
    min-height: 24px !important; /* Reduced from 28px */
}

/* Symptom name */
.symptom-name {
    font-weight: 500 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Intensity bar container - MINIMAL SIZE */
.intensity-bar-container {
    position: relative !important;
    width: 80px !important; /* Reduced from 90px */
    height: 6px !important; /* Reduced from 8px */
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Intensity bar fill - DYNAMIC COLORS */
.intensity-bar-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: all 0.4s ease !important;
    position: relative !important;
}

/* Score text - ULTRA COMPACT */
.symptom-score {
    font-size: 10px !important; /* Reduced from 11px */
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    min-width: 25px !important; /* Reduced from 30px */
}

/* ============================================
   IMPROVED COLOR PROGRESSION - WHITE TO NEON BLUE
   ============================================ */

/* Severity Level 1: Very Light White */
.symptom-row.severity-1 {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left-color: rgba(255, 255, 255, 0.4) !important;
}

.symptom-row.severity-1 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.2) !important;
}

/* Severity Level 2: Light White */
.symptom-row.severity-2 {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left-color: rgba(255, 255, 255, 0.5) !important;
}

.symptom-row.severity-2 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%) !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2) !important;
}

/* Severity Level 3: White to Very Light Blue */
.symptom-row.severity-3 {
    background: rgba(0, 212, 255, 0.05) !important;
    border-left-color: rgba(0, 212, 255, 0.3) !important;
}

.symptom-row.severity-3 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 212, 255, 0.3) 100%) !important;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.2) !important;
}

/* Severity Level 4: Light Blue */
.symptom-row.severity-4 {
    background: rgba(0, 212, 255, 0.08) !important;
    border-left-color: rgba(0, 212, 255, 0.4) !important;
}

.symptom-row.severity-4 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 212, 255, 0.4) 100%) !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.25) !important;
}

/* Severity Level 5: Medium Blue */
.symptom-row.severity-5 {
    background: rgba(0, 212, 255, 0.12) !important;
    border-left-color: rgba(0, 212, 255, 0.5) !important;
}

.symptom-row.severity-5 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.4) 0%, rgba(0, 212, 255, 0.6) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
}

/* Severity Level 6: Medium-Strong Blue */
.symptom-row.severity-6 {
    background: rgba(0, 212, 255, 0.15) !important;
    border-left-color: rgba(0, 212, 255, 0.6) !important;
}

.symptom-row.severity-6 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.5) 0%, rgba(0, 212, 255, 0.7) 100%) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.35) !important;
}

/* Severity Level 7: Strong Blue */
.symptom-row.severity-7 {
    background: rgba(0, 212, 255, 0.18) !important;
    border-left-color: rgba(0, 212, 255, 0.7) !important;
}

.symptom-row.severity-7 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.6) 0%, rgba(0, 212, 255, 0.8) 100%) !important;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.4) !important;
}

/* Severity Level 8: Very Strong Blue */
.symptom-row.severity-8 {
    background: rgba(0, 212, 255, 0.22) !important;
    border-left-color: rgba(0, 212, 255, 0.8) !important;
}

.symptom-row.severity-8 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.7) 0%, rgba(0, 212, 255, 0.9) 100%) !important;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.45) !important;
}

/* Severity Level 9: Near Full Neon */
.symptom-row.severity-9 {
    background: rgba(0, 212, 255, 0.25) !important;
    border-left-color: rgba(0, 212, 255, 0.9) !important;
}

.symptom-row.severity-9 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.8) 0%, rgba(0, 212, 255, 0.95) 100%) !important;
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.5) !important;
}

/* Severity Level 10: Full Neon Blue */
.symptom-row.severity-10 {
    background: rgba(0, 212, 255, 0.3) !important;
    border-left-color: #0ea5e9 !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4) !important;
}

.symptom-row.severity-10 .intensity-bar-fill {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.9) 0%, #0ea5e9 100%) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6) !important;
}

/* ============================================
   ENHANCED HOVER EFFECTS
   ============================================ */

.symptom-row:hover {
    background: rgba(0, 212, 255, 0.12) !important;
    transform: translateX(3px) scale(1.01) !important; /* Reduced scale */
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25) !important; /* Reduced shadow */
    border-left-color: #0ea5e9 !important;
}

.symptom-row:hover .intensity-bar-fill {
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.7) !important; /* Reduced glow */
    transform: scaleX(1.01) !important; /* Reduced scale */
}

.symptom-row:hover .symptom-score {
    color: #0ea5e9 !important;
    text-shadow: 0 0 4px rgba(0, 212, 255, 0.5) !important; /* Reduced glow */
}

/* ============================================
   ULTRA COMPACT LEGEND - MINIMAL SPACE
   ============================================ */

.symptom-heatmap-legend {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important; /* Reduced from 16px */
    margin-top: 4px !important; /* Reduced from 8px */
    padding-top: 4px !important; /* Reduced from 8px */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 9px !important; /* Reduced from 10px */
    color: #8b949e !important;
}

.legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important; /* Reduced from 4px */
}

.legend-dot {
    width: 12px !important; /* Reduced from 14px */
    height: 4px !important; /* Reduced from 6px */
    border-radius: 2px !important;
}

.legend-dot.mild {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 212, 255, 0.3) 100%) !important;
}

.legend-dot.moderate {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.5) 0%, rgba(0, 212, 255, 0.7) 100%) !important;
}

.legend-dot.severe {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.8) 0%, #0ea5e9 100%) !important;
    box-shadow: 0 0 4px rgba(0, 212, 255, 0.4) !important;
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZED
   ============================================ */

@media (max-width: 768px) {
    .symptom-heatmap-container {
        padding: 4px !important;
        margin-bottom: 4px !important;
    }
    
    .symptom-row {
        grid-template-columns: 1fr 60px 30px !important;
        padding: 2px 4px !important;
        font-size: 10px !important;
        gap: 3px !important; /* Reduced from 6px */
        min-height: 20px !important;
    }
    
    .intensity-bar-container {
        width: 60px !important;
        height: 5px !important;
    }
    
    .symptom-score {
        font-size: 9px !important;
        min-width: 20px !important;
    }
    
    .symptom-heatmap-legend {
        gap: 8px !important;
        font-size: 8px !important;
        margin-top: 3px !important;
        padding-top: 3px !important;
    }
    
    .legend-dot {
        width: 10px !important;
        height: 3px !important;
    }
}

/* ============================================
   COMPATIBILITY AND VISIBILITY FIXES
   ============================================ */

/* Ensure the heat map works in all modal contexts */
#allergeniq-modal-overlay .symptom-heatmap-container,
.allergeniq-modal .symptom-heatmap-container,
.modal-content .symptom-heatmap-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force visibility of heat map elements */
.symptom-heatmap-container,
.symptom-heatmap-container * {
    display: block !important;
    visibility: visible !important;
}

.symptom-heatmap-grid {
    display: grid !important;
}

.symptom-row {
    display: grid !important;
}

.symptom-heatmap-legend {
    display: flex !important;
}

.legend-item {
    display: flex !important;
}

/* ============================================
   ENHANCED VISUAL POLISH
   ============================================ */

/* Add subtle animation to bars when they load */
@keyframes barFillAnimation {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.intensity-bar-fill {
    animation: barFillAnimation 0.8s ease-out !important;
}

/* Add subtle glow effect to high severity items */
.symptom-row.severity-8 .intensity-bar-fill,
.symptom-row.severity-9 .intensity-bar-fill,
.symptom-row.severity-10 .intensity-bar-fill {
    position: relative !important;
}

.symptom-row.severity-8 .intensity-bar-fill::after,
.symptom-row.severity-9 .intensity-bar-fill::after,
.symptom-row.severity-10 .intensity-bar-fill::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    border-radius: 4px;
    z-index: -1;
    opacity: 0.7;
}

/* Loading Message - Dark Theme */
.loading-message {
    text-align: center;
    color: #8b949e;
    font-style: italic;
    padding: 20px;
    display: block;
}

/* Enhanced Modal Header Styling - Dark Theme */
.modal-header .header-content {
    flex: 1;
}

.modal-header .new-badge {
    background: rgba(0, 212, 255, 0.2);
    color: #0ea5e9;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 8px;
    border: 1px solid #0ea5e9;
}

/* ✨ REFERENCES SECTION STYLES - DARK THEME with stronger selectors ✨ */
.references-container,
#allergeniq-modal-overlay .references-container,
.allergeniq-modal .references-container {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 20px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.references-header,
#allergeniq-modal-overlay .references-header,
.allergeniq-modal .references-header {
    background: #0d1117 !important;
    color: #ffffff !important;
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #30363d !important;
}

.references-title,
#allergeniq-modal-overlay .references-title,
.allergeniq-modal .references-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #0ea5e9 !important;
    letter-spacing: -0.01em !important;
}

.references-title::before,
#allergeniq-modal-overlay .references-title::before,
.allergeniq-modal .references-title::before {
    content: "📚" !important;
    font-size: 18px !important;
}

.references-count {
    background: #0ea5e9 !important;
    color: #0d1117 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 24px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.references-grid {
    padding: 20px !important;
    display: grid !important;
    gap: 16px !important;
    background: #0d1117 !important;
}

.reference-card {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
    padding: 20px !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reference-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
    border-color: #0ea5e9 !important;
}

.reference-card * {
    color: #ffffff !important;
}

.reference-card .highlight,
.reference-card strong {
    color: #0ea5e9 !important;
}

.references-empty {
    text-align: center !important;
    padding: 50px 24px !important;
    color: #8b949e !important;
    background: #0d1117 !important;
}

.empty-icon {
    font-size: 32px !important;
    margin-bottom: 12px !important;
    opacity: 0.6 !important;
}

.empty-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
}

.empty-subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #8b949e !important;
}

/* Custom scrollbar styling - Dark Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0d1117;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Button color states */
.btn-active {
    background-color: #10b981 !important;
    color: #fff !important;
}

/* Blinking effect */
.blink {
    animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Smart Learning Modal */
#smart-learning-modal {
    border: 2px solid #4CAF50;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

#smart-learning-modal h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a3c5e;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Separate Modal */
#separate-modal {
    border: 2px solid #3a5ba9;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 550px;
    max-width: 90vw;
}

#separate-modal h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a3c5e;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Responsive design */
@media (max-width: 768px) {
    .modal-grid {
        grid-template-columns: 1fr;
    }
    
    .allergeniq-modal {
        width: 95%;
        margin: 20px;
    }
    
    .modal-content {
        padding: 16px;
    }

    header {
        padding: 0 15px;
    }
    
    .container {
        padding: 15px;
        gap: 15px;
    }
    
    #main-content,
    #ai-insights {
        padding: 15px;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .action-buttons button {
        width: 100%;
    }
}

/* Blinking red effect for Stop Listening button */
.blink-red {
    background-color: red !important;
    color: white !important;
    animation: blink-animation 1s infinite !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* EMERGENCY FIX */
#main-content {
    overflow-y: scroll !important;
    height: calc(100vh - 150px) !important;
    max-height: calc(100vh - 150px) !important;
}

#submit-transcript-btn {
    pointer-events: auto !important;
    z-index: 1001 !important;
    position: relative !important;
}

/* ============================================
   CLEAN MEDICAL PLAN ENHANCEMENT
   Replace the enterprise CSS with this simpler version
   ============================================ */

/* ============================================
   MEDORA TREATMENT PLAN THEME - FINAL VERSION
   ============================================ */

/* Main Plan Container */
#plan-content-container {
    background: #f8f9fa !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Individual Plan Sections (Condition Cards) */
.freed-plan-section {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.freed-plan-section:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15) !important;
}

/* Plan Headers (Condition Names) */
.freed-plan-header {
    background: #f8f9fa !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e9ecef !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #2c3e50 !important;
    border-left: 4px solid #0ea5e9 !important;
    margin: 0 !important;
}

/* Plan Content Container */
.freed-plan-content {
    padding: 20px !important;
    line-height: 1.6 !important;
    margin-left: 0px !important;
    background: #ffffff !important;
}

/* Clinical Summary */
.clinical-summary {
    background: #f1f8ff !important;
    border-left: 3px solid #0ea5e9 !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    border-radius: 0 4px 4px 0 !important;
    font-size: 14px !important;
    color: #5a6c7d !important;
    line-height: 1.5 !important;
}

/* Plan Label */
.plan-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #0ea5e9 !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Individual Plan Items */
.freed-plan-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f3f4 !important;
}

.freed-plan-item:last-child {
    border-bottom: none !important;
}

/* Action Bullets */
.action-bullet {
    width: 6px !important;
    height: 6px !important;
    background: #0ea5e9 !important;
    border-radius: 50% !important;
    margin-top: 8px !important;
    flex-shrink: 0 !important;
}

/* Priority-based bullet colors */
.priority-high .action-bullet {
    background: #ff3b30 !important;
}

.priority-medium .action-bullet {
    background: #ff9500 !important;
}

.priority-routine .action-bullet {
    background: #34c759 !important;
}

/* Action Text */
.action-text {
    flex: 1 !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    line-height: 1.5 !important;
}

.action-text strong {
    color: #0ea5e9 !important;
    font-weight: 600 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    #plan-content-container {
        padding: 16px !important;
    }

    .freed-plan-header {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .freed-plan-content {
        padding: 16px !important;
    }

    .freed-plan-item {
        font-size: 13px !important;
    }
}

/* Override any conflicting styles */
.freed-plan-section * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Clean up old styles that might interfere */
.medical-plan-container,
.medical-plan-section,
.medical-condition-title,
.medical-condition-content,
.medical-plan-divider,
.medical-observation-item,
.medical-plan-item {
    display: none !important;
}

/* ============================================
   ASSESSMENT AND PLAN COMBINED SECTION
   Add this to your styles.css file
   ============================================ */

/* Assessment and Plan Header - Subtle styling */
.assessment-plan-header {
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    /* border-left removed for clean subtle appearance */
    box-shadow: none !important;
}

.assessment-plan-header h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Show the Assessment section (removed hiding rules) */
/* Assessment section should now be visible as a separate section */

/* Update the Plan section header to match */
.soap-section:has(#plan-content-container) h3 {
    display: none !important;
}

/* Enhanced clinical summary for assessment info - Subtle styling */
.clinical-summary strong {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Ensure proper spacing */
#plan-content-container {
    margin-top: 0 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .assessment-plan-header {
        padding: 16px !important;
    }

    .assessment-plan-header h3 {
        font-size: 16px !important;
    }
}

/* Assessment and Plan Main Header - Subtle styling (duplicate removed) */
.assessment-plan-header {
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin: 0 0 32px 0 !important;
    /* border-left removed for clean subtle appearance */
    box-shadow: none !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.assessment-plan-header h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    display: block !important;
    line-height: 1.2 !important;
}

#plan-content-container .assessment-plan-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* ============================================
   OBJECTIVE SECTION - MEDORA THEME
   Add this to your styles.css file
   ============================================ */

/* Objective Main Header */
.objective-header {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin: 0 0 32px 0 !important;
    border-left: 4px solid #0ea5e9 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.objective-header h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Ensure it shows above other content */
#objective-content .objective-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Override the old objective content styling */
#objective-content {
    background: #f8f9fa !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Reuse the same card styling for objective sections */
#objective-content .freed-plan-section {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

#objective-content .freed-plan-section:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15) !important;
}

#objective-content .freed-plan-header {
    background: #f8f9fa !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e9ecef !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #2c3e50 !important;
    border-left: 4px solid #0ea5e9 !important;
    margin: 0 !important;
}

#objective-content .freed-plan-content {
    padding: 20px !important;
    line-height: 1.6 !important;
    margin-left: 0px !important;
    background: #ffffff !important;
}

#objective-content .clinical-summary {
    background: #f1f8ff !important;
    border-left: 3px solid #0ea5e9 !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    font-size: 14px !important;
    color: #5a6c7d !important;
    line-height: 1.5 !important;
}

/* Add examination icon */
.objective-header::before {
    content: "🩺";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    opacity: 0.7;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .objective-header {
        padding: 20px !important;
        margin-bottom: 24px !important;
    }

    .objective-header h3 {
        font-size: 18px !important;
    }

    .objective-header::before {
        font-size: 20px;
        left: 16px;
    }

    #objective-content .freed-plan-header {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    #objective-content .freed-plan-content {
        padding: 16px !important;
    }
}

/* ============================================
   SUBJECTIVE SECTION - SINGLE CARD READABLE DESIGN
   Add this to your styles.css file
   ============================================ */

/* Hide the duplicate black SUBJECTIVE heading if it exists */
.soap-section:has(#subjective-content) > h3 {
    display: none !important;
}

/* Alternative method if the above doesn't work */
#subjective-content + h3,
h3:contains("SUBJECTIVE"):not(.subjective-header h3) {
    display: none !important;
}

/* Subjective Main Header */
.subjective-header {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 0 24px 0 !important;
    border-left: 4px solid #0ea5e9 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.subjective-header h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Add patient icon to subjective header */
.subjective-header::before {
    content: "👤";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    opacity: 0.7;
}

/* Ensure it shows above other content */
#subjective-content .subjective-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Override the old subjective content styling */
#subjective-content {
    background: #f8f9fa !important;
    padding: 16px !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Single card design for subjective */
#subjective-content .freed-plan-section.subjective-single-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

#subjective-content .freed-plan-section.subjective-single-card:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15) !important;
}

/* Main content area for single card */
#subjective-content .freed-plan-content.subjective-main-content {
    padding: 24px !important;
    line-height: 1.6 !important;
    background: #ffffff !important;
}

/* Section blocks within the single card */
.subjective-section-block {
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f3f4 !important;
}

.subjective-section-block:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Subheadings within the card - more prominent */
.subjective-subheading {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    border-left: 3px solid #0ea5e9 !important;
    padding-left: 12px !important;
}

/* Text content - larger and more readable */
.subjective-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
    padding-left: 15px !important;
    font-weight: 400 !important;
    text-align: justify !important;
}

/* Mobile responsive adjustments for subjective */
@media (max-width: 768px) {
    .subjective-header {
        padding: 16px !important;
        margin-bottom: 20px !important;
    }

    .subjective-header h3 {
        font-size: 18px !important;
    }

    .subjective-header::before {
        font-size: 20px;
        left: 16px;
    }

    #subjective-content {
        padding: 12px !important;
    }

    #subjective-content .freed-plan-content.subjective-main-content {
        padding: 16px !important;
    }

    .subjective-subheading {
        font-size: 15px !important;
        padding-left: 10px !important;
    }

    .subjective-text {
        font-size: 14px !important;
        padding-left: 12px !important;
    }

    .subjective-section-block {
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }
}

/* Enhanced SUBJECTIVE sub-sections styling */
.subjective-sections {
    padding: 0 !important;
    margin: 0 !important;
}

.subjective-subsection {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    padding: 20px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.subjective-subsection:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15) !important;
}

.subjective-subsection:last-child {
    margin-bottom: 0 !important;
}

.subsection-header {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
    border-left: 3px solid #0ea5e9 !important;
    padding-left: 12px !important;
    line-height: 1.4 !important;
}

.subsection-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/* Individual section styling with subtle color variations */
.cc-section {
    border-left: 4px solid #3b82f6 !important;
}

.hpi-section {
    border-left: 4px solid #10b981 !important;
}

.symptoms-section {
    border-left: 4px solid #f59e0b !important;
}

.perspective-section {
    border-left: 4px solid #8b5cf6 !important;
}

.ros-section {
    border-left: 4px solid #ef4444 !important;
}

.pmh-section {
    border-left: 4px solid #06b6d4 !important;
}

.family-history-section {
    border-left: 4px solid #ec4899 !important;
}

.social-history-section {
    border-left: 4px solid #84cc16 !important;
}

/* Fallback styling for simple subjective content */
.subjective-simple {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
}

/* Mobile responsive adjustments for new sub-sections */
@media (max-width: 768px) {
    .subjective-subsection {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .subsection-header {
        font-size: 15px !important;
        padding-left: 10px !important;
    }
    
    .subsection-content {
        font-size: 14px !important;
    }
}

/* ============================================
   REDUCE WHITE SPACE IN OBJECTIVE SECTION
   Updates to make it more compact
   ============================================ */

/* More compact objective sections */
#objective-content .freed-plan-section {
    margin-bottom: 16px !important; /* Reduced from 20px */
}

#objective-content .freed-plan-header {
    padding: 12px 16px !important; /* Reduced from 16px 20px */
    font-size: 14px !important; /* Reduced from 16px */
}

#objective-content .freed-plan-content {
    padding: 16px !important; /* Reduced from 20px */
    line-height: 1.5 !important; /* Reduced from 1.6 */
}

#objective-content .clinical-summary {
    padding: 12px !important; /* Reduced from 16px */
    font-size: 13px !important; /* Reduced from 14px */
    line-height: 1.4 !important; /* Reduced from 1.5 */
}

/* More compact objective header */
.objective-header {
    padding: 20px !important; /* Reduced from 24px */
    margin-bottom: 24px !important; /* Reduced from 32px */
}

/* ============================================
   REDUCE WHITE SPACE IN ASSESSMENT/PLAN SECTION
   Updates to make it more compact
   ============================================ */

/* More compact assessment/plan sections */
#plan-content-container .freed-plan-section {
    margin-bottom: 16px !important; /* Reduced from 20px */
}

#plan-content-container .freed-plan-header {
    padding: 12px 16px !important; /* Reduced from 16px 20px */
    font-size: 14px !important; /* Reduced from 16px */
}

#plan-content-container .freed-plan-content {
    padding: 16px !important; /* Reduced from 20px */
}

#plan-content-container .clinical-summary {
    padding: 12px !important; /* Reduced from 16px */
    margin-bottom: 16px !important; /* Reduced from 24px */
    font-size: 13px !important; /* Reduced from 14px */
    line-height: 1.4 !important; /* Reduced from 1.5 */
}

#plan-content-container .plan-label {
    margin-bottom: 12px !important; /* Reduced from 16px */
    padding: 5px 12px !important; /* Reduced from 6px 14px */
    font-size: 11px !important; /* Reduced from 12px */
}

#plan-content-container .freed-plan-item {
    padding: 10px 0 !important; /* Reduced from 12px 0 */
}

/* More compact assessment/plan header */
.assessment-plan-header {
    padding: 20px !important; /* Reduced from 24px */
    margin-bottom: 24px !important; /* Reduced from 32px */
}

/* Overall container padding reduction */
#plan-content-container {
    padding: 16px !important; /* Reduced from 20px */
}

/* Progressive Disclosure States */
.hidden-until-visit-started {
    display: none !important;
}

.visible-during-visit {
    display: block !important;
}

.visit-not-started #transcript-input,
.visit-not-started #start-listening-btn,
.visit-not-started #stop-listening-btn,
.visit-not-started #submit-transcript-btn,
.visit-not-started #smart-learning-badge {
    display: none !important;
}

.visit-started #transcript-input,
.visit-started #start-listening-btn,
.visit-started #submit-transcript-btn,
.visit-started #smart-learning-badge {
    display: block !important;
}

/* Add Patient Button - MedoraSPT Secondary Style */
.add-patient-btn {
    width: 100%;
    height: 44px;
    background: #0f172a;
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 0 16px;
    border-radius: 9999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.add-patient-btn:hover {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.6);
    transform: none;
}

/* ============================================
   MEDORA MEDICATIONS DASHBOARD - DYNAMIC SYSTEM
   Clinical black, neon blue, and white theme
   ============================================ */

.medications-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.medications-header {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border-left: 4px solid #0ea5e9;
    position: relative;
}

.medications-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9 0%, #1e90ff 50%, #00bfff 100%);
    border-radius: 12px 12px 0 0;
}

.medications-title {
    font-size: 24px;
    font-weight: 700;
    color: #0ea5e9;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.medications-subtitle {
    font-size: 14px;
    color: #8b949e;
    font-weight: 400;
}

.medications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.medication-card {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.medication-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #0ea5e9;
    opacity: 0.8;
}

.medication-card:hover {
    transform: translateY(-2px);
    border-color: #0ea5e9;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

.medication-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.medication-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.medication-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid #0ea5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #0ea5e9;
    position: relative;
    transition: all 0.3s ease;
}

.medication-icon:hover {
    background: rgba(0, 212, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

.medication-details h3 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.medication-generic {
    font-size: 12px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: rgba(0, 212, 255, 0.1);
    color: #0ea5e9;
    border: 1px solid #0ea5e9;
}

.status-inactive {
    background: rgba(255, 255, 255, 0.05);
    color: #8b949e;
    border: 1px solid #30363d;
}

.dosage-section {
    margin-bottom: 16px;
}

.dosage-info {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    padding: 12px;
    border-left: 3px solid #0ea5e9;
}

.dosage-amount {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.dosage-frequency {
    font-size: 13px;
    color: #8b949e;
    margin-bottom: 8px;
}

.dosage-timeline {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #30363d;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-dot.taken {
    background: #0ea5e9;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
}

.timeline-dot.due {
    background: #ffffff;
    animation: pulse-dot 2s infinite;
}

.timeline-dot.overdue {
    background: #ffffff;
    opacity: 0.7;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.medication-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #30363d;
}

.medication-actions .action-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #30363d;
    background: #0d1117;
    color: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.medication-actions .action-btn:hover {
    border-color: #0ea5e9;
    background: rgba(0, 212, 255, 0.1);
    color: #0ea5e9;
}

.medication-actions .action-btn.primary {
    background: #0ea5e9;
    color: #0d1117;
    border-color: #0ea5e9;
}

.medication-actions .action-btn.primary:hover {
    background: #ffffff;
    color: #0d1117;
}

.compliance-meter {
    margin-top: 12px;
}

.compliance-label {
    font-size: 11px;
    color: #8b949e;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compliance-bar {
    width: 100%;
    height: 4px;
    background: #30363d;
    border-radius: 2px;
    overflow: hidden;
}

.compliance-fill {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9 0%, #ffffff 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.medication-refill-warning {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #8b949e;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ffffff;
    position: relative;
}

.medication-refill-warning::before {
    content: "▲";
    color: #0ea5e9;
    font-weight: 700;
    font-size: 14px;
}

/* Responsive design for medications */
@media (max-width: 768px) {
    .medications-grid {
        grid-template-columns: 1fr;
    }
    
    .medication-card {
        padding: 16px;
    }
    
    .medications-header {
        padding: 20px;
    }
    
    .medication-actions {
        flex-direction: column;
    }
    
    .medication-actions .action-btn {
        width: 100%;
    }
}

/* ============================================
   MEDICATION DASHBOARD - MODAL CONTEXT FIX
   Add this to your styles.css to ensure proper styling in modal
   ============================================ */

/* Force medication dashboard to work inside modal */
#allergeniq-modal-overlay .medications-container,
.allergeniq-modal .medications-container,
.modal-content .medications-container,
#modal-medications-content .medications-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#allergeniq-modal-overlay .medications-header,
.allergeniq-modal .medications-header,
.modal-content .medications-header,
#modal-medications-content .medications-header {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-left: 4px solid #0ea5e9 !important;
    position: relative !important;
}

#allergeniq-modal-overlay .medications-header::before,
.allergeniq-modal .medications-header::before,
.modal-content .medications-header::before,
#modal-medications-content .medications-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9 0%, #1e90ff 50%, #00bfff 100%);
    border-radius: 12px 12px 0 0;
}

#allergeniq-modal-overlay .medications-title,
.allergeniq-modal .medications-title,
.modal-content .medications-title,
#modal-medications-content .medications-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .medications-subtitle,
.allergeniq-modal .medications-subtitle,
.modal-content .medications-subtitle,
#modal-medications-content .medications-subtitle {
    font-size: 14px !important;
    color: #8b949e !important;
    font-weight: 400 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .medications-grid,
.allergeniq-modal .medications-grid,
.modal-content .medications-grid,
#modal-medications-content .medications-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 0 !important;
}

#allergeniq-modal-overlay .medication-card,
.allergeniq-modal .medication-card,
.modal-content .medication-card,
#modal-medications-content .medication-card {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#allergeniq-modal-overlay .medication-card::before,
.allergeniq-modal .medication-card::before,
.modal-content .medication-card::before,
#modal-medications-content .medication-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #0ea5e9;
    opacity: 0.8;
}

#allergeniq-modal-overlay .medication-card:hover,
.allergeniq-modal .medication-card:hover,
.modal-content .medication-card:hover,
#modal-medications-content .medication-card:hover {
    transform: translateY(-2px) !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2) !important;
}

#allergeniq-modal-overlay .medication-header,
.allergeniq-modal .medication-header,
.modal-content .medication-header,
#modal-medications-content .medication-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#allergeniq-modal-overlay .medication-name,
.allergeniq-modal .medication-name,
.modal-content .medication-name,
#modal-medications-content .medication-name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#allergeniq-modal-overlay .medication-icon,
.allergeniq-modal .medication-icon,
.modal-content .medication-icon,
#modal-medications-content .medication-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid #0ea5e9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0ea5e9 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

#allergeniq-modal-overlay .medication-icon:hover,
.allergeniq-modal .medication-icon:hover,
.modal-content .medication-icon:hover,
#modal-medications-content .medication-icon:hover {
    background: rgba(0, 212, 255, 0.2) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.3) !important;
}

#allergeniq-modal-overlay .medication-details h3,
.allergeniq-modal .medication-details h3,
.modal-content .medication-details h3,
#modal-medications-content .medication-details h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .medication-generic,
.allergeniq-modal .medication-generic,
.modal-content .medication-generic,
#modal-medications-content .medication-generic {
    font-size: 12px !important;
    color: #8b949e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .status-badge,
.allergeniq-modal .status-badge,
.modal-content .status-badge,
#modal-medications-content .status-badge {
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#allergeniq-modal-overlay .status-active,
.allergeniq-modal .status-active,
.modal-content .status-active,
#modal-medications-content .status-active {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #0ea5e9 !important;
    border: 1px solid #0ea5e9 !important;
}

#allergeniq-modal-overlay .status-inactive,
.allergeniq-modal .status-inactive,
.modal-content .status-inactive,
#modal-medications-content .status-inactive {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #8b949e !important;
    border: 1px solid #30363d !important;
}

#allergeniq-modal-overlay .dosage-section,
.allergeniq-modal .dosage-section,
.modal-content .dosage-section,
#modal-medications-content .dosage-section {
    margin-bottom: 16px !important;
}

#allergeniq-modal-overlay .dosage-info,
.allergeniq-modal .dosage-info,
.modal-content .dosage-info,
#modal-medications-content .dosage-info {
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    border-left: 3px solid #0ea5e9 !important;
}

#allergeniq-modal-overlay .dosage-amount,
.allergeniq-modal .dosage-amount,
.modal-content .dosage-amount,
#modal-medications-content .dosage-amount {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .dosage-frequency,
.allergeniq-modal .dosage-frequency,
.modal-content .dosage-frequency,
#modal-medications-content .dosage-frequency {
    font-size: 13px !important;
    color: #8b949e !important;
    margin-bottom: 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .dosage-timeline,
.allergeniq-modal .dosage-timeline,
.modal-content .dosage-timeline,
#modal-medications-content .dosage-timeline {
    display: flex !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

#allergeniq-modal-overlay .timeline-dot,
.allergeniq-modal .timeline-dot,
.modal-content .timeline-dot,
#modal-medications-content .timeline-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #30363d !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

#allergeniq-modal-overlay .timeline-dot.taken,
.allergeniq-modal .timeline-dot.taken,
.modal-content .timeline-dot.taken,
#modal-medications-content .timeline-dot.taken {
    background: #0ea5e9 !important;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.6) !important;
}

#allergeniq-modal-overlay .timeline-dot.due,
.allergeniq-modal .timeline-dot.due,
.modal-content .timeline-dot.due,
#modal-medications-content .timeline-dot.due {
    background: #ffffff !important;
    animation: pulse-dot 2s infinite !important;
}

#allergeniq-modal-overlay .timeline-dot.overdue,
.allergeniq-modal .timeline-dot.overdue,
.modal-content .timeline-dot.overdue,
#modal-medications-content .timeline-dot.overdue {
    background: #ffffff !important;
    opacity: 0.7 !important;
}

#allergeniq-modal-overlay .compliance-meter,
.allergeniq-modal .compliance-meter,
.modal-content .compliance-meter,
#modal-medications-content .compliance-meter {
    margin-top: 12px !important;
}

#allergeniq-modal-overlay .compliance-label,
.allergeniq-modal .compliance-label,
.modal-content .compliance-label,
#modal-medications-content .compliance-label {
    font-size: 11px !important;
    color: #8b949e !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .compliance-bar,
.allergeniq-modal .compliance-bar,
.modal-content .compliance-bar,
#modal-medications-content .compliance-bar {
    width: 100% !important;
    height: 4px !important;
    background: #30363d !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

#allergeniq-modal-overlay .compliance-fill,
.allergeniq-modal .compliance-fill,
.modal-content .compliance-fill,
#modal-medications-content .compliance-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #0ea5e9 0%, #ffffff 100%) !important;
    border-radius: 2px !important;
    transition: width 0.3s ease !important;
}

#allergeniq-modal-overlay .medication-refill-warning,
.allergeniq-modal .medication-refill-warning,
.modal-content .medication-refill-warning,
#modal-medications-content .medication-refill-warning {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #8b949e !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #ffffff !important;
    position: relative !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .medication-refill-warning::before,
.allergeniq-modal .medication-refill-warning::before,
.modal-content .medication-refill-warning::before,
#modal-medications-content .medication-refill-warning::before {
    content: "▲" !important;
    color: #0ea5e9 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

#allergeniq-modal-overlay .medication-actions,
.allergeniq-modal .medication-actions,
.modal-content .medication-actions,
#modal-medications-content .medication-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #30363d !important;
}

#allergeniq-modal-overlay .medication-actions .action-btn,
.allergeniq-modal .medication-actions .action-btn,
.modal-content .medication-actions .action-btn,
#modal-medications-content .medication-actions .action-btn {
    flex: 1 !important;
    padding: 8px 12px !important;
    border: 1px solid #30363d !important;
    background: #0d1117 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#allergeniq-modal-overlay .medication-actions .action-btn:hover,
.allergeniq-modal .medication-actions .action-btn:hover,
.modal-content .medication-actions .action-btn:hover,
#modal-medications-content .medication-actions .action-btn:hover {
    border-color: #0ea5e9 !important;
    background: rgba(0, 212, 255, 0.1) !important;
    color: #0ea5e9 !important;
}

#allergeniq-modal-overlay .medication-actions .action-btn.primary,
.allergeniq-modal .medication-actions .action-btn.primary,
.modal-content .medication-actions .action-btn.primary,
#modal-medications-content .medication-actions .action-btn.primary {
    background: #0ea5e9 !important;
    color: #0d1117 !important;
    border-color: #0ea5e9 !important;
}

#allergeniq-modal-overlay .medication-actions .action-btn.primary:hover,
.allergeniq-modal .medication-actions .action-btn.primary:hover,
.modal-content .medication-actions .action-btn.primary:hover,
#modal-medications-content .medication-actions .action-btn.primary:hover {
    background: #ffffff !important;
    color: #0d1117 !important;
}
strong#transcript-progress {
    margin: auto;
    color: red;
}
/* Mobile responsive for medications in modal */
@media (max-width: 768px) {
    #allergeniq-modal-overlay .medications-grid,
    .allergeniq-modal .medications-grid,
    .modal-content .medications-grid,
    #modal-medications-content .medications-grid {
        grid-template-columns: 1fr !important;
    }

    #allergeniq-modal-overlay .medication-card,
    .allergeniq-modal .medication-card,
    .modal-content .medication-card,
    #modal-medications-content .medication-card {
        padding: 16px !important;
    }

    #allergeniq-modal-overlay .medications-header,
    .allergeniq-modal .medications-header,
    .modal-content .medications-header,
    #modal-medications-content .medications-header {
        padding: 16px !important;
    }

    #allergeniq-modal-overlay .medication-actions,
    .allergeniq-modal .medication-actions,
    .modal-content .medication-actions,
    #modal-medications-content .medication-actions {
        flex-direction: column !important;
    }

    #allergeniq-modal-overlay .medication-actions .action-btn,
    .allergeniq-modal .medication-actions .action-btn,
    .modal-content .medication-actions .action-btn,
    #modal-medications-content .medication-actions .action-btn {
        width: 100% !important;
    }
}

/* Show transcript sections when body has transcript-ready class */
body.transcript-ready .show-on-transcript {

/* ========================================
   📖 ALLERGENIQ READABILITY ENHANCEMENTS
   ======================================== */

/* Improve text contrast for better readability */
#allergeniq-modal-overlay .modal-card p,
#allergeniq-modal-overlay .modal-card li,
#allergeniq-modal-overlay .modal-card div:not(.modal-card-header),
#allergeniq-modal-overlay .modal-card span:not(.modal-card-title) {
    color: #f8fafc !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Enhance readability of medication tables */
#allergeniq-modal-overlay .medication-row td,
#allergeniq-modal-overlay .medications-table td {
    color: #e2e8f0 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #374151 !important;
}

/* Improve visibility of status indicators */
#allergeniq-modal-overlay .status-indicator {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

/* Better contrast for important text */
#allergeniq-modal-overlay .important-text,
#allergeniq-modal-overlay .severity-text,
#allergeniq-modal-overlay .alert-text {
    color: #fbbf24 !important;
    font-weight: 600 !important;
    background: rgba(251, 191, 36, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Enhanced table headers */
#allergeniq-modal-overlay .medications-table th {
    background: #1f2937 !important;
    color: #0ea5e9 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px !important;
    border-bottom: 2px solid #0ea5e9 !important;
}

/* Improve modal card backgrounds for better text separation */
#allergeniq-modal-overlay .modal-card {
    background: #111827 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Better spacing and readability for lists */
#allergeniq-modal-overlay .modal-card ul,
#allergeniq-modal-overlay .modal-card ol {
    padding-left: 20px !important;
    margin: 12px 0 !important;
}

#allergeniq-modal-overlay .modal-card li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

/* ⚡ EMERGENCY READABILITY OVERRIDE - FORCE HIGH CONTRAST */
#allergeniq-modal-overlay * {
    color: #ffffff !important;
}

#allergeniq-modal-overlay .modal-card-title,
#allergeniq-modal-overlay h1,
#allergeniq-modal-overlay h2, 
#allergeniq-modal-overlay h3,
#allergeniq-modal-overlay h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Force readable text in all content areas */
#allergeniq-modal-overlay .modal-card-content,
#allergeniq-modal-overlay .modal-card-content *,
#allergeniq-modal-overlay .modal-content,
#allergeniq-modal-overlay .modal-content * {
    color: #f0f0f0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Make sure backgrounds are dark enough */
#allergeniq-modal-overlay .modal-card {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Fix medications white-on-white issue */
#allergeniq-modal-overlay .medications-table,
#allergeniq-modal-overlay .medication-card,
#allergeniq-modal-overlay .medication-name,
#allergeniq-modal-overlay .medication-dosage,
#allergeniq-modal-overlay .medication-frequency {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

#allergeniq-modal-overlay .medications-table td,
#allergeniq-modal-overlay .medications-table th {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Enhanced Heatmap with White-to-Blue Gradient */
#allergeniq-modal-overlay .symptom-cell,
#allergeniq-modal-overlay .heatmap-cell {
    color: #000000 !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

/* Gradient levels for severity heatmap */
#allergeniq-modal-overlay .severity-1 { background: #ffffff !important; color: #333333 !important; }
#allergeniq-modal-overlay .severity-2 { background: #e0f2fe !important; color: #0f172a !important; }
#allergeniq-modal-overlay .severity-3 { background: #b3e5fc !important; color: #0f172a !important; }
#allergeniq-modal-overlay .severity-4 { background: #81d4fa !important; color: #0f172a !important; }
#allergeniq-modal-overlay .severity-5 { background: #4fc3f7 !important; color: #ffffff !important; }
#allergeniq-modal-overlay .severity-6 { background: #29b6f6 !important; color: #ffffff !important; }
#allergeniq-modal-overlay .severity-7 { background: #03a9f4 !important; color: #ffffff !important; }
#allergeniq-modal-overlay .severity-8 { background: #039be5 !important; color: #ffffff !important; }
#allergeniq-modal-overlay .severity-9 { background: #0288d1 !important; color: #ffffff !important; }
#allergeniq-modal-overlay .severity-10 { background: #0277bd !important; color: #ffffff !important; }

/* Heatmap hover effects */
#allergeniq-modal-overlay .symptom-cell:hover,
#allergeniq-modal-overlay .heatmap-cell:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(0, 191, 255, 0.3) !important;
}
/* ===== MEDORA SOAP CARD STYLES ===== */
/* Clean card-style layout for SOAP sections */

.medora-soap-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.medora-soap-card-title {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.medora-soap-card-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #1f2937;
}

/* Assessment-specific styling within card */
.medora-soap-card-body .assessment-content {
    margin: 0;
    padding: 0;
}

.medora-soap-card-body .assessment-content br {
    display: block;
    margin-bottom: 4px;
    content: "";
}

/* Ensure diagnosis lines have proper spacing */
.medora-soap-card-body p {
    margin: 0;
    white-space: pre-line;
}

/* Numbered diagnosis styling */
.medora-soap-card-body .diagnosis-line {
    display: block;
    margin-bottom: 8px;
    padding-left: 0;
}

/* ICD-10 code highlighting */
.medora-soap-card-body .icd-code {
    color: #6366f1;
    font-weight: 500;
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
    font-size: 0.9em;
}

/* Clinical narrative styling */
.medora-soap-card-body .clinical-narrative {
    color: #64748b;
    font-style: italic;
}

/* ICD-10 Code Styling */
.medora-icd-code {
    background-color: #f0f9ff;
    color: #0369a1;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

/* =============================================================================
   ASSESSMENT DIAGNOSIS CARDS - MedoraSPT Theme
   Clean, clinical, enterprise-grade diagnosis cards
   ============================================================================= */

/* Container for all diagnosis cards - supports both ol and div */
ol.assessment-card-list,
div.assessment-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 800px;
    padding: 4px 0;
    margin: 0;
    list-style: none;
}

/* Individual diagnosis card - supports both li and div */
li.assessment-diagnosis-card,
div.assessment-diagnosis-card {
    background: #ffffff;
    border: 1px solid #e1e5f0;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    list-style: none;
}

.assessment-diagnosis-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Header row: number + title + ICD pill */
.assessment-diagnosis-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

/* Diagnosis number (1., 2., etc.) */
.assessment-diagnosis-number {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    min-width: 24px;
}

/* Diagnosis name/title */
.assessment-diagnosis-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

/* ICD-10 code pill/badge */
.assessment-icd-pill {
    display: inline-flex;
    align-items: center;
    background: #f0f9ff;
    color: #0369a1;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid #bae6fd;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Narrative/rationale body text */
.assessment-diagnosis-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.6;
    padding-left: 32px;
    margin-top: 4px;
}

/* Ensure #assessment-content uses consistent styling */
#assessment-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#assessment-content .assessment-card-list {
    font-family: inherit;
}

/* Fallback styling when card parsing fails */
.assessment-fallback {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: #1e293b;
    padding: 8px 0;
}

/* =============================================================================
   PLAN CARDS - MedoraSPT Theme
   Diagnosis-based plan cards matching Assessment card design
   ============================================================================= */

/* Container for all plan cards */
.plan-card-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    padding: 4px 0;
    margin: 0;
}

/* Individual plan card */
.plan-card {
    background: #ffffff;
    border: 1px solid #e1e5f0;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.plan-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Header row: title + ICD pill */
.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* Plan diagnosis title */
.plan-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

/* ICD-10 code pill/badge */
.plan-icd {
    display: inline-flex;
    align-items: center;
    background: #e0f2fe;
    color: #0369a1;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid #bae6fd;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Plan action items list */
.plan-items {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
}

.plan-items li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #475569;
    line-height: 1.6;
    margin: 6px 0;
    padding-left: 16px;
    position: relative;
}

.plan-items li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #0ea5e9;
    font-weight: 700;
}

/* Ensure #plan-content-container uses consistent styling */
#plan-content-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Fallback styling when card parsing fails */
.plan-fallback {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: #1e293b;
    padding: 8px 0;
}

/* Empty state for plan */
.plan-empty {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* =============================================================================
   MEDORA ENTERPRISE SIDEBAR - Navy Slate Design
   Enterprise-grade patient list with elevated cards and modern styling
   ============================================================================= */

/* Main Sidebar Container */
/* =============================================================================
   MEDORA SPT SIDEBAR - Premium Enterprise Design
   Matching MedoraSPT login page style
   ============================================================================= */

.medora-sidebar {
    background: rgba(12, 22, 36, 0.96) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.8) !important;
    padding: 16px !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(148, 163, 184, 0.06) !important;
    backdrop-filter: blur(20px) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* Sidebar Header - Fixed at top */
.medora-sidebar-header {
    padding: 0 0 14px 0;
    background: transparent;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    flex-shrink: 0;
    margin-bottom: 12px;
}

.medora-sidebar-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    letter-spacing: -0.01em;
    margin: 0 0 12px 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.medora-sidebar-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: #3b82f6;
    border-radius: 2px;
}

/* Filter Dropdown - MedoraSPT Style */
.medora-filter-dropdown {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 14px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.medora-filter-dropdown:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background-color: rgba(51, 65, 85, 0.6);
}

.medora-filter-dropdown:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.medora-filter-dropdown option {
    background: #1e293b;
    color: #f8fafc;
    padding: 10px;
}

/* Action Buttons Container - Fixed below header */
.medora-sidebar-actions {
    padding: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    margin-bottom: 12px;
}

/* Action Buttons Base - MedoraSPT Login CTA Style */
.medora-action-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 9999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.medora-btn-icon {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.medora-btn-text {
    text-align: center;
}

/* Secondary Action (Add Patient) - Dark navy button */
.medora-action-primary {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    box-shadow: none;
}

.medora-action-primary:hover {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, 0.6) !important;
}

.medora-action-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.medora-action-primary:active {
    background: #1e293b !important;
}

/* Primary Action (Sync IMS) - Blue button */
.medora-action-secondary {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.55);
}

.medora-action-secondary:hover {
    background: #2563eb !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.65);
}

.medora-action-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.medora-action-secondary:active {
    background: #1d4ed8 !important;
}

/* Action Divider - Hidden */
.medora-action-divider {
    display: none;
}

/* Sync Status */
.medora-sync-status {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 11px;
    color: #64748b;
    text-align: center;
    padding: 4px 0 0;
    min-height: 16px;
}

.medora-sync-status.syncing {
    color: #3b82f6;
}

.medora-sync-status.success {
    color: #10b981;
}

.medora-sync-status.error {
    color: #ef4444;
}

/* Patient List Container - Scrollable area */
.medora-patient-list-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0 -4px;
    padding: 0 4px;
}

/* Modern Scrollbar */
.medora-patient-list-container::-webkit-scrollbar {
    width: 5px;
}

.medora-patient-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.medora-patient-list-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.15);
    border-radius: 3px;
}

.medora-patient-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.25);
}

/* Patient List */
.medora-patient-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Patient Card - Enterprise Grade (medora-patient-list context)
   Default: neutral background with clear border separation
   Hover: subtle tint + 3px left accent, no transform/heavy shadow
   Selected: persistent tint + left accent + optional Active pill */
.medora-patient-list .patient-item,
.medora-patient-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    padding-left: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
    gap: 12px;
}

.medora-patient-list .patient-item:hover,
.medora-patient-card:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(148, 163, 184, 0.25);
    border-left-color: #64748b;
}

/* Selected Patient Card - Persistent enterprise state */
.medora-patient-list .patient-item.selected,
.medora-patient-list .patient-item.active,
.medora-patient-card.selected,
.medora-patient-card.active {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
    border-left-color: #64748b;
}

.medora-patient-list .patient-item.selected:hover,
.medora-patient-list .patient-item.active:hover,
.medora-patient-card.selected:hover,
.medora-patient-card.active:hover {
    background: rgba(100, 116, 139, 0.18);
}

/* Active pill - shown on selected patient */
.medora-patient-list .patient-item.selected::after,
.medora-patient-list .patient-item.active::after {
    content: 'Active';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* Patient Initials Avatar */
.medora-patient-list .patient-initials,
.medora-patient-avatar {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Patient Info */
.medora-patient-list .patient-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 10px;
}

/* Primary line - Patient name */
.medora-patient-list .patient-info .name,
.medora-patient-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f9fafb !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Secondary line - Age + info */
.medora-patient-list .patient-info .details,
.medora-patient-details {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 12px !important;
    color: #cbd5e1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

/* Tertiary line - Created date/MRN */
.medora-patient-list .patient-info .details:last-child {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

/* Visit Badge */
.medora-patient-list .visit-badge {
    background: #10b981;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.medora-patient-list .visit-badge.today {
    background: #3b82f6;
}

.medora-patient-list .visit-badge.follow-up {
    background: #f59e0b;
}

/* =============================================================================
   DELETE BUTTON - Outlook-style hover-to-reveal
   Hidden by default, appears on card hover
   ============================================================================= */

.medora-patient-list .patient-item .delete-btn,
.medora-patient-card .delete-btn,
#patient-list .patient-item .delete-btn {
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* Outlook-style: hidden by default */
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, color 0.15s ease, background 0.15s ease;
    pointer-events: none;
}

/* Show delete button on card hover */
.medora-patient-list .patient-item:hover .delete-btn,
.medora-patient-card:hover .delete-btn,
#patient-list .patient-item:hover .delete-btn {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Delete button hover state */
.medora-patient-list .patient-item .delete-btn:hover,
.medora-patient-card .delete-btn:hover,
#patient-list .patient-item .delete-btn:hover {
    color: #fca5a5 !important;
    background: rgba(252, 165, 165, 0.1) !important;
}

/* Empty State */
.medora-patient-list-empty {
    text-align: center;
    padding: 32px 16px;
    color: #64748b;
}

.medora-patient-list-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.4;
}

.medora-patient-list-empty-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
}

/* Loading State */
.medora-patient-list .patient-list-loading-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #64748b;
    font-size: 13px;
    text-align: center;
    padding: 32px 16px;
}

/* Override old sidebar styles when using medora-sidebar */
#patient-sidebar.medora-sidebar {
    background: rgba(12, 22, 36, 0.98) !important;
}

#patient-sidebar.medora-sidebar h2 {
    color: #f1f5f9 !important;
    font-size: 16px !important;
}

/* Hide old filter when using new one */
#patient-sidebar.medora-sidebar > #patient-filter:not(.medora-filter-dropdown) {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .medora-sidebar {
        width: 260px !important;
    }
}

@media (max-width: 1200px) {
    .medora-sidebar {
        width: 240px !important;
    }

    .medora-patient-list .patient-info .name,
    .medora-patient-name {
        font-size: 13px !important;
    }

    .medora-patient-list .patient-info .details,
    .medora-patient-details {
        font-size: 11px !important;
    }
}

/* =============================================================================
   MEDORA SPT DESIGN SYSTEM v3.0
   Exact MedoraSPT specification - Premium enterprise workspace
   ============================================================================= */

/* Design Tokens - EXACT SPT Specification */
:root {
    /* SPT Core Colors */
    --spt-bg-dark: #0c1624;
    --spt-surface: #f6f7fb;
    --spt-card: #ffffff;
    --spt-card-border: #e1e5f0;
    --spt-primary: #3b82f6;
    --spt-primary-hover: #2563eb;
    --spt-accent: #0ea5e9;
    --spt-text-dark: #0f172a;
    --spt-text-muted: #64748b;
    --spt-text-light: #94a3b8;

    /* SPT Gradients */
    --spt-header-gradient: radial-gradient(circle at top left, #2fa0ff, #05101f);
    --spt-accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);

    /* SPT Shadows */
    --spt-shadow-card: 0 4px 14px rgba(15, 23, 42, 0.08);
    --spt-shadow-elevated: 0 8px 32px rgba(15, 23, 42, 0.12);
    --spt-shadow-deep: 0 12px 48px rgba(0, 0, 0, 0.35);
    --spt-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.25);

    /* SPT Radii */
    --spt-radius: 14px;
    --spt-radius-sm: 10px;
    --spt-radius-lg: 18px;

    /* SPT Spacing */
    --spt-space-xs: 4px;
    --spt-space-sm: 8px;
    --spt-space-md: 16px;
    --spt-space-lg: 24px;
    --spt-space-xl: 32px;

    /* SPT Semantic Colors */
    --spt-success: #10b981;
    --spt-warning: #f59e0b;
    --spt-danger: #ef4444;

    /* Legacy compatibility aliases */
    --medora-bg: var(--spt-bg-dark);
    --medora-surface: var(--spt-surface);
    --medora-card-dark: rgba(15, 23, 42, 0.96);
    --medora-card-light: var(--spt-card);
    --medora-card-radius: var(--spt-radius);
    --medora-card-shadow: var(--spt-shadow-deep);
    --medora-accent: var(--spt-primary);
    --medora-accent-light: #60a5fa;
    --medora-accent-cyan: var(--spt-accent);
    --medora-text-primary: #f8fafc;
    --medora-text-secondary: var(--spt-text-light);
    --medora-text-muted: var(--spt-text-muted);
    --medora-text-dark: var(--spt-text-dark);
    --medora-border-subtle: rgba(148, 163, 184, 0.1);
    --medora-border-medium: rgba(148, 163, 184, 0.2);
    --medora-border-accent: rgba(59, 130, 246, 0.3);
    --medora-space-xs: var(--spt-space-xs);
    --medora-space-sm: var(--spt-space-sm);
    --medora-space-md: var(--spt-space-md);
    --medora-space-lg: var(--spt-space-lg);
    --medora-space-xl: var(--spt-space-xl);
}

/* =============================================================================
   CENTER WORKSPACE - Primary Content Area
   ============================================================================= */

/* Main workspace container */
#main-content {
    background: var(--medora-card-light) !important;
    border-radius: var(--medora-card-radius) !important;
    box-shadow: var(--medora-card-shadow) !important;
    padding: var(--medora-space-lg) !important;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Workspace scrollbar */
#main-content::-webkit-scrollbar {
    width: 8px;
}

#main-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#main-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#main-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Empty state - shown when no patient selected */
.medora-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--medora-space-xl);
    text-align: center;
}

.medora-empty-state-logo {
    width: 80px;
    height: 80px;
    opacity: 0.15;
    margin-bottom: var(--medora-space-lg);
    filter: grayscale(100%);
}

.medora-empty-state-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--medora-text-dark);
    margin-bottom: var(--medora-space-sm);
    letter-spacing: -0.02em;
}

.medora-empty-state-subtitle {
    font-size: 15px;
    color: var(--medora-text-muted);
    line-height: 1.6;
    max-width: 320px;
}

/* SOAP notes container styling */
#notes-section {
    background: transparent;
}

.soap-section,
.note-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: var(--medora-space-md);
    margin-bottom: var(--medora-space-md);
    transition: all 0.2s ease;
}

.soap-section:hover,
.note-section:hover {
    border-color: var(--medora-accent);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.soap-section h3,
.note-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--medora-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--medora-space-sm);
    padding-bottom: var(--medora-space-sm);
    border-bottom: 2px solid var(--medora-accent);
    display: inline-block;
}

/* Patient details header in main content */
#patient-details {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
    border: 1px solid #e0f2fe;
    border-radius: 12px;
    padding: var(--medora-space-md);
    margin-bottom: var(--medora-space-md);
}

#patient-details h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--medora-text-dark);
    margin-bottom: var(--medora-space-sm);
}

/* =============================================================================
   RIGHT PANEL - Feature Cards
   ============================================================================= */

#right-panel {
    background: var(--medora-card-dark) !important;
    border-radius: var(--medora-card-radius) !important;
    box-shadow: var(--medora-card-shadow) !important;
    border: 1px solid var(--medora-border-subtle) !important;
    padding: var(--medora-space-md) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Right panel scrollbar */
#right-panel::-webkit-scrollbar {
    width: 6px;
}

#right-panel::-webkit-scrollbar-track {
    background: transparent;
}

#right-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 3px;
}

#right-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.4);
}

/* Feature cards in right panel */
#right-panel .insights-section,
#right-panel .ai-insights-collapsed,
#right-panel #allergeniq-collapsed-card,
#right-panel #clinical-references-card,
#right-panel .tab-content > div {
    background: var(--medora-card-light) !important;
    border-radius: 14px !important;
    padding: var(--medora-space-md) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    transition: all 0.25s ease !important;
    cursor: pointer;
}

#right-panel .insights-section:hover,
#right-panel .ai-insights-collapsed:hover,
#right-panel #allergeniq-collapsed-card:hover,
#right-panel #clinical-references-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    border-color: var(--medora-accent) !important;
}

/* Card headers in right panel */
#right-panel h3,
#right-panel .card-header,
.ai-insights-collapsed h3,
#allergeniq-collapsed-card h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--medora-accent) !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--medora-accent) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Card body text */
#right-panel p,
#right-panel .card-body,
.ai-insights-collapsed p {
    font-size: 13px;
    color: var(--medora-text-muted);
    line-height: 1.5;
}

/* Stats in cards */
#right-panel .stat-value,
.ai-insights-collapsed .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--medora-text-dark);
}

#right-panel .stat-label {
    font-size: 11px;
    color: var(--medora-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================================
   LEFT SIDEBAR - Styles moved to MEDORA SPT SIDEBAR section above (line ~5489)
   ============================================================================= */

/* =============================================================================
   TYPOGRAPHY SYSTEM
   ============================================================================= */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* Body text improvements */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   GLOBAL HOVER & INTERACTION STATES
   ============================================================================= */

/* Subtle hover lift for interactive elements */
.clickable-card,
[onclick]:not(button):not(a) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-card:hover,
[onclick]:not(button):not(a):hover {
    transform: translateY(-1px);
}

/* Focus states for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--medora-accent);
    outline-offset: 2px;
}

/* =============================================================================
   QUALITY BANNER & ALERTS
   ============================================================================= */

#quality-banner {
    border-radius: 12px;
    padding: var(--medora-space-md);
    margin-bottom: var(--medora-space-md);
    font-size: 14px;
    font-weight: 500;
}

.quality-banner.success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
    color: #065f46;
}

.quality-banner.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    color: #92400e;
}

.quality-banner.error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
    color: #991b1b;
}

/* =============================================================================
   MEDORA SPT-STYLE WORKSPACE SYSTEM
   Premium enterprise workspace matching MedoraSPT design language
   ============================================================================= */

/* -----------------------------------------------------------------------------
   WORKSPACE CONTAINER - SPT elevated white surface
   ----------------------------------------------------------------------------- */

.medora-workspace {
    background: var(--spt-card);
    border: 1px solid var(--spt-card-border);
    border-radius: var(--spt-radius-lg);
    box-shadow: var(--spt-shadow-deep);
    padding: 0;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.medora-workspace-inner {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--spt-surface);
}

/* Workspace scrollbar - thin and elegant */
.medora-workspace-inner::-webkit-scrollbar {
    width: 6px;
}

.medora-workspace-inner::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.medora-workspace-inner::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.medora-workspace-inner::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* -----------------------------------------------------------------------------
   EMPTY STATE - SPT Style
   ----------------------------------------------------------------------------- */

.medora-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 60px 40px;
    text-align: center;
    background: var(--spt-surface);
    border-radius: var(--spt-radius-lg);
}

.medora-empty-state-logo {
    width: 88px;
    height: 88px;
    opacity: 0.12;
    margin-bottom: 28px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.medora-empty-state:hover .medora-empty-state-logo {
    opacity: 0.18;
    transform: scale(1.02);
}

.medora-empty-state-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--spt-text-dark);
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.medora-empty-state-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--spt-text-muted);
    line-height: 1.6;
    max-width: 360px;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   MAIN CONTENT AREA - Override to be transparent
   ----------------------------------------------------------------------------- */

#main-content {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* -----------------------------------------------------------------------------
   SOAP SECTIONS - SPT Card Styling
   ----------------------------------------------------------------------------- */

.soap-section,
.note-section {
    background: var(--spt-card);
    border: 1px solid var(--spt-card-border);
    border-radius: var(--spt-radius);
    padding: 18px 22px;
    margin-bottom: 14px;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: var(--spt-shadow-card);
}

.soap-section:hover,
.note-section:hover {
    border-color: var(--spt-primary);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.soap-section::before,
.note-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background: var(--spt-accent-gradient);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.soap-section:hover::before,
.note-section:hover::before {
    opacity: 1;
}

.soap-section h3,
.note-section h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--spt-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    border-bottom: 2px solid var(--spt-primary);
    display: inline-block;
}

.soap-section .content,
.note-section .content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--spt-text-dark);
}

/* Note action buttons */
.note-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.note-btn {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.note-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

/* Copy All SOAP Notes button */
#copy-soap-btn,
#push-to-emr-btn {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#copy-soap-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

#copy-soap-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

#push-to-emr-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

#push-to-emr-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Patient details in workspace */
#patient-details {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

#patient-details h3 {
    font-size: 15px;
    font-weight: 700;
    color: #0369a1;
    margin: 0 0 12px 0;
}

#patient-details p {
    font-size: 14px;
    color: #0c4a6e;
    margin: 6px 0;
    line-height: 1.5;
}

#back-to-patient-list-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #0ea5e9;
    background: transparent;
    color: #0ea5e9;
    cursor: pointer;
    transition: all 0.15s ease;
}

#back-to-patient-list-btn:hover {
    background: #0ea5e9;
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   LEFT SIDEBAR - Styles consolidated in MEDORA SPT SIDEBAR section (line ~5489)
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   RIGHT PANEL - Now part of SPT light surface (transparent on #f6f7fb)
   ----------------------------------------------------------------------------- */

/* Removed dark panel styling - right panel now sits on light SPT surface */

/* Feature cards in right panel - SPT white cards */
#right-panel .insights-section,
#right-panel .ai-insights-collapsed,
#right-panel #allergeniq-collapsed-card,
#right-panel #clinical-references-card,
#right-panel .tab-content > div:not(.modal-overlay) {
    background: var(--spt-card) !important;
    border-radius: var(--spt-radius) !important;
    padding: 18px !important;
    box-shadow: var(--spt-shadow-card) !important;
    border: 1px solid var(--spt-card-border) !important;
    transition: all 0.2s ease !important;
}

#right-panel .insights-section:hover,
#right-panel .ai-insights-collapsed:hover,
#right-panel #allergeniq-collapsed-card:hover,
#right-panel #clinical-references-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--spt-shadow-elevated) !important;
    border-color: var(--spt-primary) !important;
}

/* Card headers - SPT styling */
#right-panel h3,
.ai-insights-collapsed h3,
#allergeniq-collapsed-card h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--spt-primary) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 2px solid var(--spt-primary) !important;
    letter-spacing: 0.2px !important;
}

/* Stats styling in cards */
#right-panel [style*="font-size: 20px"],
#right-panel [style*="font-size:20px"] {
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Right panel scrollbar */
#right-panel::-webkit-scrollbar {
    width: 5px;
}

#right-panel::-webkit-scrollbar-track {
    background: transparent;
}

#right-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

#right-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
}

/* -----------------------------------------------------------------------------
   HEADER - SPT 72px Radial Gradient Header
   ----------------------------------------------------------------------------- */

.header {
    background: var(--spt-header-gradient) !important;
    height: 72px !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    border-bottom: none !important;
}

.header .logo-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
}

.header .logo-icon,
.header .logo img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
}

/* -----------------------------------------------------------------------------
   GLOBAL REFINEMENTS - SPT Styling
   ----------------------------------------------------------------------------- */

/* Body - SPT dark background */
body {
    background: var(--spt-bg-dark) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif !important;
}

/* Main container - SPT 3-column grid: 300px | 1fr | 360px */
.main-container.container,
.container {
    padding: 20px !important;
    gap: 20px !important;
    display: grid !important;
    grid-template-columns: 300px 1fr 360px !important;
    max-width: 100% !important;
}

/* Smooth transitions globally */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quality banner improvements */
#quality-banner {
    border-radius: 14px !important;
    padding: 16px 20px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
}

/* Processing indicator */
.medora-processing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3);
}

.medora-processing-indicator .spinner-icon {
    animation: pulse-spin 1s ease-in-out infinite;
}

@keyframes pulse-spin {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* =============================================================================
   MEDORA SCRIBE DASHBOARD - SPT LAYOUT SYSTEM v6.0
   Full MedoraSPT visual match: centered layout with light surface wrapper
   ============================================================================= */

/* -----------------------------------------------------------------------------
   LAYOUT STRUCTURE - Centered 3-Column Grid (Sidebar | Surface[Center+Right])
   ----------------------------------------------------------------------------- */

/* Body background - dark navy */
body {
    background: var(--spt-bg-dark) !important;
    min-height: 100vh !important;
}

/* Main 2-column grid: Sidebar | SPT Surface (which contains center+right) */
.medora-app-layout,
.main-container.container {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 24px !important;
    min-height: calc(100vh - 72px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* -----------------------------------------------------------------------------
   SPT CONTENT SURFACE - Light grey background spanning center + right
   ----------------------------------------------------------------------------- */

#spt-content-surface,
.spt-content-surface {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) !important;
    gap: 20px !important;
    background: #f6f7fb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    min-height: calc(100vh - 120px) !important;
    box-sizing: border-box !important;
}

/* -----------------------------------------------------------------------------
   LEFT SIDEBAR - Styles consolidated in MEDORA SPT SIDEBAR section (line ~5489)
   Dark navy patient cards with Outlook-style hover-to-reveal delete button
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   CENTER WORKSPACE - Main Content Area (Column 1 inside SPT Surface)
   ----------------------------------------------------------------------------- */

/* Main content container - sits on light surface, contains white card */
#main-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Workspace container - fills the main content area */
#medora-workspace,
.medora-workspace {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    flex: 1 !important;
}

/* Workspace inner content - THE BIG WHITE CARD for SOAP content */
#medora-workspace-inner,
.medora-workspace-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #e1e5f0 !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.medora-workspace-inner::-webkit-scrollbar {
    width: 6px;
}

.medora-workspace-inner::-webkit-scrollbar-track {
    background: #f8fafc;
    margin: 4px 0;
}

.medora-workspace-inner::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.medora-workspace-inner::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* =============================================================================
   EMPTY STATE - SPT-Style Landing Card
   Shown when no patient is selected. Clean, enterprise, full-width card.
   ============================================================================= */

/* Container - fills the workspace and centers content */
#medora-empty-state,
.medora-empty-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    background: transparent !important;
    width: 100% !important;
    min-height: 100% !important;
}

/* The white card - fills the empty state area */
.medora-empty-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
    padding: 60px 40px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e1e5f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

/* Faint M watermark - positioned bottom-right, very subtle */
.medora-empty-watermark {
    position: absolute;
    bottom: -40px;
    right: -20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    font-size: 320px;
    font-weight: 800;
    color: rgba(59, 130, 246, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Content overlay - sits above watermark */
.medora-empty-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 480px;
}

.medora-empty-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.medora-empty-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    max-width: 400px;
}

/* Responsive - adjust for smaller screens */
@media (max-width: 960px) {
    .medora-empty-card {
        padding: 40px 24px;
        min-height: 300px;
    }

    .medora-empty-watermark {
        font-size: 220px;
        bottom: -30px;
        right: -15px;
    }

    .medora-empty-title {
        font-size: 18px;
    }

    .medora-empty-subtitle {
        font-size: 13px;
    }
}

/* =============================================================================
   WORKSPACE VISIBILITY CONTROL - JS-controlled via .hidden class
   The ONLY mechanism for show/hide is the .hidden class toggled by JS.
   ============================================================================= */

/* Empty state - shown by default (no .hidden class) */
#medora-empty-state {
    display: flex !important;
}

/* Empty state - hidden when .hidden class is added by JS */
#medora-empty-state.hidden {
    display: none !important;
}

/* Workspace inner - hidden by default (has .hidden class in initial HTML or added by JS) */
#medora-workspace-inner {
    display: none !important;
}

/* Workspace inner - shown when .hidden class is removed by JS */
#medora-workspace-inner:not(.hidden) {
    display: block !important;
}

/* -----------------------------------------------------------------------------
   RIGHT PANEL - AI Insights Panel (Column 2 inside SPT Surface)
   On the light surface with stacked white cards
   ----------------------------------------------------------------------------- */

/* Right panel container - sits on light surface, transparent */
.right-panel,
#right-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 160px) !important;
}

/* Right panel scrollbar - subtle on light surface */
#right-panel::-webkit-scrollbar {
    width: 5px;
}

#right-panel::-webkit-scrollbar-track {
    background: transparent;
}

#right-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

#right-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* AI feature cards inside right panel - white cards with SPT styling */
#right-panel .insights-section,
#right-panel .ai-insights-collapsed,
#right-panel #ai-insights-collapsed-card,
#right-panel #allergeniq-collapsed-card,
#right-panel #clinical-references-card,
#right-panel .allergeniq-section,
#right-panel .references-section,
#right-panel .tab-content > div {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #e1e5f0 !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

#right-panel .insights-section:hover,
#right-panel .ai-insights-collapsed:hover,
#right-panel #ai-insights-collapsed-card:hover,
#right-panel #allergeniq-collapsed-card:hover,
#right-panel #clinical-references-card:hover,
#right-panel .allergeniq-section:hover,
#right-panel .references-section:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12) !important;
    border-color: var(--spt-primary) !important;
}

/* Card headers in right panel */
#right-panel h3 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--spt-primary) !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--spt-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Card body text in right panel */
#right-panel p,
#right-panel .card-text {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

/* Stats/metrics in right panel cards */
#right-panel .stat-value,
#right-panel [style*="font-size: 20px"] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif !important;
    font-weight: 700 !important;
}

/* -----------------------------------------------------------------------------
   SOAP SECTIONS - Clean Medical-Grade Cards (SPT Style)
   ----------------------------------------------------------------------------- */

/* Main SOAP section styling */
.soap-section,
.note-section,
.soap-section-card {
    background: #ffffff !important;
    border: 1px solid #e1e5f0 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

.soap-section:hover,
.note-section:hover,
.soap-section-card:hover {
    border-color: var(--spt-primary) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Left accent line on hover */
.soap-section::before,
.note-section::before,
.soap-section-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 3px !important;
    background: linear-gradient(180deg, var(--spt-primary) 0%, var(--spt-accent) 100%) !important;
    border-radius: 0 2px 2px 0 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.soap-section:hover::before,
.note-section:hover::before,
.soap-section-card:hover::before {
    opacity: 1 !important;
}

/* Section headers - muted grey with blue underline */
.soap-section h3,
.note-section h3,
.soap-section-card h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 2px solid var(--spt-primary) !important;
    display: inline-block !important;
}

/* Section content */
.soap-section .content,
.note-section .content,
.soap-section-card .content,
.soap-section p,
.note-section p,
.soap-section-card p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}

/* Patient details header card */
#patient-details {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin-bottom: 18px !important;
}

#patient-details h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0369a1 !important;
    margin: 0 0 10px 0 !important;
    border-bottom: none !important;
    padding: 0 !important;
}

#patient-details p {
    font-size: 13px !important;
    color: #0c4a6e !important;
    margin: 5px 0 !important;
    line-height: 1.5 !important;
}

/* Back button */
#back-to-patient-list-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    border: 1px solid var(--spt-accent) !important;
    background: transparent !important;
    color: var(--spt-accent) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#back-to-patient-list-btn:hover {
    background: var(--spt-accent) !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   RIGHT PANEL - AI Cards (Light surface with white cards - MedoraSPT style)
   ----------------------------------------------------------------------------- */

#right-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-height: calc(100vh - 172px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#right-panel::-webkit-scrollbar {
    width: 5px;
}

#right-panel::-webkit-scrollbar-track {
    background: transparent;
}

#right-panel::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 3px;
}

#right-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.4);
}

/* AI feature cards - SPT white cards with soft shadow */
#right-panel .insights-section,
#right-panel .ai-insights-collapsed,
#right-panel #allergeniq-collapsed-card,
#right-panel #clinical-references-card,
#right-panel .tab-content > div:not(.modal-overlay),
.ai-feature-card {
    background: #ffffff !important;
    border: 1px solid #e1e5f0 !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#right-panel .insights-section:hover,
#right-panel .ai-insights-collapsed:hover,
#right-panel #allergeniq-collapsed-card:hover,
#right-panel #clinical-references-card:hover,
.ai-feature-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
    border-color: var(--spt-primary) !important;
}

/* Card headers with blue underline - SPT style */
#right-panel h3,
#right-panel .card-header,
.ai-insights-collapsed h3,
#allergeniq-collapsed-card h3,
#clinical-references-card h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--spt-primary) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 2px solid var(--spt-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Card content text */
#right-panel p,
#right-panel .card-body {
    font-size: 13px !important;
    color: var(--spt-text-muted) !important;
    line-height: 1.5 !important;
}

/* Stats in cards */
#right-panel .stat-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--spt-text-dark) !important;
}

#right-panel .stat-label {
    font-size: 11px !important;
    color: var(--spt-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ----------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .medora-app-layout,
    .main-container.container {
        grid-template-columns: 260px minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 20px !important;
        max-width: 100% !important;
    }

    #spt-content-surface,
    .spt-content-surface {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr) !important;
        gap: 16px !important;
        padding: 16px !important;
    }
}

@media (max-width: 1200px) {
    .medora-app-layout,
    .main-container.container {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    #spt-content-surface,
    .spt-content-surface {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) !important;
        gap: 14px !important;
        padding: 14px !important;
    }
}

@media (max-width: 1024px) {
    .medora-app-layout,
    .main-container.container {
        grid-template-columns: 220px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    #spt-content-surface,
    .spt-content-surface {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #right-panel {
        grid-column: 1 !important;
        grid-row: 2 !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    .medora-app-layout,
    .main-container.container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    #patient-sidebar {
        height: auto !important;
        max-height: 300px !important;
    }

    #spt-content-surface,
    .spt-content-surface {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
}

/* === Medora Scribe SPT Layout Overrides (final) === */

/* Main 3-column grid: sidebar | center | right */
.main-container.container {
  display: grid;
  grid-template-columns: 280px minmax(0, 1.6fr) minmax(340px, 1fr);
  gap: 24px;
  height: calc(100vh - 72px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

/* Sidebar locked in first column */
#patient-sidebar {
  grid-column: 1;
}

/* SPT surface spans center + right columns */
#spt-content-surface {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 24px;
  background: #f6f7fb;
  border-radius: 18px;
  padding: 24px;
  box-sizing: border-box;
}

/* Center main-content uses first inner column and inherits the surface background */
#main-content {
  grid-column: 1;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible;
}

/* Right AI panel uses second inner column and is always visible */
#right-panel {
  grid-column: 2;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

/* White card styling for workspace (SOAP) */
#medora-workspace-inner {
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 28px;
  border: 1px solid #e1e5f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
}

/* Empty state container fills center column */
#medora-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}

/* Empty state card that replaces the big black M */
#medora-empty-state .medora-empty-card {
  width: 100%;
  min-height: 420px;
  padding: 40px 32px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e1e5f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
}

/* Empty state typography */
.medora-empty-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.medora-empty-card-subtitle {
  font-size: 14px;
  color: #64748b;
}

/* Simple show/hide logic using .hidden */
#medora-workspace-inner.hidden {
  display: none !important;
}

#medora-workspace-inner:not(.hidden) {
  display: block !important;
}

#medora-empty-state.hidden {
  display: none !important;
}

/* Right panel AI cards look like SPT cards */
#right-panel .card,
#right-panel .ai-card,
#right-panel .panel-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e1e5f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 16px 18px;
  box-sizing: border-box;
}

/* =============================================================================
   MEDORA SPT DASHBOARD - FINAL CRISP OVERRIDES
   Matches login page enterprise styling - Full width, no wasted space
   ============================================================================= */

/* Dark navy background with subtle gradient like login */
body {
  background: #0c1624 !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Main container - FULL WIDTH, minimal padding */
.main-container.container {
  display: grid !important;
  grid-template-columns: 280px 1fr 360px !important;
  gap: 16px !important;
  height: calc(100vh - 72px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* Remove SPT surface wrapper - let columns fill directly */
#spt-content-surface {
  display: contents !important;
}

/* Patient Sidebar - Dark glass panel */
#patient-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(148, 163, 184, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  height: calc(100vh - 104px) !important;
}

/* Center Column - Light surface with white card */
#main-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: #f6f7fb !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Right Panel - Light surface with white cards */
#right-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
  background: #f6f7fb !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(100vh - 104px) !important;
}

/* Workspace container */
#medora-workspace {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  background: transparent !important;
}

/* Empty State - Centered white card */
#medora-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-height: 400px !important;
}

#medora-empty-state .medora-empty-card {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 380px !important;
  padding: 48px 40px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e1e5f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.medora-empty-card-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.02em !important;
}

.medora-empty-card-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  max-width: 400px !important;
}

/* Workspace Inner - White SOAP card */
#medora-workspace-inner {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 24px !important;
  border: 1px solid #e1e5f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}

/* Right panel cards - Crisp white SPT style */
#right-panel > div,
#right-panel .tab-content,
#right-panel .insights-section,
#right-panel .ai-insights-collapsed,
#right-panel .allergeniq-section,
#right-panel .references-section {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e1e5f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  padding: 14px 16px !important;
  transition: all 0.2s ease !important;
}

#right-panel > div:hover,
#right-panel .insights-section:hover,
#right-panel .ai-insights-collapsed:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Card headers in right panel */
#right-panel h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3b82f6 !important;
  margin: 0 0 10px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #3b82f6 !important;
}

/* Visibility control */
#medora-empty-state.hidden { display: none !important; }
#medora-workspace-inner.hidden { display: none !important; }
#medora-workspace-inner:not(.hidden) { display: block !important; }

/* Responsive - Tablet */
@media (max-width: 1200px) {
  .main-container.container {
    grid-template-columns: 260px 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  #spt-content-surface {
    grid-template-columns: 1fr 320px !important;
  }
}

/* Responsive - Small screens */
@media (max-width: 1024px) {
  .main-container.container {
    grid-template-columns: 240px 1fr !important;
  }
  #right-panel {
    display: none !important;
  }
}

/* =============================================================================
   SPT LAYOUT FINAL OVERRIDES - Dec 4 2025
   These MUST be at the end to override all previous conflicting styles

   Layout structure:
   - Outer grid: .main-container.container (280px sidebar | 1fr content-surface)
   - Inner grid: #spt-content-surface (1fr main-content | 360px right-panel)
   ============================================================================= */

/* OUTER GRID: Sidebar + Content Surface */
.main-container.container {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 72px) !important;
  padding: 16px !important;
  margin: 0 !important;
}

/* PATIENT SIDEBAR: Outer column 1 */
#patient-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
}

/* SPT CONTENT SURFACE: Outer column 2, contains inner grid */
#spt-content-surface {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  grid-template-rows: 1fr !important;
  gap: 16px !important;
  background: #f6f7fb !important;
  border-radius: 16px !important;
  padding: 16px !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* MAIN CONTENT: Inner column 1 - SOAP notes here */
#main-content {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* RIGHT PANEL: Inner column 2 - AI cards only */
#right-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* WORKSPACE: Full size container */
#medora-workspace {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* WORKSPACE INNER: White SOAP card - FULL WIDTH */
#medora-workspace-inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: 1 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  border: 1px solid #e1e5f0 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
  overflow-y: auto !important;
}

/* Visibility */
#medora-workspace-inner.hidden { display: none !important; }
#medora-workspace-inner:not(.hidden) { display: block !important; }

/* SOAP sections: Full width */
#notes-section {
  width: 100% !important;
  max-width: 100% !important;
}

#notes-section .soap-section,
#notes-section .note-section {
  width: 100% !important;
  max-width: 100% !important;
}

/* =============================================================================
   MEDORA SOAP NOTES - PREMIUM UI/UX UPGRADE
   MedoraSPT Design Language - Dec 4, 2025
   ============================================================================= */

/* Global SOAP Card Header */
.soap-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  border-radius: 16px 16px 0 0;
  margin: -24px -28px 24px -28px;
}

.soap-card-header .soap-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.soap-card-header .soap-title-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
}

.soap-card-header .soap-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Primary Button - Medora Blue */
.soap-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.soap-btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.soap-btn-primary:active {
  transform: translateY(0);
}

/* Secondary/Ghost Button */
.soap-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: #64748b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.soap-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

/* Section Container - Premium Card Style */
#notes-section .soap-section.note-section,
.soap-section-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

#notes-section .soap-section.note-section:hover,
.soap-section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Section Header Row */
.soap-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.soap-section-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.soap-section-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Small Pill Buttons for Section Actions */
.soap-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  height: 28px;
}

.soap-action-btn.btn-copy {
  background: transparent;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.soap-action-btn.btn-copy:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.soap-action-btn.btn-edit {
  background: transparent;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.soap-action-btn.btn-edit:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.soap-action-btn.btn-ai {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(139, 92, 246, 0.3);
}

.soap-action-btn.btn-ai:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
}

/* Section Content Area */
.soap-section-content {
  padding: 20px;
}

/* Hide old h3 and action buttons - they'll be replaced */
#notes-section .soap-section.note-section > h3 {
  display: none !important;
}

#notes-section .soap-section.note-section > .action-buttons.note-actions {
  display: none !important;
}

/* Content Typography */
#notes-section .soap-section .content,
.soap-section-content .content,
#assessment-content,
#subjective-content,
#objective-content,
#plan-content-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 14px;
  line-height: 1.7;
  color: #1e293b;
}

/* Sub-headings within content */
.soap-content-subhead {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin: 16px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.soap-content-subhead:first-child {
  margin-top: 0;
}

/* Plan section bullet styling */
#plan-content-container ul,
.soap-section-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#plan-content-container li,
.soap-section-content li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  line-height: 1.6;
}

#plan-content-container li::before,
.soap-section-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #3b82f6;
  border-radius: 50%;
}

/* Bottom Actions Bar (Copy All, Push to EMR) */
.soap-bottom-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 0 0;
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
}

/* Hide old bottom buttons styling, restyle them */
#notes-section > div:last-child {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 20px 0 0 0;
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
}

#copy-soap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

#copy-soap-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

#push-to-emr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

#push-to-emr-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

/* Quality Banner Styling */
#quality-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  color: #92400e;
}

#quality-banner.quality-pass {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border-color: #6ee7b7;
  color: #065f46;
}

/* View Transcript Link */
#view-transcript-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #3b82f6 !important;
  text-decoration: none !important;
  padding: 8px 16px;
  background: #eff6ff;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#view-transcript-btn:hover {
  background: #dbeafe;
  color: #2563eb !important;
}

/* Transcript Section Styling */
#transcript-section {
  margin-bottom: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .soap-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .soap-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .soap-section-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =============================================================================
   MEDICAL INSIGHTS / HEALTHSCRIBE CONTAINER - PREMIUM STYLING
   Enhances the JS-generated SOAP table display
   ============================================================================= */

/* Main container */
.healthscribe-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
  padding: 24px !important;
  margin: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* Medical Insights Header */
.healthscribe-container > h3:first-of-type,
.healthscribe-container > div:first-child {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  letter-spacing: -0.01em !important;
}

/* SOAP Table */
.healthscribe-container table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.9375rem !important;
}

/* Table rows - card-like sections */
.healthscribe-container table tbody tr {
  display: block !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.healthscribe-container table tbody tr:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  border-color: #cbd5e1 !important;
}

/* Section header cell (first column - Subjective, Objective, etc.) */
.healthscribe-container table tbody tr td:first-child {
  display: block !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  padding: 12px 16px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: none !important;
}

/* Content cell (second column - the actual content) */
.healthscribe-container table tbody tr td:last-child {
  display: block !important;
  background: #ffffff !important;
  padding: 16px 20px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: #1e293b !important;
  border: none !important;
}

/* Sub-section labels within content (CHIEF COMPLAINT:, HISTORY OF PRESENT ILLNESS:, etc.) */
.healthscribe-container table tbody tr td:last-child strong,
.healthscribe-container table tbody tr td:last-child b {
  display: block !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  margin: 16px 0 6px 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.healthscribe-container table tbody tr td:last-child strong:first-child,
.healthscribe-container table tbody tr td:last-child b:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Lists in content */
.healthscribe-container table tbody tr td:last-child ul,
.healthscribe-container table tbody tr td:last-child ol {
  margin: 8px 0 !important;
  padding-left: 20px !important;
}

.healthscribe-container table tbody tr td:last-child li {
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

/* Bullet points - use blue dots */
.healthscribe-container table tbody tr td:last-child ul li::marker {
  color: #3b82f6 !important;
}

/* Special styling for Plan section - make bullets stand out */
.healthscribe-container table tbody tr td:last-child ul li {
  position: relative !important;
}

/* Assessment numbered items */
.healthscribe-container table tbody tr td:last-child ol li {
  padding-left: 4px !important;
}

/* Patient Instructions section - slightly different styling */
.healthscribe-container table tbody tr[data-section="patient-instructions"] td:last-child,
.healthscribe-container table tbody tr:has(td:first-child:contains("Patient Instructions")) td:last-child {
  background: #f0fdf4 !important;
  border-left: 3px solid #22c55e !important;
}

/* Hide the old SOAP card header we added since JS creates its own display */
.soap-card-header {
  display: none !important;
}

/* Keep the section styling but hide old headers since table is used */
#notes-section .soap-section.note-section > .soap-section-header {
  display: none !important;
}

#notes-section .soap-section.note-section > .soap-section-content {
  padding: 0 !important;
}

/* Show original h3 and action buttons since we're enhancing table display instead */
#notes-section .soap-section.note-section > h3 {
  display: block !important;
}

#notes-section .soap-section.note-section > .action-buttons.note-actions {
  display: flex !important;
}

/* =============================================================================
   SPT ENTERPRISE BUTTONS - Premium Button Styling
   ============================================================================= */

/* View Complete Transcript Button */
#view-transcript-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #475569 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#view-transcript-btn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Copy All SOAP Notes Button */
#copy-soap-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

#copy-soap-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px) !important;
}

#copy-soap-btn:active {
  transform: translateY(0) !important;
}

/* Push to EMR Button */
#push-to-emr-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

#push-to-emr-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Bottom Actions Container */
.soap-bottom-actions,
#notes-section > div:last-of-type {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 0 0 0 !important;
  margin-top: 16px !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* =============================================================================
   TRANSCRIPT MODAL - Premium Enterprise Styling
   ============================================================================= */

.transcript-modal-overlay {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

.transcript-modal-overlay > div {
  background: #ffffff !important;
  border-radius: 20px !important;
  max-width: 800px !important;
  width: 90% !important;
  max-height: 85vh !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #e2e8f0 !important;
}

/* Modal Header */
.transcript-modal-overlay > div > div:first-child {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 20px 20px 0 0 !important;
}

.transcript-modal-overlay > div > div:first-child h3,
.transcript-modal-overlay #modal-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* Modal Close Button */
.transcript-modal-overlay .close-modal {
  width: 36px !important;
  height: 36px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.transcript-modal-overlay .close-modal:hover {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

/* Modal Body */
.transcript-modal-overlay > div > div:last-child {
  padding: 24px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  overflow-y: auto !important;
}

/* =============================================================================
   SPEAKER SEGMENTS - Softer Enterprise Colors
   ============================================================================= */

/* Clinician/Doctor segments - Soft Blue */
.doctor-speech,
.clinician-segment,
[class*="clinician"] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-left: 3px solid #0ea5e9 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 10px 0 !important;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.08) !important;
}

.doctor-header,
.clinician-header {
  color: #0369a1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.doctor-header::before,
.clinician-header::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  background: #0ea5e9 !important;
  border-radius: 50% !important;
}

.doctor-text,
.clinician-text {
  color: #0c4a6e !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
}

/* Patient segments - Soft Purple/Lavender */
.patient-speech,
.patient-segment,
[class*="patient-speech"] {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
  border-left: 3px solid #a855f7 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 10px 0 !important;
  box-shadow: 0 1px 3px rgba(168, 85, 247, 0.08) !important;
}

.patient-header {
  color: #7c3aed !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.patient-header::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  background: #a855f7 !important;
  border-radius: 50% !important;
}

.patient-text {
  color: #581c87 !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
}

/* Translation blocks - Soft Amber */
.translation-block {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border: 1px dashed #f59e0b !important;
  border-left: 3px solid #f59e0b !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 8px 0 8px 20px !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08) !important;
}

.translation-header {
  color: #b45309 !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.translation-text {
  color: #92400e !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  border-left: 2px solid #fbbf24 !important;
  padding-left: 12px !important;
}

/* Timestamp styling */
.timestamp {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  background: rgba(248, 250, 252, 0.8) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}

/* Transcript container in modal */
.transcript-container {
  background: #f8fafc !important;
  border-radius: 12px !important;
  padding: 20px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* Transcript entry spacing */
.transcript-entry {
  margin-bottom: 12px !important;
}

/* Speaker labels in transcript */
.speaker-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* =============================================================================
   SPT UNIFIED BUTTON SYSTEM - Consistent Enterprise Buttons
   ============================================================================= */

/* Base button reset for all page buttons */
#back-to-patient-list-btn,
#start-visit-btn,
#view-transcript-btn,
#copy-soap-btn,
#push-to-emr-btn,
#search-ims-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Sidebar buttons - pill radius, separate from other buttons */
.ims-sync-btn,
.add-patient-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Back to Patient List - Secondary/Outline Style */
#back-to-patient-list-btn {
  padding: 10px 20px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 0.875rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#back-to-patient-list-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Start Visit & Recording - Primary Action (Blue Gradient) */
#start-visit-btn {
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

#start-visit-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45) !important;
  transform: translateY(-2px) !important;
}

#start-visit-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* View Complete Transcript - Text/Link Style */
#view-transcript-btn {
  padding: 8px 16px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #2563eb !important;
  font-size: 0.875rem !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1) !important;
}

#view-transcript-btn:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Copy All SOAP Notes - Primary Blue */
#copy-soap-btn {
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

#copy-soap-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Push to EMR - Success Green */
#push-to-emr-btn {
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

#push-to-emr-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* IMS Sync Button - Primary Blue (MedoraSPT) */
.ims-sync-btn {
  padding: 0 16px !important;
  height: 44px !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.55) !important;
}

.ims-sync-btn:hover {
  background: #2563eb !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.65) !important;
  transform: none !important;
}

/* Add Patient Button - Secondary Dark Navy (MedoraSPT) */
.add-patient-btn {
  padding: 0 16px !important;
  height: 44px !important;
  background: #0f172a !important;
  color: #e5e7eb !important;
  font-size: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.5) !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
}

.add-patient-btn:hover {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
  transform: none !important;
}

/* Search IMS Patients Button */
#search-ims-btn {
  padding: 8px 16px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 0.8125rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#search-ims-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Quality Banner Actions - Smaller secondary buttons */
.quality-banner-btn {
  padding: 6px 12px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.quality-banner-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Patient List Item Actions */
.patient-item-btn {
  padding: 6px 12px !important;
  background: transparent !important;
  color: #64748b !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.patient-item-btn:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

/* =============================================================================
   MEDORA SPT PREMIUM BUTTONS - Medical-Grade Action Buttons
   Matches Medora Login and MedoraSPT visual system
   ============================================================================= */

/* Container for SOAP action buttons */
.soap-bottom-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 24px 0 0 0 !important;
  margin-top: 16px !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Push status indicator */
.soap-bottom-actions #push-status {
  display: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}

/* =============================================================================
   MEDORA SPT BUTTON SYSTEM - Matching login-style.css
   Enterprise clinical buttons with consistent styling
   ============================================================================= */

/* Base Medora SPT Button */
.medora-spt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
}

/* SVG Icon styling inside buttons */
.medora-spt-btn svg {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

/* Button text */
.medora-spt-btn span {
  position: relative !important;
  z-index: 1 !important;
}

/* Primary Button - Solid Medora Blue (matching login) */
.medora-spt-btn-primary {
  background: #3B82F6 !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
}

.medora-spt-btn-primary:hover {
  background: #2563EB !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px) !important;
}

.medora-spt-btn-primary:active {
  transform: translateY(0) !important;
}

/* Success Button - Clinical Green */
.medora-spt-btn-success {
  background: #10B981 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.medora-spt-btn-success:hover {
  background: #059669 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}

.medora-spt-btn-success:active {
  transform: translateY(0) !important;
}

/* Secondary Button - White with border (matching login nav-btn) */
.medora-spt-btn-secondary {
  background: #FFFFFF !important;
  border: 1px solid #E1E5F0 !important;
  color: #64748B !important;
  box-shadow: none !important;
}

.medora-spt-btn-secondary:hover {
  border-color: #3B82F6 !important;
  color: #3B82F6 !important;
  background: rgba(59, 130, 246, 0.04) !important;
}

/* Focus states for accessibility */
.medora-spt-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.medora-spt-btn-success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

/* Disabled state */
.medora-spt-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Loading state */
.medora-spt-btn.loading {
  pointer-events: none !important;
  opacity: 0.7 !important;
}

.medora-spt-btn.loading::after {
  content: '' !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: medora-btn-spin 0.8s linear infinite !important;
  margin-left: 8px !important;
}

@keyframes medora-btn-spin {
  to { transform: rotate(360deg); }
}

/* Responsive adjustments for large monitors */
@media (min-width: 1440px) {
  .soap-bottom-actions {
    gap: 20px !important;
    padding: 28px 0 0 0 !important;
  }

  .medora-spt-btn {
    min-height: 52px !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }

  .medora-spt-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Ensure buttons are same width for visual balance */
@media (min-width: 768px) {
  .medora-spt-btn {
    min-width: 180px !important;
  }
}

/* =============================================================================
   MEDORA SPT PREMIUM - Recording Controls & Transcript Elements
   Medical-grade UI matching Epic/Athena enterprise aesthetic
   ============================================================================= */

/* View Complete Transcript Link Button */
.medora-spt-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 20px !important;
  background: #F8FAFC !important;
  color: #3B82F6 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.medora-spt-link-btn:hover {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border-color: #BFDBFE !important;
  color: #2563EB !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-1px) !important;
}

.medora-spt-link-btn:active {
  transform: translateY(0) !important;
}

.medora-spt-link-btn svg {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Live Preview Box - Medora SPT Premium */
.medora-spt-preview {
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.medora-spt-preview.active {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
  border-color: #86EFAC !important;
  color: #166534 !important;
}

.medora-spt-preview.active svg {
  stroke: #16A34A !important;
  animation: medora-pulse 1.5s ease-in-out infinite !important;
}

@keyframes medora-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Medical Streaming Controls Container - Premium Style */
#medical-streaming-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  margin: 16px 0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* Status Indicator - Premium Style */
#medical-status {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  min-width: 140px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

#medical-status.disconnected {
  background: #FEF2F2 !important;
  color: #991B1B !important;
  border: 1px solid #FECACA !important;
}

#medical-status.connected,
#medical-status.recording {
  background: #F0FDF4 !important;
  color: #166534 !important;
  border: 1px solid #86EFAC !important;
}

/* Clinical Green Button (Start Visit) */
.medora-spt-btn-clinical {
  background: linear-gradient(135deg, #16A34A 0%, #4ADE80 100%) !important;
  box-shadow:
    0 6px 20px rgba(22, 163, 74, 0.35),
    0 2px 4px rgba(22, 163, 74, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.medora-spt-btn-clinical:hover {
  background: linear-gradient(135deg, #15803D 0%, #16A34A 100%) !important;
  box-shadow:
    0 8px 28px rgba(22, 163, 74, 0.45),
    0 4px 8px rgba(22, 163, 74, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Danger Red Button (End Visit) */
.medora-spt-btn-danger {
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important;
  box-shadow:
    0 6px 20px rgba(220, 38, 38, 0.35),
    0 2px 4px rgba(220, 38, 38, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.medora-spt-btn-danger:hover {
  background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%) !important;
  box-shadow:
    0 8px 28px rgba(220, 38, 38, 0.45),
    0 4px 8px rgba(220, 38, 38, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* AWS Action Buttons Container - Premium Alignment */
.aws-action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 16px 0 !important;
}

/* =============================================================================
   MEDORA SPT CARDS - Right Panel AI Cards
   Simple clinical cards with left accent border - MedoraSPT style
   ============================================================================= */

/* Base Card Container - Simple Clinical Design */
.medora-spt-card {
  position: relative !important;
  background: #FFFFFF !important;
  border: 1px solid #E1E5F0 !important;
  border-left: 3px solid #3B82F6 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

.medora-spt-card:hover {
  border-color: #CBD5E1 !important;
  border-left-color: #2563EB !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Hide the accent line element - using border-left instead */
.medora-spt-card-accent {
  display: none !important;
}

/* Card Header - Horizontal row with icon and title */
.medora-spt-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

/* Card Icon Container - Small inline icon */
.medora-spt-card-icon {
  display: none !important;
}

/* Card Title - Left aligned, semibold */
.medora-spt-card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

/* Card Body */
.medora-spt-card-body {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

/* Card Subtitle - Hidden */
.medora-spt-card-subtitle {
  display: none !important;
}

/* Card Description - Clinical muted text */
.medora-spt-card-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6B7280 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Override old inline styles on right-panel cards */
#right-panel .ai-insights-collapsed,
#right-panel .allergeniq-section,
#right-panel .references-section,
#right-panel .insights-section {
  background: #FFFFFF !important;
  border: 1px solid #E1E5F0 !important;
  border-left: 3px solid #3B82F6 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  padding: 16px 18px !important;
  margin: 0 !important;
}

/* Remove nested container styling */
#right-panel .medora-spt-card > div:not(.medora-spt-card-accent):not(.medora-spt-card-header):not(.medora-spt-card-body) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Override old header styles */
#right-panel .medora-spt-card h3 {
  color: #0F172A !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
}

/* Stats Row for Active Patient State */
.medora-spt-card .stats-row {
  display: flex !important;
  gap: 16px !important;
  margin: 12px 0 !important;
  padding: 10px 12px !important;
  background: #F8FAFC !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  justify-content: flex-start !important;
}

.medora-spt-card .stat-item {
  text-align: center !important;
  flex: 0 1 auto !important;
  min-width: 50px !important;
}

.medora-spt-card .stat-value {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 2px !important;
}

.medora-spt-card .stat-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Status Badge */
.medora-spt-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  background: #DBEAFE !important;
  color: #1E40AF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: 4px !important;
}

.medora-spt-badge.active {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

/* Info Box inside card */
.medora-spt-card .info-box {
  padding: 10px 12px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
  margin-top: 10px !important;
  text-align: left !important;
}

.medora-spt-card .info-box p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #475569 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.4 !important;
}

.medora-spt-card .info-box p:last-child {
  margin-bottom: 0 !important;
}

.medora-spt-card .info-box strong {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* Right Panel Container */
#right-panel {
  padding: 0 !important;
  align-items: stretch !important;
}

#right-panel > div,
#right-panel .tab-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Tab Content - Stack cards */
#right-panel .tab-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#right-panel .tab-content.active {
  display: flex !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .medora-spt-card {
    padding: 14px 16px !important;
  }

  .medora-spt-card-title {
    font-size: 14px !important;
  }

  .medora-spt-card-desc {
    font-size: 12px !important;
  }
}