/* Custom styles for Biology Virtual Lab */

/* Tab styles */
.tab-button {
    @apply px-6 py-3 mx-1 mb-2 text-gray-600 bg-white rounded-t-lg border-b-2 border-transparent transition-all duration-200 hover:bg-gray-50 hover:text-gray-800;
}

.tab-button.active {
    @apply text-blue-600 bg-blue-50 border-blue-600 font-semibold;
}

/* Section styles */
.section {
    @apply hidden;
}

.section.active {
    @apply block;
}

/* Tissue card styles */
.tissue-card {
    @apply bg-white rounded-lg shadow-lg cursor-pointer transform transition-all duration-200 hover:shadow-xl hover:-translate-y-1 border border-gray-200;
}

.tissue-card:hover {
    @apply scale-105;
}

.tissue-image img {
    @apply transition-transform duration-200;
}

.tissue-card:hover .tissue-image img {
    @apply scale-110;
}

/* Breathing animation styles */
#breathing-animation-rest, #breathing-animation-exercise {
    @apply transition-transform duration-500 ease-in-out;
}

/* Chart container styles */
#results-chart {
    @apply max-w-full;
}

/* Modal styles */
#tissue-modal {
    @apply backdrop-blur-sm;
}

/* Form styles */
input[type="number"], input[type="text"], input[type="date"], select, textarea {
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

/* Button hover effects */
button {
    @apply transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

button:hover {
    @apply transform -translate-y-0.5;
}

/* Protocol table styles */
table {
    @apply text-sm;
}

table td input {
    @apply w-full px-2 py-1 text-center border-0 focus:ring-1 focus:ring-blue-400;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    .tab-button, .tissue-card {
        @apply break-inside-avoid;
    }
    
    #protocol {
        @apply break-inside-avoid;
    }
    
    .shadow-lg {
        @apply shadow-none border border-gray-300;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tab-button {
        @apply px-3 py-2 text-sm;
    }
    
    .tissue-card {
        @apply mb-4;
    }
    
    .grid {
        @apply grid-cols-1;
    }
}

/* Custom animations */
@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.breathing-indicator {
    animation: pulse-soft 2s infinite;
}

/* Tissue type color coding */
.plant-tissue {
    @apply border-l-4 border-green-500;
}

.animal-tissue {
    @apply border-l-4 border-blue-500;
}

/* Status indicators */
.status-normal {
    @apply text-green-600 bg-green-100 px-2 py-1 rounded-full text-xs font-medium;
}

.status-warning {
    @apply text-yellow-600 bg-yellow-100 px-2 py-1 rounded-full text-xs font-medium;
}

.status-danger {
    @apply text-red-600 bg-red-100 px-2 py-1 rounded-full text-xs font-medium;
}

/* Interactive elements */
.interactive-element {
    @apply cursor-pointer transition-all duration-200 hover:bg-gray-50 active:bg-gray-100;
}

/* Results highlight */
.result-highlight {
    @apply bg-yellow-100 border-l-4 border-yellow-500 p-3 rounded-r;
}

/* Loading animation */
.loading-spinner {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

/* Gradient backgrounds */
.gradient-plant {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.gradient-animal {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.gradient-experiment {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-600;
}