/* Utility Classes and Helper Styles */

/* Common Component Styles */
.bg-white-overlay {
  background-color: var(--white-overlay);
}

.bg-primary-variant {
  background-color: var(--primary-variant);
}

.table-striped-row {
  background-color: var(--gray-50);
}

.hero-background-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Video wrapper system - bulletproof mobile compatibility */
.hero-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Establish stacking context to prevent z-index conflicts */
  z-index: 0;
  /* Make wrapper clickable and enable GPU promotion */
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  will-change: opacity;
}

/* Desktop: Show desktop video wrappers, hide mobile wrappers */
.hero-video-wrapper[data-video^="desktop"] {
  display: block;
}

.hero-video-wrapper[data-video^="mobile"] {
  display: none;
}

/* Mobile: Hide desktop video wrappers, show mobile wrappers */
@media (max-width: 768px) {
  .hero-video-wrapper[data-video^="desktop"] {
    display: none !important;
  }
  
  .hero-video-wrapper[data-video^="mobile"] {
    display: block !important;
  }
}

.tap-layer {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  z-index: 5;
  cursor: pointer;
}

/* Videos never capture interactions - prevents mobile browser interference */
video {
  pointer-events: none !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Force GPU layers specifically on video2 elements - Gemini's fix */
#hero-video-2, #hero-video-mobile-2 {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
}

/* Initial video states for seamless transitions */
#hero-video-1, #hero-video-mobile-1 {
  opacity: 1;
  z-index: 1;
}

#hero-video-2, #hero-video-mobile-2 {
  opacity: 0;
  z-index: 2;
}

/* Mute overlay styling */
#mute-overlay {
  z-index: 15;
  transition: opacity 0.3s ease;
  /* Ensure positioning classes take precedence */
  position: absolute !important;
}

#mute-overlay span {
  color: var(--primary-blue);
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'DM Sans', sans-serif;
}

/* Static image fallback mode styling */
#hero-static-image {
  z-index: 5;
  transition: opacity 0.5s ease;
}

#power-mode-indicator {
  z-index: 20;
  backdrop-filter: blur(8px);
  font-family: 'DM Sans', sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

#power-mode-indicator:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

#power-mode-indicator button {
  color: white;
  transition: color 0.2s ease;
}

#power-mode-indicator button:hover {
  color: #60a5fa;
}

/* Video Fallback Image Styling */
.desktop-fallback {
  z-index: 15;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.mobile-fallback {
  z-index: 15;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.desktop-fallback.show,
.mobile-fallback.show {
  opacity: 1;
}

.fallback-overlay {
  z-index: 16;
}

/* Fallback overlay styling - no container needed */
.fallback-overlay img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.fallback-overlay h2 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.fallback-overlay p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fallback-overlay a:not(.btn-outline-blue) {
  background-color: var(--primary-blue);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fallback-overlay a:not(.btn-outline-blue):hover {
  background-color: #063d7a;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Hide fallback images by default */
.desktop-fallback,
.mobile-fallback {
  display: none !important;
}

/* Force hide all videos when fallback is active */
.fallback-active #hero-video-1,
.fallback-active #hero-video-2,
.fallback-active #hero-video-mobile-1,
.fallback-active #hero-video-mobile-2 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* Force show fallback when active - override hidden class */
.desktop-fallback.show,
.mobile-fallback.show {
  display: block !important;
  opacity: 1 !important;
  z-index: 100 !important;
  visibility: visible !important;
}

/* Specifically override Tailwind's hidden class */
.hidden.show {
  display: block !important;
}

/* Show desktop fallback on desktop */
@media (min-width: 769px) {
  .desktop-fallback.show {
    display: block;
  }
  
  .mobile-fallback {
    display: none !important;
  }
}

/* Show mobile fallback on mobile */
@media (max-width: 768px) {
  .mobile-fallback.show {
    display: block;
  }
  
  .desktop-fallback {
    display: none !important;
  }
  
  .mobile-fallback .fallback-overlay h2 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  
  .mobile-fallback .fallback-overlay p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  
  .mobile-fallback .fallback-overlay a {
    font-size: 0.875rem;
    padding: 0.625rem 1.5rem;
  }
}

/* Mobile specific adjustments for power saving indicator */
@media (max-width: 768px) {
  #power-mode-indicator {
    top: 1rem;
    left: 1rem;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

.line-height-relaxed {
  line-height: 1.4;
}

.object-fit-fill {
  object-fit: fill;
}

/* Table Styles */
.table-container {
  overflow-x: auto;
  margin: 1rem 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
}

.table-header {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
}

.table-cell {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
}

.table-cell-bold {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  font-weight: 500;
}

/* Utilities */
/* .hidden class removed to prevent conflicts with Tailwind's responsive classes */

.touch-manipulation {
  touch-action: manipulation;
}

/* Mobile Viewport Height Utilities */
.full-height {
  height: 100dvh; /* Modern browsers with dynamic viewport units */
  height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area support */
}

.min-full-height {
  min-height: 100dvh; /* Modern browsers with dynamic viewport units */
  min-height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area support */
}

.viewport-height {
  height: 100dvh; /* Modern browsers with dynamic viewport units */
  height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
}

.viewport-height-safe {
  height: 100dvh; /* Modern browsers with dynamic viewport units */
  height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area support */
}

/* Video poster removal utility - optimized for smooth transitions */
video.poster-hidden {
  background: transparent !important;
  background-image: none !important;
  will-change: auto !important;
}

video.poster-hidden::-webkit-media-text-track-container {
  display: none !important;
}

video.poster-hidden::before,
video.poster-hidden::after {
  content: none !important;
  display: none !important;
}

/* Ensure smooth video rendering - mobile only */
@media (max-width: 768px) {
  .mobile-video {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Desktop video rendering optimizations */
@media (min-width: 769px) {
  .desktop-video {
    will-change: auto;
    backface-visibility: visible;
  }
}