/* 
 * Preview Module CSS Fixes
 * These styles address layout issues with the Live Preview module
 */

/* Fix the preview container sizing and layout */
.preview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 270px;
    max-height: 350px; /* Limit maximum height to prevent layout disruption */
    width: 100%;
    position: relative;
    background-color: #000;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden; /* Keep contents within bounds */
  }
  
  /* Player wrapper improvements */
  .player-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    background-color: #000;
    min-height: 200px;
  }
  
  /* Fix video container positioning */
  .preview-player-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Fix video element styling */
  .preview-player-container video {
    max-width: 100%;
    max-height: 270px;
    object-fit: contain;
    background-color: #000;
    display: block; /* Prevent inline spacing issues */
  }
  
  /* Fix holding slide appearance */
  .preview-holding-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    text-align: center;
    color: white;
    padding: 1rem;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  
  /* Properly hide the holding slide when needed */
  .preview-holding-slide.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* Fully hide it from accessibility tree */
  }
  
  /* Preview controls bar styling */
  .preview-controls {
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    padding: 8px;
    width: 100%;
  }
  
  /* Fix for status tabs container */
  .status-tabs {
    height: auto; /* Allow height to be dynamic based on content */
    min-height: 350px; /* Minimum height to match preview */
    max-height: 450px; /* Maximum height to prevent excessive stretching */
    display: flex;
    flex-direction: column;
  }
  
  /* Ensure tab content scrolls properly */
  .status-tabs .tab-content {
    flex: 1;
    overflow: auto;
    height: 100%;
  }
  
  /* Fix tab pane styling */
  .tab-pane {
    height: 100%;
  }
  
  /* Fix for status tab active state */
  #status-tabs .nav-link {
    cursor: pointer;
  }
  
  /* Responsive adjustments */
  @media (max-width: 992px) {
    .status-tabs {
      min-height: 300px;
    }
    
    .preview-container {
      min-height: 200px;
      max-height: 300px;
    }
    
    .preview-player-container video {
      max-height: 220px;
    }
  }
  
  /* Fix for mobile devices */
  @media (max-width: 576px) {
    .status-tabs {
      min-height: 250px;
    }
    
    .preview-container {
      min-height: 150px;
      max-height: 250px;
    }
    
    .preview-player-container video {
      max-height: 170px;
    }
  }
  
  /* Fix for proper tab content height */
  #status-tab-content {
    height: calc(100% - 41px); /* 41px is the height of the tabs */
  }
  
  /* Fix styling for the preview message when not broadcasting */
  .preview-holding-slide .holding-content {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .preview-holding-slide h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }
  
  .preview-holding-slide p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }
  
  .preview-holding-slide small {
    font-size: 0.75rem;
    opacity: 0.8;
  }