/* ==========================================================================
   ТВ ПОВТОР — СТИЛИ ТЕЛЕПРОГРАММЫ (EPG) И АРХИВА
   Ultra-Reliable Layout / Zero Overlap / Crisp 100% Readability
   Всегда в правой колонке, подсветка прямого эфира, интерактивный архив
   ========================================================================== */

/* Боковая панель телепрограммы — ВСЕГДА справа */
.side-epg-panel {
  width: 380px !important;
  min-width: 330px !important;
  max-width: 440px !important;
  background: #0b0f1a !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Шапка телепрограммы */
.epg-header {
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #0f1524 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.epg-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.epg-header-title {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 250px !important;
}

.epg-header-meta {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #c4b5fd !important;
  background: rgba(139, 92, 246, 0.22) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0 !important;
}

/* Навигатор по дням */
.epg-dates-nav {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.epg-dates-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.epg-date-btn {
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  color: #94a3b8 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.epg-date-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.epg-date-btn.active {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4) !important;
}

/* Контейнер списка передач: свободный вертикальный скролл */
.epg-programs-list {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 14px 40px !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  scroll-behavior: smooth !important;
}

/* Тонкий стильный скроллбар */
.epg-programs-list::-webkit-scrollbar {
  width: 6px !important;
}
.epg-programs-list::-webkit-scrollbar-track {
  background: transparent !important;
}
.epg-programs-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
}
.epg-programs-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Интерактивные кнопки перехода по дням в начале и в конце списка */
.epg-day-jump-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.epg-day-jump-btn.epg-jump-prev {
  background: rgba(139, 92, 246, 0.12) !important;
  border: 1px dashed rgba(139, 92, 246, 0.5) !important;
  color: #c4b5fd !important;
  margin-bottom: 4px !important;
}

.epg-day-jump-btn.epg-jump-prev:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3) !important;
}

.epg-day-jump-btn.epg-jump-next {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px dashed rgba(59, 130, 246, 0.5) !important;
  color: #93c5fd !important;
  margin-top: 6px !important;
}

.epg-day-jump-btn.epg-jump-next:hover {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  transform: translateY(2px) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
}

.epg-day-jump-btn .jump-arrow {
  font-size: 1rem !important;
}

.epg-day-jump-btn .jump-badge {
  font-size: 0.65rem !important;
  background: rgba(139, 92, 246, 0.35) !important;
  color: #fff !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-left: auto !important;
}

/* Карточка отдельной передачи */
.epg-item {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  min-height: 58px !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: #131929 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  cursor: default !important;
  transition: all 0.15s ease !important;
}

.epg-item:hover {
  background: #192237 !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

/* ТЕКУЩИЙ ПРЯМОЙ ЭФИР (LIVE) — ЯРКАЯ ПОДСВЕТКА */
.epg-item.is-live {
  background: rgba(239, 68, 68, 0.14) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.35) !important;
  cursor: pointer !important;
}

.epg-item.is-live::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ef4444;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 0 10px #ef4444;
}

/* ПЕРЕДАЧА В АРХИВЕ (CATCHUP) — КЛИКАБЕЛЬНА ДЛЯ ВОСПРОИЗВЕДЕНИЯ */
.epg-item.is-archive {
  cursor: pointer !important;
}

.epg-item.is-archive:hover {
  background: rgba(139, 92, 246, 0.16) !important;
  border-color: rgba(139, 92, 246, 0.65) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

/* АКТИВНО ВОСПРОИЗВОДИМАЯ ЗАПИСЬ ИЗ АРХИВА */
.epg-item.is-archive.playing {
  background: rgba(139, 92, 246, 0.26) !important;
  border: 2px solid #8b5cf6 !important;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.55) !important;
}

.epg-item.is-archive.playing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #8b5cf6;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 0 10px #8b5cf6;
}

/* Верхняя строка передачи: время и бейдж статуса */
.epg-item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 4px !important;
  box-sizing: border-box !important;
}

.epg-time-range {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #60a5fa !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

.epg-item.is-live .epg-time-range {
  color: #fca5a5 !important;
}

.epg-item.is-archive .epg-time-range {
  color: #c4b5fd !important;
}

.epg-item.is-archive.playing .epg-time-range {
  color: #e9d5ff !important;
}

/* Бейджи статуса */
.epg-status-tag {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.epg-status-tag.live-tag {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
}

.badge-dot-live {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  animation: pulseLiveDot 1.2s infinite ease-in-out !important;
}

@keyframes pulseLiveDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.badge-dot-purple {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  animation: pulseLiveDot 1.2s infinite ease-in-out !important;
}

.epg-status-tag.playing-tag {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6) !important;
}

.epg-status-tag.archive-tag {
  background: rgba(139, 92, 246, 0.22) !important;
  color: #ddd6fe !important;
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
}

.epg-status-tag.future-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

/* Название передачи: крупное, яркое, четкое */
.epg-item-title {
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow: visible !important;
  margin-bottom: 2px !important;
}

.epg-item.is-live .epg-item-title {
  color: #ffffff !important;
}

.epg-item.is-archive.playing .epg-item-title {
  color: #f3e8ff !important;
}

/* Описание передачи: компактно и аккуратно в 1-2 строки */
.epg-item-desc {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Прогресс-бар текущего эфира */
.epg-live-bar-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.epg-live-bar {
  flex: 1 1 0 !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.epg-live-bar-fill {
  height: 100% !important;
  background: #ef4444 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 6px #ef4444 !important;
}

.epg-remain-badge {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #fca5a5 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Подсказка включения записи при hover */
.epg-play-hint {
  display: none !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #c4b5fd !important;
  margin-top: 5px !important;
}

.epg-item.is-archive:hover .epg-play-hint {
  display: flex !important;
}

.epg-play-hint.playing-hint {
  display: flex !important;
  color: #a78bfa !important;
}

/* Состояние пустой телепрограммы */
.epg-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  gap: 8px !important;
}

.epg-empty-icon {
  font-size: 2.8rem !important;
  opacity: 0.5 !important;
  margin-bottom: 4px !important;
}