/*
 * ROPME - ЧИСТЫЙ МИНИМАЛИСТИЧНЫЙ ДИЗАЙН
 *
 * Принципы: простота, функциональность, читаемость
 * Цветовая схема: белый, серый, синий, зеленый
 * Вдохновение: GitHub, Linear, простые business tools
 */

/* ===========================
   БАЗОВЫЕ ЦВЕТА
   =========================== */

:root {
  /* ОСНОВНЫЕ ЦВЕТА */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* АКЦЕНТНЫЕ ЦВЕТА */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-yellow-500: #f59e0b;
  --color-amber-500: #f59e0b;

  /* СЕМАНТИЧЕСКИЕ ЦВЕТА */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ТЕНИ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* РАДИУСЫ */
  --radius: 0.375rem;    /* 6px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */

  /* АНИМАЦИИ */
  --transition: all 0.15s ease-in-out;
}

/* ===========================
   БАЗОВЫЕ КОМПОНЕНТЫ
   =========================== */

/* Простые карточки */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow);
}

/* Простые кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-blue-500);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-blue-600);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-200);
}

.btn-secondary:hover {
  background: var(--color-gray-50);
}

/* Простые бейджи */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: #d1fae5;
  color: #065f46;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-error {
  background: #fee2e2;
  color: #991b1b;
}

.badge-info {
  background: #dbeafe;
  color: #1e40af;
}

/* ===========================
   TIMELINE СТИЛИ
   =========================== */

/* Базовые стили для timeline без излишеств */
.timeline-event {
  position: relative;
  transition: var(--transition);
}

.timeline-event:hover {
  transform: translateX(2px);
}

/* Простые индикаторы */
.timeline-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  transition: var(--transition);
}

.timeline-indicator:hover {
  border-color: var(--color-blue-500);
}

/* Простые карточки событий */
.timeline-event-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.timeline-event-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--color-gray-300);
}

/* Простые детали без анимаций */
.timeline-details {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.timeline-details:not(.hidden) {
  opacity: 1;
}

.timeline-details.hidden {
  opacity: 0;
  max-height: 0;
}

/* Простые вкладки */
.timeline-tabs-content [data-timeline-tab-content] {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

/* ===========================
   УТИЛИТЫ
   =========================== */

/* Убираем все премиальные классы */
.premium-card,
.premium-button,
.premium-badge,
.premium-animate-pulse,
.premium-animate-fade-in,
.premium-animate-bounce {
  /* Сбрасываем все премиальные стили */
  animation: none !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Убираем все градиенты в основном приложении, КРОМЕ кнопок и маркетинговых страниц */
/* ВАЖНО: Маркетинговые страницы используют градиенты для hero секций */
.app-layout *[class*="gradient"]:not(button):not([role="button"]):not(.marketing-gradient),
.app-layout *[style*="gradient"]:not(button):not([role="button"]):not(.marketing-gradient) {
  background: var(--color-white) !important;
}

/* Простые прогресс-бары */
.progress-bar {
  background: var(--color-gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius);
  transition: width 0.3s ease-in-out;
}

.progress-fill.blue { background: var(--color-blue-500); }
.progress-fill.green { background: var(--color-green-500); }
.progress-fill.yellow { background: var(--color-yellow-500); }
.progress-fill.purple { background: var(--color-purple-500); }

/* Индикатор выполнения на кнопках (индетерминированный прогресс) */
.btn-progress-indeterminate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.btn-progress-indeterminate::before {
  content: "";
  position: absolute;
  left: -40%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  animation: btn-progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes btn-progress-indeterminate {
  0% { transform: translateX(0); }
  100% { transform: translateX(350%); }
}

/* ===========================
   АДАПТИВНОСТЬ
   =========================== */

@media (max-width: 768px) {
  .timeline-event {
    margin-bottom: 1rem;
  }

  .timeline-indicator {
    width: 2rem;
    height: 2rem;
  }
}

/* ===========================
   СБРОС АНИМАЦИЙ
   =========================== */

/* Убираем все сложные анимации */
@keyframes none {
  0%, 100% { transform: none; opacity: 1; }
}

/* Отключаем анимации КРОМЕ спиннера (для производительности) */
*[class*="animate"]:not(.animate-spin),
*[class*="pulse"],
*[class*="bounce"] {
  animation: none !important;
}

/* Простой hover для интерактивных элементов */
button:hover,
a:hover,
[role="button"]:hover {
  transform: none;
  transition: var(--transition);
}

/* ===========================
   GRID RESPONSIVE UTILITIES (FIX для TailwindCSS v4)
   =========================== */

/* Базовые grid классы уже есть в Tailwind, добавляем responsive variants */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
}

/* ===========================
   CALLS TABLE: Brief row on hover (TailwindCSS v4 не генерирует group-hover:table-row из ERB)
   =========================== */
tbody.group .brief-row {
  display: none;
}
tbody.group:hover .brief-row {
  display: table-row;
}

/* ===========================
   DEALS/CALLS TABLE: Floating brief popover on hover (no layout shift)
   =========================== */
.brief-popover-wrap {
  position: relative;
}

.deal-brief-popover {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 40;
  width: calc((100vw - 16rem) * 0.7);
  max-width: 900px;
  pointer-events: none;
}


tr.group:hover .deal-brief-popover {
  display: block;
}

/* Для нижних строк — попап сверху */
.deal-brief-popover.popover-top {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

/* ===========================
   ФИНАЛЬНЫЕ СБРОСЫ
   =========================== */

/* Убираем все backdrop-blur и сложные эффекты в основном приложении */
/* ВАЖНО: Маркетинговые страницы используют backdrop-blur для стеклянных эффектов */
.app-layout *[class*="backdrop"],
.app-layout *[class*="blur"] {
  backdrop-filter: none !important;
  filter: none !important;
}

/* Простые тени только где нужно */
.shadow-reset {
  box-shadow: var(--shadow-sm) !important;
}

/* Убираем все transform эффекты в основном приложении кроме простых hover и спиннеров */
/* ВАЖНО: Маркетинговые страницы могут использовать transform для декоративных элементов */
.app-layout *:not(:hover):not(.animate-spin):not([class*="translate"]):not([class*="scale"]):not([class*="rotate"]) {
  transform: none !important;
}

/* ===========================
   СТИЛИ ДЛЯ ТРАНСКРИПЦИЙ
   =========================== */

/* Контейнер с прокруткой для транскрипций */
.transcription-container {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) var(--color-gray-50);
}

/* Стили скроллбара для Webkit браузеров */
.transcription-container::-webkit-scrollbar {
  width: 8px;
}

.transcription-container::-webkit-scrollbar-track {
  background: var(--color-gray-50);
  border-radius: var(--radius);
}

.transcription-container::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius);
}

.transcription-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* Стили для предложений в транскрипции */
.sentence-block {
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

.sentence-block:not(:last-child) {
  padding-bottom: 0.5rem;
}

/* Улучшаем читаемость длинных предложений */
.sentence-block:nth-child(even) {
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-gray-200);
  background: var(--color-gray-50);
  border-radius: var(--radius);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Стили для preview предложений в краткой версии */
.sentence-preview {
  line-height: 1.5;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

.sentence-preview:nth-child(odd) {
  padding-left: 0.5rem;
  border-left: 1px solid var(--color-gray-300);
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
  .transcription-container {
    max-height: 300px !important;
  }

  .sentence-block:nth-child(even) {
    padding-left: 0.5rem;
  }
}

/* ===========================
   LLM CHAT FULLSCREEN MODE
   =========================== */

/* Fullscreen режим для чата */
.fullscreen-chat {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  transform: translateX(0) !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Header на всю ширину */
.fullscreen-chat > div:first-child {
  width: 100% !important;
  max-width: none !important;
}

/* Messages container и Footer - центрируем с max-width для читаемости */
.fullscreen-chat > div:not(:first-child) {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 56rem !important; /* max-w-4xl для читаемости */
  width: 100% !important;
}

/* Backdrop для fullscreen режима */
#chat-fullscreen-backdrop {
  transition: opacity 0.3s ease-in-out;
}

#chat-fullscreen-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===========================
   FIX: mx-auto FALLBACK
   =========================== */

/* Явный fallback для horizontal margins (TailwindCSS v4 использует margin-inline) */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===========================
   FLASH NOTIFICATIONS ANIMATIONS
   =========================== */

/* Анимация появления уведомлений (плавное появление сверху) */
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out;
}