/* XtreamVault Pro UI & Navigation Enhancements (v51.0.6) */

/* Phase 3: Top Navigation Bar spacing and Gold Highlight Clearance */
#custom_top_navigation_bar {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  overflow: visible !important;
  min-height: 4.5rem !important;
}

#custom_top_navigation_bar nav {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  gap: 0.85rem !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

[id^="nav_item_top_"] {
  margin: 0.25rem 0.2rem !important;
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Ensure gold highlight border and ring on active items (Home & Settings) have full clearance */
[id^="nav_item_top_"].border-\[\#FFD700\],
[id^="nav_item_top_"]:focus,
[id^="nav_item_top_"].tv-focused {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFD700, 0 4px 14px rgba(255, 215, 0, 0.35) !important;
  border-color: #FFD700 !important;
  z-index: 10 !important;
}

/* Phase 4: Full-Screen Dedicated Synopsis Page */
#movie_synopsis_modal_container {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 99999 !important;
  background-color: #0d0c13 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Phase 2: Uniform Movie and Series Poster Card Styles */
#movies_screen_root [id^="movie_item_"],
#series_screen_root [id^="series_item_"] {
  aspect-ratio: 2/3 !important;
  border-radius: 1rem !important;
  background-color: #181720 !important;
  border: 1px solid #262432 !important;
  transition: all 0.2s ease-in-out !important;
}

#movies_screen_root [id^="movie_item_"]:focus,
#movies_screen_root [id^="movie_item_"].tv-focused {
  border-color: #60a5fa !important;
  transform: scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.4) !important;
  z-index: 20 !important;
}

#series_screen_root [id^="series_item_"]:focus,
#series_screen_root [id^="series_item_"].tv-focused {
  border-color: #c084fc !important;
  transform: scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(192, 132, 252, 0.4) !important;
  z-index: 20 !important;
}

/* Home Page Card Focus Styles (Phase 4) */
[id^="movie_card_"],
[id^="series_card_"] {
  outline: none !important;
  box-sizing: border-box !important;
}

[id^="movie_card_"]:focus,
[id^="movie_card_"].tv-focused {
  border-color: #60a5fa !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 0 2px #60a5fa, 0 8px 24px rgba(96, 165, 250, 0.5) !important;
  z-index: 20 !important;
}

[id^="series_card_"]:focus,
[id^="series_card_"].tv-focused {
  border-color: #c084fc !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 0 2px #c084fc, 0 8px 24px rgba(192, 132, 252, 0.5) !important;
  z-index: 20 !important;
}

/* Phase 2: Uniform poster card dimensions across the ENTIRE application */
[id^="movie_item_"],
[id^="series_item_"],
[id^="movie_card_"],
[id^="series_card_"],
[id^="search_item_"],
[id^="fav_card_"] {
  width: 9rem !important;
  height: 13.5rem !important;
  min-width: 9rem !important;
  max-width: 9rem !important;
  min-height: 13.5rem !important;
  max-height: 13.5rem !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  [id^="movie_item_"],
  [id^="series_item_"],
  [id^="movie_card_"],
  [id^="series_card_"],
  [id^="search_item_"],
  [id^="fav_card_"] {
    width: 10rem !important;
    height: 14.5rem !important;
    min-width: 10rem !important;
    max-width: 10rem !important;
    min-height: 14.5rem !important;
    max-height: 14.5rem !important;
  }
}

/* Phase 3: Top Navigation Bar Smooth Scrolling */
#custom_top_navigation_bar nav {
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 215, 0, 0.2) transparent !important;
}

/* Profile Selection Highlight (Phase 4) */
[id^="user_profile_card_"]:focus,
[id^="user_profile_card_"].tv-focused {
  outline: none !important;
  box-shadow: 0 0 0 3px #FFD700, 0 8px 24px rgba(255, 215, 0, 0.4) !important;
  transform: scale(1.06) !important;
  border-radius: 1.5rem !important;
}

/* Phase 4: OLED Black Theme - 40% Green Neon Reduction */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400 {
  color: #34d399 !important;
  opacity: 0.60 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500 {
  background-color: rgba(16, 185, 129, 0.60) !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500 {
  border-color: rgba(16, 185, 129, 0.50) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500 {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.20) !important;
}

/* Phase 4: OLED Black Theme - Additional 40% Green Neon Softening */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300 {
  color: #6ee7b7 !important;
  opacity: 0.36 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600 {
  background-color: rgba(16, 185, 129, 0.28) !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400 {
  border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: OLED Black Theme - Ultra Dimmed Ambient Emerald */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300 {
  color: #94a3b8 !important;
  opacity: 0.70 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600 {
  background-color: rgba(148, 163, 184, 0.15) !important;
  color: #e2e8f0 !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400 {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: Ultra Dimmed Ambient Tone - Just Barely Visible */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300 {
  color: #64748b !important;
  opacity: 0.45 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600 {
  background-color: rgba(100, 116, 139, 0.12) !important;
  color: #cbd5e1 !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400 {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: Ultra Dimmed Ambient Tone - Just Barely Visible */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300,
.text-emerald-400,
.text-green-400 {
  color: #475569 !important;
  opacity: 0.35 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600,
.bg-emerald-500,
.bg-green-500 {
  background-color: rgba(71, 85, 105, 0.10) !important;
  color: #94a3b8 !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400,
.border-emerald-500,
.border-green-500 {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500,
.shadow-emerald-500,
.shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: OLED Black Theme - Barely Visible Ambient Tone */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300,
.text-emerald-400,
.text-green-400 {
  color: #334155 !important;
  opacity: 0.20 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600,
.bg-emerald-500,
.bg-green-500 {
  background-color: rgba(51, 65, 85, 0.08) !important;
  color: #64748b !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400,
.border-emerald-500,
.border-green-500 {
  border-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500,
.shadow-emerald-500,
.shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: OLED Black Theme - Deep Ambient Slate (Opacity 0.02 - 0.10, Just Barely Visible) */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300,
.text-emerald-400,
.text-green-400 {
  color: #334155 !important;
  opacity: 0.08 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600,
.bg-emerald-500,
.bg-green-500 {
  background-color: rgba(51, 65, 85, 0.08) !important;
  color: #475569 !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400,
.border-emerald-500,
.border-green-500 {
  border-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500,
.shadow-emerald-500,
.shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: OLED Black Theme - Deep Ambient Slate (Opacity 0.02 - 0.06) & Muted Gold */
[data-theme="amoled"] .text-emerald-400,
[data-theme="amoled"] .text-green-400,
[data-theme="amoled"] .text-emerald-300,
[data-theme="amoled"] .text-green-300,
.text-emerald-400,
.text-green-400 {
  color: #334155 !important;
  opacity: 0.04 !important;
}

[data-theme="amoled"] .bg-emerald-500,
[data-theme="amoled"] .bg-green-500,
[data-theme="amoled"] .bg-emerald-600,
[data-theme="amoled"] .bg-green-600,
.bg-emerald-500,
.bg-green-500 {
  background-color: rgba(51, 65, 85, 0.08) !important;
  color: #475569 !important;
}

[data-theme="amoled"] .border-emerald-500,
[data-theme="amoled"] .border-green-500,
[data-theme="amoled"] .border-emerald-400,
.border-emerald-500,
.border-green-500 {
  border-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="amoled"] .shadow-emerald-500,
[data-theme="amoled"] .shadow-green-500,
.shadow-emerald-500,
.shadow-green-500 {
  box-shadow: none !important;
}

/* Phase 4: Soften bright yellow/gold everywhere */
[data-theme="amoled"] .text-\[\#FFD700\],
[data-theme="amoled"] .text-amber-400,
[data-theme="amoled"] .text-amber-300 {
  color: #cbd5e1 !important;
  opacity: 0.85 !important;
}

[data-theme="amoled"] .bg-\[\#FFD700\],
[data-theme="amoled"] .bg-amber-400,
[data-theme="amoled"] .bg-amber-500 {
  background-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="amoled"] .border-\[\#FFD700\],
[data-theme="amoled"] .border-amber-400,
[data-theme="amoled"] .border-amber-500 {
  border-color: rgba(148, 163, 184, 0.35) !important;
}


/* Phase 1: Move Left Side Rail navigation up directly under Profile Icon & Username */
#custom_side_navigation_bar {
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  padding-top: 0.75rem !important;
}

#custom_side_navigation_bar nav {
  margin-top: 0.25rem !important;
  margin-bottom: auto !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}


/* Phase 1: Move Left Side Rail up directly under Icon and Username */
#custom_side_navigation_bar, aside#custom_side_navigation_bar {
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  padding-top: 0.5rem !important;
}

#custom_side_navigation_bar nav {
  margin-top: 0.25rem !important;
  margin-bottom: auto !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
}

/* Phase 2: Freely Movable In-App Picture-in-Picture Box */
#pip_floating_box {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
  z-index: 9999 !important;
}
#pip_floating_box:active {
  cursor: grabbing !important;
}