/* Биолаборатория - Кастомные стили */

/* Табы навигации */
.tab-btn {
  @apply px-6 py-4 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:text-gray-800 hover:border-gray-300 transition-all duration-200 flex items-center whitespace-nowrap;
}

.tab-btn.active {
  @apply text-green-600 border-green-500 bg-green-50;
}

/* Карточки экосистем */
.ecosystem-card {
  @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-gray-200 hover:border-green-400 overflow-hidden;
}

.ecosystem-card.selected {
  @apply border-green-500 bg-green-50 shadow-lg;
}

.ecosystem-card img {
  @apply w-full h-48 object-cover;
}

/* Интерактивные элементы симуляции */
.sample-point {
  @apply w-4 h-4 rounded-full cursor-pointer transition-all duration-200 transform hover:scale-125;
}

.sample-point.unused {
  @apply bg-blue-400 border-2 border-blue-600;
}

.sample-point.used {
  @apply bg-green-500 border-2 border-green-700;
}

.sample-point.selected {
  @apply bg-yellow-400 border-2 border-yellow-600 animate-pulse;
}

/* Статистические результаты */
.stat-result {
  @apply bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 mb-4;
}

.stat-formula {
  @apply bg-gray-100 border border-gray-300 rounded-lg p-3 font-mono text-sm overflow-x-auto;
}

/* Протокол лабораторной работы */
.protocol-section {
  @apply bg-white border border-gray-300 rounded-lg p-6 mb-6 shadow-sm;
}

.protocol-field {
  @apply w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500;
}

/* Анимации */
@keyframes pulse-green {
  0%, 100% { background-color: #10b981; }
  50% { background-color: #34d399; }
}

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

/* Кнопки действий */
.action-btn {
  @apply px-6 py-3 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-4;
}

.action-btn-primary {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-300;
}

.action-btn-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-200;
}

.action-btn-success {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-300;
}

/* Информационные блоки */
.info-box {
  @apply bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4;
}

.warning-box {
  @apply bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4;
}

.success-box {
  @apply bg-green-50 border border-green-200 rounded-lg p-4 mb-4;
}

/* Прогресс-бар */
.progress-container {
  @apply w-full bg-gray-200 rounded-full h-3;
}

.progress-bar {
  @apply bg-green-500 h-3 rounded-full transition-all duration-500;
}

/* Адаптивность */
@media (max-width: 768px) {
  .tab-btn {
    @apply px-3 py-2 text-xs;
  }
  
  .ecosystem-card {
    @apply mx-2;
  }
  
  .protocol-section {
    @apply p-4;
  }
}

/* Специальные эффекты */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.data-visualization {
  @apply bg-white border border-gray-300 rounded-lg p-4 shadow-sm;
}

/* Формулы и математические выражения */
.math-expression {
  @apply text-center py-4 text-lg;
}

/* Результаты тестов */
.test-result-significant {
  @apply border-l-4 border-green-500 bg-green-50 p-4 rounded-r-lg;
}

.test-result-nonsignificant {
  @apply border-l-4 border-gray-400 bg-gray-50 p-4 rounded-r-lg;
}

/* Индикаторы загрузки */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-green-500;
}

/* Модальные окна */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

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