/**
 * TV APP SHELL - Основная структура для Smart TV
 * Netflix/Disney+ стиль
 */

/* ============================================
   CSS VARIABLES FOR TV
   ============================================ */
:root {
  --tv-sidebar-width: 80px;
  --tv-sidebar-expanded: 260px;
  --tv-focus-color: var(--color-primary, #00d4ff);
  --tv-focus-glow: 0 0 0 4px rgba(0, 212, 255, 0.4);
  --tv-transition: all 0.25s ease;
}

/* Тёмная тема TV (по умолчанию) */
body.tv-mode {
  --tv-bg: #0a0a0a;
  --tv-bg-secondary: #141418;
  --tv-bg-card: #1a1a1e;
  --tv-text: #ffffff;
  --tv-text-muted: rgba(255, 255, 255, 0.7);
  --tv-border: rgba(255, 255, 255, 0.1);
}

/* Светлая тема TV */
body.tv-mode.tv-theme-light {
  --tv-bg: #f5f5f5;
  --tv-bg-secondary: #ffffff;
  --tv-bg-card: #ffffff;
  --tv-text: #1a1a1a;
  --tv-text-muted: rgba(0, 0, 0, 0.7);
  --tv-border: rgba(0, 0, 0, 0.1);
  --tv-focus-color: #0099cc;
}

/* ============================================
   TV MODE BASE
   ============================================ */
body.tv-mode {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--tv-bg, #0a0a0a) !important;
  color: var(--tv-text, #fff) !important;
}

body.tv-mode.mouse-active {
  cursor: default !important;
}

/* Скрываем мобильные и десктоп элементы */
body.tv-mode .header.style-1,
body.tv-mode .mobile-app-header,
body.tv-mode .mobile-tab-bar,
body.tv-mode footer.footer {
  display: none !important;
}

/* Main content с отступом под sidebar */
body.tv-mode .main-wrapper,
body.tv-mode #main-wrapper {
  margin-left: var(--tv-sidebar-width) !important;
  min-height: 100vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--tv-bg, #0a0a0a) !important;
}

/* Все секции с тёмным фоном */
body.tv-mode section,
body.tv-mode .sec-mar {
  background: var(--tv-bg, #0a0a0a) !important;
}

body.tv-mode .container,
body.tv-mode .container--wide {
  background: transparent !important;
}

/* ============================================
   TV SIDEBAR
   ============================================ */
.tv-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--tv-sidebar-width) !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.9) 100%) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 0 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  transition: width 0.3s ease !important;
}

.tv-sidebar:hover,
.tv-sidebar:focus-within,
.tv-sidebar.is-expanded {
  width: var(--tv-sidebar-expanded) !important;
}

/* Logo */
.tv-sidebar-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  padding: 0 16px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.tv-sidebar-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #fff !important;
  width: 100% !important;
  transition: opacity 0.2s ease !important;
}

.tv-sidebar-logo-link:hover {
  opacity: 0.85 !important;
}

.tv-sidebar-logo img {
  max-height: 48px !important;
  max-width: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.tv-sidebar:hover .tv-sidebar-logo img,
.tv-sidebar:focus-within .tv-sidebar-logo img,
.tv-sidebar.is-expanded .tv-sidebar-logo img {
  max-width: 160px !important;
}

.tv-sidebar-logo-text {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-left: 10px !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #00d4ff, #00ff88) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Nav divider */
.tv-nav-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.1) !important;
  margin: 12px 16px !important;
  list-style: none !important;
}

/* Nav List */
.tv-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.tv-nav-item {
  margin: 4px 10px !important;
}

.tv-nav-link {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  transition: var(--tv-transition) !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  width: 100% !important;
}

.tv-nav-link:hover,
.tv-nav-link:focus {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

.tv-nav-link.active {
  color: var(--tv-focus-color) !important;
}

.tv-nav-link.is-focused {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
  box-shadow: var(--tv-focus-glow) !important;
}

.tv-nav-icon {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.tv-nav-label {
  display: none !important;
  margin-left: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.tv-sidebar:hover .tv-nav-label,
.tv-sidebar:focus-within .tv-nav-label,
.tv-sidebar.is-expanded .tv-nav-label {
  display: block !important;
}

/* Sidebar bottom section */
.tv-sidebar-bottom {
  padding: 16px !important;
  border-top: 1px solid var(--tv-border, rgba(255,255,255,0.08)) !important;
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Theme toggle button */
.tv-theme-toggle {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  color: var(--tv-text-muted, rgba(255,255,255,0.6)) !important;
  text-decoration: none !important;
  transition: var(--tv-transition) !important;
  outline: none !important;
  border: none !important;
  background: rgba(255,255,255,0.05) !important;
  cursor: pointer !important;
  width: 100% !important;
}

.tv-theme-toggle:hover,
.tv-theme-toggle:focus {
  background: rgba(255,255,255,0.15) !important;
  color: var(--tv-text, #fff) !important;
}

.tv-theme-toggle .tv-nav-label {
  display: none !important;
  margin-left: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.tv-sidebar:hover .tv-theme-toggle .tv-nav-label,
.tv-sidebar:focus-within .tv-theme-toggle .tv-nav-label,
.tv-sidebar.is-expanded .tv-theme-toggle .tv-nav-label {
  display: block !important;
}

/* User avatar */
.tv-user-avatar-link {
  display: flex !important;
  justify-content: center !important;
}

.tv-user-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tv-text-muted, rgba(255,255,255,0.5)) !important;
  transition: var(--tv-transition) !important;
}

.tv-user-avatar:hover {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
}

/* Light theme sidebar adjustments */
body.tv-mode.tv-theme-light .tv-sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.95) 100%) !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
}

body.tv-mode.tv-theme-light .tv-nav-link {
  color: rgba(0,0,0,0.6) !important;
}

body.tv-mode.tv-theme-light .tv-nav-link:hover,
body.tv-mode.tv-theme-light .tv-nav-link:focus {
  background: rgba(0,0,0,0.08) !important;
  color: #000 !important;
}

body.tv-mode.tv-theme-light .tv-nav-link.active {
  color: var(--tv-focus-color) !important;
}

body.tv-mode.tv-theme-light .tv-nav-divider {
  background: rgba(0,0,0,0.1) !important;
}

body.tv-mode.tv-theme-light .tv-theme-toggle {
  background: rgba(0,0,0,0.05) !important;
  color: rgba(0,0,0,0.6) !important;
}

body.tv-mode.tv-theme-light .tv-theme-toggle:hover {
  background: rgba(0,0,0,0.1) !important;
  color: #000 !important;
}

/* ============================================
   TV SEARCH OVERLAY
   ============================================ */
.tv-search-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.97) !important;
  z-index: 10000 !important;
  display: none !important;
  flex-direction: column !important;
  padding: 60px !important;
  padding-left: calc(60px + var(--tv-sidebar-width)) !important;
}

.tv-search-overlay.is-open {
  display: flex !important;
}

.tv-search-input {
  width: 100% !important;
  max-width: 700px !important;
  padding: 20px 28px !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.1) !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  border-radius: 14px !important;
  color: #fff !important;
  outline: none !important;
  margin-bottom: 40px !important;
}

.tv-search-input:focus {
  border-color: var(--tv-focus-color) !important;
  box-shadow: 0 0 0 4px rgba(0,212,255,0.2) !important;
}

.tv-search-input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

.tv-search-results {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  overflow-y: auto !important;
}

/* ============================================
   FOCUS STATES
   ============================================ */
.tv-focusable:focus,
.tv-focusable.is-focused,
body.tv-mode a:focus,
body.tv-mode button:focus {
  outline: none !important;
}

body.tv-mode .content-card:focus,
body.tv-mode .content-card.is-focused {
  transform: scale(1.06) !important;
  z-index: 50 !important;
}

body.tv-mode .content-card:focus .content-card__poster-wrapper,
body.tv-mode .content-card.is-focused .content-card__poster-wrapper {
  border-color: var(--tv-focus-color) !important;
  box-shadow: 0 8px 40px rgba(0,212,255,0.4) !important;
}

/* ============================================
   4K / 8K SCALING
   ============================================ */
@media (min-width: 2560px) {
  :root {
    --tv-sidebar-width: 100px;
    --tv-sidebar-expanded: 320px;
  }
  
  .tv-nav-link {
    padding: 18px 20px !important;
  }
  
  .tv-nav-icon {
    font-size: 26px !important;
  }
  
  .tv-nav-label {
    font-size: 18px !important;
  }
}

@media (min-width: 3840px) {
  :root {
    --tv-sidebar-width: 130px;
    --tv-sidebar-expanded: 420px;
  }
  
  .tv-nav-link {
    padding: 24px 26px !important;
  }
  
  .tv-nav-icon {
    font-size: 32px !important;
  }
  
  .tv-nav-label {
    font-size: 22px !important;
  }
}

/* ============================================
   ГЛОБАЛЬНЫЕ СТИЛИ КОНТРАСТА
   ============================================ */

/* Убедиться что весь текст контрастный в тёмной теме */
body.tv-mode h1,
body.tv-mode h2,
body.tv-mode h3,
body.tv-mode h4,
body.tv-mode h5,
body.tv-mode h6 {
  color: #ffffff !important;
}

body.tv-mode p,
body.tv-mode span:not(.badge):not(.badge-status):not(.badge-tag),
body.tv-mode a:not(.btn):not(.anime-btn) {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Светлая тема - тёмный текст */
body.tv-mode.tv-theme-light h1,
body.tv-mode.tv-theme-light h2,
body.tv-mode.tv-theme-light h3,
body.tv-mode.tv-theme-light h4,
body.tv-mode.tv-theme-light h5,
body.tv-mode.tv-theme-light h6 {
  color: #1a1a1a !important;
}

body.tv-mode.tv-theme-light p,
body.tv-mode.tv-theme-light span:not(.badge):not(.badge-status):not(.badge-tag),
body.tv-mode.tv-theme-light a:not(.btn):not(.anime-btn) {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Названия карточек всегда контрастные */
body.tv-mode .content-card__title,
body.tv-mode .content-card__title a {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,1) !important;
}

body.tv-mode.tv-theme-light .content-card__title,
body.tv-mode.tv-theme-light .content-card__title a {
  color: #1a1a1a !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.5) !important;
}

/* Badges всегда яркие */
body.tv-mode .badge,
body.tv-mode .badge-status,
body.tv-mode .badge-tag {
  color: #ffffff !important;
  font-weight: 700 !important;
}