/* Modern Healthcare UI - MedFlow Platform */

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Enhanced Input Fields */
.input-field {
    @apply block w-full px-4 py-3 text-gray-700 bg-white border border-gray-300 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none transition-all duration-200;
}

.input-field:focus {
    @apply shadow-lg transform scale-[1.02];
}

/* Modern Buttons */
.btn-primary {
    @apply px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 hover:shadow-lg;
}

.btn-secondary {
    @apply px-6 py-3 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 transition-all duration-200;
}

/* Modern Modal Buttons */
.btn-primary-modern {
    @apply px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 hover:shadow-lg flex items-center;
}

.btn-secondary-modern {
    @apply px-6 py-3 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 transition-all duration-200 flex items-center;
}

/* Modern Input Fields */
.input-field-modern {
    @apply block w-full px-4 py-3 text-gray-700 bg-white border border-gray-300 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none transition-all duration-200 shadow-sm;
}

.input-field-modern:focus {
    @apply shadow-lg transform scale-[1.02] border-blue-500;
}

.input-field-modern:hover {
    @apply border-gray-400;
}

/* Step Indicators */
.step-indicator {
    @apply w-8 h-8 rounded-full border-2 border-white/50 flex items-center justify-center transition-all duration-300;
}

.step-indicator.active {
    @apply bg-white border-white shadow-lg;
}

.step-indicator.completed {
    @apply bg-white border-white shadow-lg;
}

.step-number {
    @apply text-sm font-semibold text-blue-600;
}

.step-indicator.active .step-number {
    @apply text-blue-600;
}

.step-indicator.completed .step-number {
    @apply text-green-600;
}

.step-label {
    @apply text-white/80 transition-all duration-300;
}

.step-indicator.active + .step-label,
.step-indicator.completed + .step-label {
    @apply text-white font-medium;
}

/* Progress Bar */
.progress-bar {
    @apply transition-all duration-500 ease-out;
}

/* Step Content */
.step-content {
    @apply transition-all duration-300 ease-out;
}

.step-content.active {
    @apply opacity-100 transform translate-x-0;
}

.step-content.hidden {
    @apply opacity-0 transform translate-x-4 pointer-events-none;
}

/* Time Slot Buttons */
.time-slot-btn {
    @apply px-4 py-3 text-sm font-medium text-gray-700 bg-white border-2 border-gray-200 rounded-xl hover:border-blue-500 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 cursor-pointer;
}

.time-slot-btn.selected {
    @apply border-blue-500 text-blue-700 bg-blue-50 shadow-md;
}

.time-slot-btn.disabled {
    @apply text-gray-400 bg-gray-100 border-gray-200 cursor-not-allowed;
}

/* Modal Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-slide-in {
    animation: modalSlideIn 0.3s ease-out;
}

/* Modal Responsive Styles */
@media (max-width: 640px) {
    #create-consultation-modal {
        padding: 0.5rem;
    }
    
    #modal-content {
        max-height: 98vh;
        border-radius: 1rem;
    }
    
    .step-content {
        padding: 0.5rem 0;
    }
    
    .step-content .space-y-6 {
        gap: 1rem;
    }
    
    .step-content .space-y-4 {
        gap: 0.75rem;
    }
    
    .step-content .space-y-2 {
        gap: 0.5rem;
    }
}

/* Consultation Summary */
.consultation-summary-item {
    @apply flex items-center justify-between py-2 border-b border-blue-100 last:border-b-0;
}

.consultation-summary-label {
    @apply text-blue-800 font-medium;
}

.consultation-summary-value {
    @apply text-blue-600;
}

/* Card Components */
.card {
    @apply bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-[1.02];
}

.stat-card {
    @apply bg-white rounded-2xl p-6 shadow-sm border border-gray-100 transition-all duration-300 hover:shadow-lg hover:scale-105;
}

.chart-card {
    @apply bg-white rounded-2xl p-6 shadow-sm border border-gray-100;
    height: 340px;
    min-height: 300px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.chart-card canvas {
    width: 100% !important;
    height: 220px !important;
    max-height: 240px;
    min-height: 180px;
    display: block;
    margin: 0 auto;
}

.activity-card {
    @apply bg-white rounded-2xl p-6 shadow-sm border border-gray-100;
}

/* Navigation */
.nav-item {
    @apply flex items-center space-x-3 px-4 py-3 text-gray-600 rounded-xl hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 cursor-pointer;
}

.nav-item.active {
    @apply bg-blue-50 text-blue-700 border-r-2 border-blue-600;
}

.nav-item:hover {
    @apply transform translate-x-1;
}

/* Quick Action Buttons */
.quick-action-btn {
    @apply flex items-center space-x-3 w-full p-4 text-left text-gray-700 bg-gray-50 rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 cursor-pointer;
}

.quick-action-btn:hover {
    @apply transform translate-x-2;
}

/* Consultation Cards */
.consultation-card {
    @apply bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 cursor-pointer;
}

.consultation-card:hover {
    @apply transform translate-y-[-2px] border-blue-200;
}

/* Status Badges */
.status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
}

.status-scheduled {
    @apply bg-blue-100 text-blue-800;
}

.status-completed {
    @apply bg-green-100 text-green-800;
}

.status-cancelled {
    @apply bg-red-100 text-red-800;
}

/* Loading States */
.loading-skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.4s ease-out;
}

.animate-pulse-slow {
    animation: pulse 2s infinite;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

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

/* DDx Result Display */
#ddx-result-display {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#ddx-result-display::-webkit-scrollbar {
    width: 8px;
}

#ddx-result-display::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

#ddx-result-display::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
    border: 2px solid #f8fafc;
}

#ddx-result-display::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Responsive DDx Display */
@media (max-width: 768px) {
    #ddx-result-display {
        height: 20rem; /* h-80 = 20rem = 320px */
    }
}

/* SOAP Note Display */
#soap-note-display {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#soap-note-display::-webkit-scrollbar {
    width: 8px;
}

#soap-note-display::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

#soap-note-display::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
    border: 2px solid #f8fafc;
}

#soap-note-display::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Responsive SOAP Note Display */
@media (max-width: 768px) {
    #soap-note-display {
        height: 20rem; /* h-80 = 20rem = 320px */
    }
}

/* Modal Enhancements */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto;
}

/* Form Enhancements */
.form-group {
    @apply space-y-2;
}

.form-label {
    @apply text-sm font-medium text-gray-700;
}

.form-input {
    @apply input-field;
}

.form-select {
    @apply input-field;
}

.form-textarea {
    @apply input-field resize-none;
}

/* Data Table Styles */
.data-table {
    @apply w-full bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden;
}

.data-table th {
    @apply px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50;
}

.data-table td {
    @apply px-6 py-4 text-sm text-gray-900 border-t border-gray-100;
}

.data-table tr:hover {
    @apply bg-gray-50;
}

/* Pagination */
.pagination {
    @apply flex items-center justify-between px-6 py-4 bg-white border-t border-gray-200;
}

.pagination-btn {
    @apply px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-colors;
}

.pagination-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

/* Search and Filter */
.search-container {
    @apply relative;
}

.search-input {
    @apply input-field pl-10;
}

.filter-select {
    @apply input-field;
}

/* Notification Styles */
.notification {
    @apply fixed top-4 right-4 z-50 p-4 rounded-xl shadow-lg border-l-4 max-w-sm;
}

.notification-success {
    @apply bg-green-50 border-green-400 text-green-800;
}

.notification-error {
    @apply bg-red-50 border-red-400 text-red-800;
}

.notification-warning {
    @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.notification-info {
    @apply bg-blue-50 border-blue-400 text-blue-800;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card {
        @apply p-4;
    }

    .chart-card {
        @apply p-4;
    }

    .activity-card {
        @apply p-4;
    }

    /* Mobile Modal Adjustments */
    #create-consultation-modal {
        @apply p-2;
    }

    #modal-content {
        @apply max-w-full max-h-[98vh];
    }

    .step-content {
        @apply px-4;
    }

    .time-slot-btn {
        @apply px-3 py-2 text-xs;
    }

    #time-slots {
        @apply grid-cols-2;
    }
}

/* Dark Mode Support (Future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Indicators */
.focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Chat Styles (Enhanced) */
.chat-bubble {
    @apply px-4 py-3 rounded-2xl max-w-xs lg:max-w-md shadow-sm;
}

.chat-bubble-user {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 text-white self-end rounded-br-none;
}

.chat-bubble-assistant {
    @apply bg-gray-100 text-gray-800 self-start rounded-bl-none;
}

/* Healthcare Specific Components */
.health-metric {
    @apply flex items-center space-x-4 p-4 bg-white rounded-xl border border-gray-200;
}

.health-metric-icon {
    @apply p-3 rounded-full;
}

.health-metric-value {
    @apply text-2xl font-bold;
}

.health-metric-label {
    @apply text-sm text-gray-600;
}

/* Progress Indicators */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply h-2 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full transition-all duration-300;
}

/* Tooltips */
.tooltip {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg opacity-0 invisible transition-all duration-200;
}

.tooltip.show {
    @apply opacity-100 visible;
}

/* Loading Spinners */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

.spinner-sm {
    @apply h-4 w-4;
}

.spinner-md {
    @apply h-6 w-6;
}

.spinner-lg {
    @apply h-8 w-8;
}

/* Sidebar Enhancements */
.sidebar {
    @apply fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform transition-transform duration-300;
}

.sidebar-mobile {
    @apply -translate-x-full;
}

.sidebar-desktop {
    @apply translate-x-0;
}

/* Main Content Area */
.main-content {
    @apply lg:ml-64 transition-all duration-300;
}

/* Header Enhancements */
.header {
    @apply bg-white shadow-sm border-b border-gray-200 sticky top-0 z-40;
}

/* Data Visualization */
.chart-container {
    @apply relative p-4 bg-white rounded-2xl shadow-sm border border-gray-100;
}

.chart-title {
    @apply text-lg font-semibold text-gray-900 mb-4;
}

/* Empty States */
.empty-state {
    @apply text-center py-12;
}

.empty-state-icon {
    @apply mx-auto h-12 w-12 text-gray-400 mb-4;
}

.empty-state-title {
    @apply text-lg font-medium text-gray-900 mb-2;
}

.empty-state-description {
    @apply text-gray-600 mb-6;
}

/* Success/Error States */
.success-state {
    @apply bg-green-50 border border-green-200 rounded-xl p-4;
}

.error-state {
    @apply bg-red-50 border border-red-200 rounded-xl p-4;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

@media (max-width: 1024px) {
    .chart-card {
        height: 260px;
        min-height: 180px;
        max-height: 320px;
    }
    .chart-card canvas {
        height: 140px !important;
        max-height: 180px;
    }
}

/* Patient Summary Styles */
.summary-section {
    @apply bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-6;
}

.summary-content {
    @apply bg-white rounded-xl border border-gray-200 p-6 shadow-sm;
}

.summary-text {
    @apply text-sm text-gray-700 prose prose-sm max-w-none;
}

.summary-text strong {
    @apply text-gray-900 font-semibold;
}

.summary-text ul {
    @apply list-disc list-inside space-y-1 mt-2;
}

.summary-text li {
    @apply text-sm text-gray-700;
}

/* Edit Panel Styles */
.edit-panel {
    @apply bg-white rounded-xl border border-gray-200 p-6 shadow-sm;
}

.edit-panel label {
    @apply text-sm font-semibold text-gray-700 block mb-2;
}

.edit-panel textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-none;
}

.edit-panel input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

/* Dynamic Field Styles */
.dynamic-field {
    @apply flex items-center space-x-2;
}

.dynamic-field input {
    @apply flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

.remove-field-btn {
    @apply px-3 py-2 bg-gray-100 hover:bg-gray-200 text-red-600 hover:text-red-800 rounded-lg transition-colors duration-200;
}

.add-field-btn {
    @apply px-3 py-2 bg-blue-100 hover:bg-blue-200 text-blue-600 hover:text-blue-800 rounded-lg transition-colors duration-200;
}

/* PDF Download Button */
.pdf-download-btn {
    @apply bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold py-3 px-6 rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-green-300;
}

/* Summary Status Styles */
.summary-status {
    @apply text-sm font-medium mb-4;
}

.summary-status.success {
    @apply text-green-600;
}

.summary-status.error {
    @apply text-red-600;
}

.summary-status.loading {
    @apply text-blue-600;
}