/* ============================================
   響應式布局修復 - 強制覆蓋版本
   解決不同螢幕比例下高度過矮的問題
   最後更新：2026-01-14
   優先級：使用 !important 強制覆蓋
   ============================================ */

/* ===== 1. 媒體庫列表響應式高度（強制） ===== */

/* 媒體管理容器 - 完整顯示內容，不使用滾動條 */
.media-management-container,
#mediaManagement .media-management-container {
    min-height: calc(100vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

/* 媒體列表區域 */
.media-library-section,
.media-list-section,
#mediaLibrarySection {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 媒體列表內容區域 - 自適應高度 */
.media-list-content,
.media-library-content,
#mediaListContent {
    flex: 1 !important;
    min-height: 500px !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* 媒體網格容器 - 增加高度 */
.media-grid-container,
.media-grid {
    min-height: 500px !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
}

/* ===== 2. 播放記錄列表響應式高度（強制） ===== */

/* 播放記錄容器 */
.player-logs-container,
#playerLogs .container {
    min-height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 播放記錄表格容器 */
.logs-table-container,
.logs-table-wrapper,
#logsTableWrapper {
    flex: 1 !important;
    min-height: 400px !important;
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* ===== 3. 影片編輯介面響應式高度（強制） ===== */

/* 影片編輯容器 */
.film-editing-container,
#filmEditing {
    min-height: calc(100vh - 80px) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 影片列表區域 */
.video-list-section,
.video-preview-area {
    flex: 1 !important;
    min-height: 450px !important;
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
}

/* ===== 4. 排程列表響應式高度（強制） ===== */

/* 排程列表包裝器 */
.schedule-list-wrapper {
    flex: 1 !important;
    min-height: 500px !important;
    max-height: calc(100vh - 300px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    padding: 2px !important;
    background: white !important;
}

/* 排程列表容器 */
.schedule-list {
    flex: 1 !important;
    min-height: 450px !important;
    max-height: calc(100vh - 350px) !important;
    overflow-y: auto !important;
    border: 2px dashed #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    background: #fafbfc !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 拖曳懸停效果 */
.schedule-list.drag-over {
    border-color: #4db8a8 !important;
    background: #f0f4ff !important;
}

/* 排程占位符 */
.schedule-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
    color: #6c757d !important;
    text-align: center !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.schedule-placeholder i {
    font-size: 64px !important;
    margin-bottom: 16px !important;
    opacity: 0.3 !important;
}

.schedule-placeholder p {
    font-size: 16px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ===== 5. 指定播放頁面響應式高度（強制） ===== */

/* 指定播放頁面主容器 */
#playback-view .view-content {
    min-height: calc(100vh - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

/* 影片播放器容器 */
.video-player-container,
#videoPlayerContainer {
    flex: 1 !important;
    min-height: 500px !important;
    max-height: calc(100vh - 300px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 影片播放器元素 */
.video-player-container video {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* 播放控制區域 */
.playback-controls {
    margin-top: 20px !important;
    padding: 15px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* ===== 6. Admin 浮動視窗響應式高度（強制） ===== */

/* 浮動視窗主容器 */
.floating-window {
    max-height: calc(100vh - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.floating-window.maximized {
    max-height: calc(100vh - 50px) !important;
}

/* 浮動視窗內容區 */
.floating-window .window-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 0 !important;
}

.floating-window .window-content iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

/* Admin 主內容區 */
.admin-main-content {
    min-height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Admin 頁面內容 */
.admin-main-content .main-content,
.admin-main-content .page-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

/* Admin 表格容器 */
.admin-main-content .data-table {
    min-height: 400px !important;
    max-height: calc(100vh - 400px) !important;
}

/* Admin 表格 tbody */
.admin-main-content .data-table tbody {
    max-height: calc(100vh - 500px) !important;
    overflow-y: auto !important;
    display: block !important;
}

.admin-main-content .data-table thead,
.admin-main-content .data-table tbody tr {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
}

/* 統計卡片網格 */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* ===== 3. 主內容區域響應式 ===== */

/* 主內容包裝器 */
.main-content-wrapper {
    min-height: calc(100vh - 80px);
    /* 扣除導航欄 */
    display: flex;
    flex-direction: column;
}

/* 內容區域 */
.content-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ===== 4. 生成介面響應式 ===== */

/* 生成介面容器 */
.generation-container {
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

/* 輸出結果區域 */
.generated-content-container {
    flex: 1;
    min-height: 400px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
}

/* 媒體網格（影片/圖片） */
.media-grid {
    min-height: 350px;
    max-height: calc(100vh - 450px);
    overflow-y: auto;
}

/* 音訊列表 */
.audio-list-container {
    min-height: 300px;
    max-height: calc(100vh - 450px);
    overflow-y: auto;
}

/* ===== 5. 不同螢幕比例的響應式斷點 ===== */

/* 超寬螢幕 (21:9, 32:9) */
@media (min-aspect-ratio: 21/9) {

    .media-list-content,
    .logs-table-container {
        max-height: calc(100vh - 220px);
    }

    .generated-content-container,
    .media-grid {
        max-height: calc(100vh - 350px);
    }
}

/* 標準寬螢幕 (16:9) */
@media (aspect-ratio: 16/9) {

    .media-list-content,
    .logs-table-container {
        max-height: calc(100vh - 280px);
    }
}

/* 較窄螢幕 (16:10, 4:3) */
@media (max-aspect-ratio: 16/10) {

    .media-list-content,
    .logs-table-container {
        max-height: calc(100vh - 320px);
    }

    .generated-content-container,
    .media-grid {
        max-height: calc(100vh - 420px);
    }
}

/* 垂直螢幕或小螢幕 */
@media (max-aspect-ratio: 3/4) {

    .media-list-content,
    .logs-table-container {
        min-height: 250px;
        max-height: calc(100vh - 350px);
    }

    .generated-content-container,
    .media-grid {
        min-height: 200px;
        max-height: calc(100vh - 450px);
    }
}

/* ===== 6. 高度不足時的自適應 ===== */

/* 螢幕高度小於 768px */
@media (max-height: 768px) {

    .media-list-content,
    .logs-table-container {
        min-height: 250px !important;
        max-height: calc(100vh - 200px) !important;
    }

    .generated-content-container {
        min-height: 200px !important;
        max-height: calc(100vh - 280px) !important;
    }
}

/* 螢幕高度小於 600px (極小高度) */
@media (max-height: 600px) {

    .media-list-content,
    .logs-table-container {
        min-height: 180px !important;
        max-height: calc(100vh - 150px) !important;
    }

    .generated-content-container {
        min-height: 150px !important;
        max-height: calc(100vh - 200px) !important;
    }

    /* 壓縮 header 高度 */
    .media-management-header,
    .player-logs-header {
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
    }

    .media-management-header h2,
    .player-logs-header h2 {
        font-size: 24px !important;
    }
}

/* ===== 7. 確保滾動條始終可見 ===== */

.media-list-content::-webkit-scrollbar,
.logs-table-container::-webkit-scrollbar,
.generated-content-container::-webkit-scrollbar,
.media-grid::-webkit-scrollbar {
    width: 8px;
}

.media-list-content::-webkit-scrollbar-track,
.logs-table-container::-webkit-scrollbar-track,
.generated-content-container::-webkit-scrollbar-track,
.media-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.media-list-content::-webkit-scrollbar-thumb,
.logs-table-container::-webkit-scrollbar-thumb,
.generated-content-container::-webkit-scrollbar-thumb,
.media-grid::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.media-list-content::-webkit-scrollbar-thumb:hover,
.logs-table-container::-webkit-scrollbar-thumb:hover,
.generated-content-container::-webkit-scrollbar-thumb:hover,
.media-grid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ===== 8. Flex 容器自適應 ===== */

/* 確保所有 flex 子元素都能正確縮放 */
.media-management-container>*,
.player-logs-container>*,
.generation-container>* {
    flex-shrink: 0;
    /* header 和 footer 不縮小 */
}

.media-library-section,
.logs-table-container,
.generated-content-container {
    flex-shrink: 1;
    /* 內容區域可以縮小 */
    min-height: 0;
    /* 允許縮小到內容高度 */
}

/* ===== 9. 媒體列表項目高度優化 ===== */

.media-list-item,
.audio-list-item {
    min-height: 60px;
    /* 最小高度 */
    max-height: 120px;
    /* 最大高度 */
}

/* ===== 10. 表格響應式 ===== */

/* 播放記錄表格 */
.logs-table {
    min-width: 100%;
    table-layout: auto;
}

.logs-table th,
.logs-table td {
    padding: 12px 15px;
    white-space: nowrap;
}

/* 小螢幕時壓縮表格 */
@media (max-width: 1366px) {

    .logs-table th,
    .logs-table td {
        padding: 8px 10px;
        font-size: 13px;
    }
}

@media (max-width: 1024px) {

    .logs-table th,
    .logs-table td {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ===== 11. 確保內容不被截斷 ===== */

.media-management-container,
.player-logs-container,
.generation-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* 移除任何固定高度限制 */
.media-library-section,
.logs-section,
.generation-section {
    height: auto !important;
}

/* ===== 12. 視頻播放器區域響應式適配 ===== */

/* 基礎響應式設置 */
#home-view .video-player-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 12px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

/* 視頻容器自適應 - 相對定位，子元素絕對定位重疊 */
#home-view .video-player-section .video-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 250px) !important;
    background: transparent !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
}

/* 視頻播放器 - 絕對定位置中填滿 */
#home-view .video-player-section .video-container video,
#home-view .video-player-section .video-container .main-video-player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* 佔位符 - 絕對定位覆蓋整個容器 */
#home-view .video-player-section .video-container .video-placeholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #4db8a8 0%, #3a9688 100%) !important;
}

/* 當影片顯示時，強制隱藏佔位符 */
#home-view .video-player-section .video-container video[style*="display: block"] ~ .video-placeholder,
#home-view .video-player-section .video-container .main-video-player[style*="display: block"] ~ .video-placeholder {
    display: none !important;
}

/* 視頻信息區域 */
#home-view .video-player-section .video-info {
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* 平板設備優化 (1400px 以下) */
@media (max-width: 1400px) {
    #home-view .video-player-section {
        padding: 10px !important;
    }
    
    #home-view .video-player-section .video-container {
        height: calc(100vh - 220px) !important;
    }
}

/* 筆記本設備優化 (1200px 以下) */
@media (max-width: 1200px) {
    #home-view .video-player-section {
        padding: 8px !important;
        margin-bottom: 20px !important;
    }
    
    #home-view .video-player-section .video-container {
        height: calc(100vh - 200px) !important;
    }
}

/* 小屏幕設備優化 (1024px 以下) */
@media (max-width: 1024px) {
    #home-view .video-player-section {
        padding: 8px !important;
        margin-bottom: 16px !important;
    }
    
    #home-view .video-player-section .video-container {
        height: calc(100vh - 180px) !important;
    }
}

/* 移動設備優化 (768px 以下) */
@media (max-width: 768px) {
    #home-view .video-player-section {
        padding: 6px !important;
        margin-bottom: 12px !important;
    }
    
    #home-view .video-player-section .video-container {
        height: calc(100vh - 150px) !important;
    }
}

/* 超小屏幕優化 (480px 以下) */
@media (max-width: 480px) {
    #home-view .video-player-section {
        padding: 4px !important;
    }
    
    #home-view .video-player-section .video-container {
        height: calc(100vh - 120px) !important;
    }
}

/* ===== 7. 指定播放頁面響應式高度（強制） ===== */

/* 指定播放頁面主容器 */
#playback-view .view-content {
    min-height: calc(100vh - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

/* 影片播放器容器 */
.video-player-container,
#videoPlayerContainer {
    flex: 1 !important;
    min-height: 500px !important;
    max-height: calc(100vh - 300px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 影片播放器元素 */
.video-player-container video {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* 播放控制區域 */
.playback-controls {
    margin-top: 20px !important;
    padding: 15px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* ===== 8. Admin 浮動視窗響應式高度（補強） ===== */

/* 已在 section 6 統一處理，此處只保留 admin 主內容區規則 */

/* Admin 主內容區 */
.admin-main-content {
    min-height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Admin 頁面內容 */
.admin-main-content .main-content,
.admin-main-content .page-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

/* Admin 表格容器 */
.admin-main-content .data-table {
    min-height: 400px !important;
    max-height: calc(100vh - 400px) !important;
}

/* Admin 表格 tbody */
.admin-main-content .data-table tbody {
    max-height: calc(100vh - 500px) !important;
    overflow-y: auto !important;
    display: block !important;
}

.admin-main-content .data-table thead,
.admin-main-content .data-table tbody tr {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
}

/* 統計卡片網格 */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}