/**
 * 後台響應式 - 較小 PC、中等 PC 與平板尺寸的全域調整
 *
 * 由 admin-responsive.css 依原行序拆出；載入順序見 src/lib/assets.ts 的
 * ADMIN_STYLES，順序即 cascade 順序，不可調換。
 */

/* ===== 較小 PC 螢幕 (max-width: 85rem / 1360px) ===== */
@media (max-width: 85rem) {
    /* 遊戲版本管理 - 表格容器水平滾動 */
    #versionTableContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 遊戲版本管理 - 表格最小寬度 */
    #versionTable {
        min-width: 950px;
    }

    /* 表格標頭 - 防止文字換行 */
    #versionTable th {
        white-space: nowrap;
    }

    /* 縮小欄位寬度 */
    #versionTable th:nth-child(1),
    #versionTable td:nth-child(1) {
        width: 50px;
        min-width: 50px;
    }

    /* 顯示名稱 - 確保最小寬度 */
    #versionTable th:nth-child(2),
    #versionTable td:nth-child(2) {
        min-width: 100px;
    }

    /* 專案代碼 - 確保最小寬度 */
    #versionTable th:nth-child(3),
    #versionTable td:nth-child(3) {
        min-width: 80px;
    }

    /* 遊戲代碼 - 確保最小寬度 */
    #versionTable th:nth-child(4),
    #versionTable td:nth-child(4) {
        min-width: 80px;
    }

    /* 狀態 */
    #versionTable th:nth-child(5),
    #versionTable td:nth-child(5) {
        width: 60px;
        min-width: 60px;
    }

    /* 版本欄位 - 縮小寬度 */
    #versionTable th:nth-child(6),
    #versionTable td:nth-child(6),
    #versionTable th:nth-child(7),
    #versionTable td:nth-child(7) {
        width: 90px;
        min-width: 90px;
    }

    /* 歷史版本、Config 按鈕欄位 */
    #versionTable th:nth-child(8),
    #versionTable td:nth-child(8),
    #versionTable th:nth-child(9),
    #versionTable td:nth-child(9) {
        width: 90px;
        min-width: 90px;
    }

    /* 按鈕縮小 */
    #versionTable .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ===== 中等 PC 螢幕 (max-width: 75rem / 1200px) ===== */
@media (max-width: 75rem) {
    /* 遊戲版本管理 - 隱藏次要欄位 */
    #versionTable th:nth-child(3),
    #versionTable td:nth-child(3) {
        display: none;
    }

    /* 表格最小寬度調整 */
    #versionTable {
        min-width: 800px;
    }
}

/* ===== 平板尺寸 (max-width: 64rem / 1024px) ===== */
@media (max-width: 64rem) {
    /* 重要：重置 html/body 的固定高度，允許自然滾動 */
    html {
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 側邊欄開啟時禁止背景滾動 */
    body.sidebar-open {
        overflow: hidden !important;
    }

    /* 頁面主體滾動修復 */
    .admin-page {
        display: block !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }

    /* 側邊欄 - 固定定位並預設隱藏 (後台專用)
       以 transform 滑入而不是改 left：left 每一幀都要重排，transform 只在合成層移動。
       多推 1.5rem 讓陰影也一起藏到畫面外；收起後改成 visibility: hidden，
       藏在畫面外的連結才不會還能被 Tab 聚焦 */
    .admin-page .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1500;
        padding-top: 4rem;
        transform: translateX(calc(-100% - 1.5rem));
        visibility: hidden;
        transition:
            transform var(--motion-base) var(--ease-in-quart),
            visibility 0s linear var(--motion-base);
        box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.3);
        overflow-y: auto;
    }

    /* 打開用柔和的彈簧：抽屜「被拉出來」停住，而不是等速滑到定點 */
    .admin-page .sidebar.show {
        transform: none;
        visibility: visible;
        transition:
            transform var(--motion-spring) var(--ease-spring-soft),
            visibility 0s;
    }

    /* 側邊欄遮罩 - 移動端顯示 */
    .admin-page .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 主容器 - 移除 flex 限制 */
    .admin-container {
        display: block !important;
        flex: none !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto;
    }

    /* 主內容區域 - 移除滾動限制 */
    .admin-main {
        margin-left: 0;
        overflow: visible !important;
        height: auto !important;
        min-height: auto;
        flex: none !important;
    }

    .admin-page .sidebar-toggle {
        display: flex;
    }

    /* 表格響應式 - 添加橫向滾動 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 40rem;
    }

    /* 遊戲卡片 - 平板尺寸優化 */
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .game-card-image {
        height: 9rem;
    }

    .game-card-body {
        padding: 0.75rem;
    }

    .game-card-body h4 {
        font-size: 0.875rem;
    }
}