/* Custom CSS for Skull Base Surgery Medical Database */

/* Custom color scheme for medical application */
:root {\n  --primary-blue: #1E3A8A;\n  --secondary-blue: #3B82F6;\n  --accent-green: #10B981;\n  --accent-orange: #F59E0B;\n  --accent-purple: #8B5CF6;\n  --background-gray: #F8FAFC;\n  --text-dark: #1F2937;\n  --text-light: #6B7280;\n  --border-light: #E5E7EB;\n  --success-green: #22C55E;\n  --warning-yellow: #EAB308;\n  --error-red: #EF4444;\n}\n\n/* Base styles */\nbody {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background-color: var(--background-gray);\n  color: var(--text-dark);\n}\n\n/* Medical-themed gradients */\n.medical-gradient {\n  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);\n}\n\n.medical-gradient-light {\n  background: linear-gradient(135deg, #EBF4FF 0%, #DBEAFE 100%);\n}\n\n/* Custom button styles */\n.btn-primary {\n  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;\n}\n\n.btn-secondary {\n  @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors duration-200;\n}\n\n.btn-success {\n  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;\n}\n\n.btn-warning {\n  @apply bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;\n}\n\n.btn-danger {\n  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;\n}\n\n/* Card styles for medical data */\n.medical-card {\n  @apply bg-white rounded-xl shadow-md border border-gray-200 p-6 hover:shadow-lg transition-shadow duration-200;\n}\n\n.medical-card-header {\n  @apply border-b border-gray-200 pb-4 mb-4;\n}\n\n/* Form styles */\n.form-group {\n  @apply mb-4;\n}\n\n.form-label {\n  @apply block text-sm font-medium text-gray-700 mb-1;\n}\n\n.form-input {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;\n}\n\n.form-select {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white;\n}\n\n.form-textarea {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-vertical;\n}\n\n.form-error {\n  @apply text-red-600 text-sm mt-1;\n}\n\n.form-help {\n  @apply text-gray-500 text-sm mt-1;\n}\n\n/* Chatbot styles */\n.chat-container {\n  @apply bg-white rounded-lg shadow-lg border border-gray-200 h-96 flex flex-col;\n}\n\n.chat-header {\n  @apply bg-blue-600 text-white p-4 rounded-t-lg flex items-center justify-between;\n}\n\n.chat-messages {\n  @apply flex-1 p-4 overflow-y-auto space-y-3;\n}\n\n.chat-message {\n  @apply max-w-xs rounded-lg px-3 py-2;\n}\n\n.chat-message.user {\n  @apply bg-blue-100 text-blue-900 ml-auto;\n}\n\n.chat-message.assistant {\n  @apply bg-gray-100 text-gray-900;\n}\n\n.chat-input {\n  @apply border-t border-gray-200 p-4 flex gap-2;\n}\n\n.chat-input input {\n  @apply flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;\n}\n\n/* Voice recording styles */\n.voice-recorder {\n  @apply relative;\n}\n\n.voice-button {\n  @apply w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200;\n}\n\n.voice-button.recording {\n  @apply bg-red-500 text-white animate-pulse;\n}\n\n.voice-button.idle {\n  @apply bg-gray-200 text-gray-600 hover:bg-gray-300;\n}\n\n/* Image upload and preview styles */\n.image-upload-zone {\n  @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors duration-200;\n}\n\n.image-upload-zone.dragover {\n  @apply border-blue-500 bg-blue-50;\n}\n\n.image-preview {\n  @apply relative overflow-hidden rounded-lg;\n}\n\n.image-preview img {\n  @apply w-full h-auto max-h-64 object-cover;\n}\n\n.image-gallery {\n  @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;\n}\n\n/* Medical data visualization */\n.metric-card {\n  @apply bg-white p-4 rounded-lg shadow border border-gray-200;\n}\n\n.metric-value {\n  @apply text-2xl font-bold;\n}\n\n.metric-label {\n  @apply text-sm text-gray-600 uppercase tracking-wide;\n}\n\n.metric-trend {\n  @apply text-sm font-medium;\n}\n\n.metric-trend.up {\n  @apply text-green-600;\n}\n\n.metric-trend.down {\n  @apply text-red-600;\n}\n\n.metric-trend.stable {\n  @apply text-gray-600;\n}\n\n/* Progress indicators */\n.progress-bar {\n  @apply w-full bg-gray-200 rounded-full h-2;\n}\n\n.progress-fill {\n  @apply bg-blue-600 h-2 rounded-full transition-all duration-300;\n}\n\n/* Medical severity scales */\n.pain-scale {\n  @apply flex space-x-2;\n}\n\n.pain-level {\n  @apply w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center text-sm cursor-pointer transition-colors duration-200;\n}\n\n.pain-level.selected {\n  @apply border-red-500 bg-red-100 text-red-700;\n}\n\n.pain-level:hover {\n  @apply border-red-400 bg-red-50;\n}\n\n/* Functional scale colors */\n.functional-excellent { @apply text-green-600 bg-green-100; }\n.functional-good { @apply text-blue-600 bg-blue-100; }\n.functional-fair { @apply text-yellow-600 bg-yellow-100; }\n.functional-poor { @apply text-red-600 bg-red-100; }\n\n/* Data table styles */\n.data-table {\n  @apply min-w-full bg-white rounded-lg overflow-hidden shadow;\n}\n\n.data-table th {\n  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;\n}\n\n.data-table td {\n  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;\n}\n\n.data-table tbody tr:hover {\n  @apply bg-gray-50;\n}\n\n/* Status indicators */\n.status-badge {\n  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;\n}\n\n.status-active { @apply bg-green-100 text-green-800; }\n.status-pending { @apply bg-yellow-100 text-yellow-800; }\n.status-completed { @apply bg-blue-100 text-blue-800; }\n.status-error { @apply bg-red-100 text-red-800; }\n.status-inactive { @apply bg-gray-100 text-gray-800; }\n\n/* Loading animations */\n.loading-spinner {\n  @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;\n}\n\n.loading-pulse {\n  @apply animate-pulse bg-gray-200 rounded;\n}\n\n/* Responsive utilities */\n@media (max-width: 640px) {\n  .chat-container {\n    @apply h-80;\n  }\n  \n  .medical-card {\n    @apply p-4;\n  }\n  \n  .image-gallery {\n    @apply grid-cols-1;\n  }\n}\n\n/* Print styles for medical reports */\n@media print {\n  body {\n    @apply text-black bg-white;\n  }\n  \n  .no-print {\n    display: none !important;\n  }\n  \n  .medical-card {\n    @apply shadow-none border border-gray-400;\n  }\n}\n\n/* Accessibility improvements */\n.sr-only {\n  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;\n}\n\n/* Focus styles for keyboard navigation */\n.focus\\:ring-medical:focus {\n  @apply ring-2 ring-blue-500 ring-opacity-50 outline-none;\n}\n\n/* Custom scrollbar for chat */\n.chat-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-messages::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.chat-messages::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 3px;\n}\n\n.chat-messages::-webkit-scrollbar-thumb:hover {\n  background: #a1a1a1;\n}\n\n/* Animations for medical data updates */\n@keyframes pulse-green {\n  0%, 100% { background-color: rgb(34, 197, 94); }\n  50% { background-color: rgb(22, 163, 74); }\n}\n\n@keyframes pulse-red {\n  0%, 100% { background-color: rgb(239, 68, 68); }\n  50% { background-color: rgb(220, 38, 38); }\n}\n\n.animate-pulse-green {\n  animation: pulse-green 2s infinite;\n}\n\n.animate-pulse-red {\n  animation: pulse-red 2s infinite;\n}\n\n/* Medical form sections */\n.form-section {\n  @apply mb-8 p-6 bg-white rounded-lg shadow border border-gray-200;\n}\n\n.form-section-title {\n  @apply text-lg font-semibold text-gray-900 mb-4 border-b border-gray-200 pb-2;\n}\n\n/* Complication indicator styles */\n.complication-low { @apply bg-green-100 text-green-800; }\n.complication-medium { @apply bg-yellow-100 text-yellow-800; }\n.complication-high { @apply bg-red-100 text-red-800; }\n\n/* Medical image viewer styles */\n.image-viewer {\n  @apply relative bg-black rounded-lg overflow-hidden;\n}\n\n.image-viewer img {\n  @apply w-full h-auto max-h-96 object-contain;\n}\n\n.image-controls {\n  @apply absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 bg-black bg-opacity-50 rounded-lg p-2;\n}\n\n.image-control-btn {\n  @apply text-white hover:text-blue-400 p-2 rounded transition-colors duration-200;\n}"