/**
 * 後台響應式 - 一鍵佈署頁面：平板及以下
 *
 * 由 admin-responsive.css 依原行序拆出；載入順序見 src/lib/assets.ts 的
 * ADMIN_STYLES，順序即 cascade 順序，不可調換。
 */

/* 平板及以下：隱藏右側面板，顯示底部操作列 */
@media (max-width: 64rem) {
    #page-one-click-deploy .deploy-content-layout {
        flex-direction: column;
    }

    #page-one-click-deploy .deploy-sidebar {
        display: none;
    }

    #page-one-click-deploy .deploy-main-content {
        width: 100%;
    }
}

/* 中等手機尺寸 (max-width: 48rem / 768px) */
@media (max-width: 48rem) {
    /* 品牌 + 環境選擇列 */
    #page-one-click-deploy .deploy-brand-env-row {
        flex-direction: row;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tabs {
        flex: 1;
        min-width: 0;
        gap: 0.375rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
        flex-shrink: 0;
        min-width: auto;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab img {
        width: 20px;
        height: 20px;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab span {
        display: inline;
        font-size: 0.75rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tabs {
        gap: 0.25rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
        min-width: auto;
        flex: 0 0 auto;
        gap: 0.25rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab i {
        font-size: 0.75rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab span {
        display: inline;
        font-size: 0.6875rem;
    }

    /* 模式選擇列 - 垂直佈局 */
    #page-one-click-deploy .deploy-mode-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        margin-bottom: 0.75rem;
    }

    #page-one-click-deploy .deploy-options-label {
        font-size: 0.8125rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    #page-one-click-deploy .deploy-mode-tabs {
        width: 100%;
        display: flex;
    }

    #page-one-click-deploy .deploy-mode-tabs .mode-tab {
        flex: 1;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
        justify-content: center;
    }

    /* 快速佈署選項按鈕 - 垂直排列 */
    #page-one-click-deploy .quick-option-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        width: 100%;
    }

    #page-one-click-deploy .quick-option-btn {
        width: 100%;
        margin: 0;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        width: 100%;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-title {
        flex: 1;
        font-size: 0.8125rem;
        text-align: left;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-content i {
        font-size: 0.875rem;
        width: 1.25rem;
        text-align: center;
    }

    #page-one-click-deploy .quick-option-btn .build-type-badge {
        font-size: 0.5625rem;
        padding: 0.1875rem 0.375rem;
    }

    /* 重新載入按鈕 - 獨立一行，右對齊 */
    #page-one-click-deploy .deploy-refresh-btn {
        margin-left: auto;
        margin-top: 0.25rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    #page-one-click-deploy .deploy-refresh-btn span {
        display: inline;
    }

    /* 版本比較面板 */
    #page-one-click-deploy .version-comparison-panel {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }

    #page-one-click-deploy .comparison-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #page-one-click-deploy .comparison-header h3 {
        font-size: 0.9375rem;
        gap: 0.375rem;
    }

    #page-one-click-deploy .comparison-header h3 i {
        font-size: 0.875rem;
    }

    #page-one-click-deploy .comparison-select-all {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    #page-one-click-deploy .comparison-select-all .select-all-label {
        font-size: 0.75rem;
    }

    #page-one-click-deploy .comparison-select-all .game-count {
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .comparison-filters {
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
        gap: 0.75rem;
    }

    #page-one-click-deploy .comparison-filters .filter-label {
        font-size: 0.75rem;
    }

    /* 版本比較表格 - 卡片式佈局 */
    #page-one-click-deploy .comparison-table-container {
        overflow-x: visible;
    }

    #page-one-click-deploy .comparison-table-container .data-table {
        display: block;
        min-width: unset;
    }

    #page-one-click-deploy .comparison-table-container .data-table thead {
        display: none;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr {
        display: grid;
        grid-template-columns: auto 48px 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.375rem 0.5rem;
        padding: 0.625rem;
        background: #1a1a1a;
        border-radius: 0.5rem;
        border: 1px solid #2a2a2a;
    }

    .light-theme #page-one-click-deploy .comparison-table-container .data-table tbody tr {
        background: #fff;
        border-color: #e5e5e5;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td {
        border-bottom: none;
        padding: 0;
    }

    /* Checkbox - 左上角 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.checkbox-cell {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.checkbox-cell input[type="checkbox"] {
        width: 1.125rem;
        height: 1.125rem;
    }

    /* 遊戲圖示 - 左邊 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell .game-icon-box {
        width: 48px;
        height: 48px;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell .game-icon-img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 0.375rem;
    }

    /* 遊戲名稱 - 第一行右邊 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell .game-name {
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.2;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell .game-code {
        font-size: 0.6875rem;
        color: #888;
    }

    /* 來源版本 - 第二行 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .version-cell {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .version-badge {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.375rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .env-label {
        font-size: 0.5625rem;
    }

    /* 箭頭 - 隱藏 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.arrow-cell {
        display: none;
    }

    /* 目標版本 - 第二行，加上箭頭 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .version-cell {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .version-cell::before {
        content: '→';
        color: #666;
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .version-badge {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.375rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .env-label {
        font-size: 0.5625rem;
    }

    /* 狀態 - 隱藏在手機版 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(7) {
        display: none;
    }

    /* 佈署操作列 */
    #page-one-click-deploy .deploy-action-bar {
        padding: 0.75rem;
        margin-top: 0.75rem;
        flex-direction: column;
        gap: 0.625rem;
    }

    #page-one-click-deploy .deploy-summary {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.75rem;
    }

    #page-one-click-deploy .deploy-action-bar .btn-lg {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }

    /* 手動模式面板 */
    #page-one-click-deploy .manual-deploy-control-panel {
        padding: 0.75rem;
    }

    #page-one-click-deploy .manual-deploy-control-panel h3 {
        font-size: 0.9375rem;
        margin-bottom: 0.625rem;
    }

    #page-one-click-deploy .games-selection-deploy {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    #page-one-click-deploy .game-selection-header {
        margin-bottom: 0.625rem;
    }

    #page-one-click-deploy .game-selection-header .select-all-label {
        font-size: 0.75rem;
    }

    #page-one-click-deploy .game-selection-header .game-count {
        font-size: 0.6875rem;
    }
}

/* 小型手機尺寸 (max-width: 30rem / 480px) */
@media (max-width: 30rem) {
    /* 品牌 + 環境選擇列 - 更緊湊 */
    #page-one-click-deploy .deploy-brand-env-row {
        gap: 0.375rem;
        margin-bottom: 0.625rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab {
        padding: 0.375rem 0.5rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab img {
        width: 18px;
        height: 18px;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab span {
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab i {
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab span {
        font-size: 0.625rem;
    }

    /* 模式選擇列 */
    #page-one-click-deploy .deploy-mode-row {
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    #page-one-click-deploy .deploy-options-label {
        font-size: 0.75rem;
    }

    #page-one-click-deploy .deploy-mode-tabs .mode-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }

    #page-one-click-deploy .deploy-mode-tabs .mode-tab i {
        font-size: 0.75rem;
    }

    /* 快速選項按鈕 */
    #page-one-click-deploy .quick-option-btn .option-btn-content {
        padding: 0.5rem 0.625rem;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-title {
        font-size: 0.75rem;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-content i {
        font-size: 0.75rem;
        width: 1rem;
    }

    #page-one-click-deploy .quick-option-btn .build-type-badge {
        font-size: 0.5rem;
        padding: 0.125rem 0.3125rem;
    }

    /* 重新載入按鈕 */
    #page-one-click-deploy .deploy-refresh-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.6875rem;
    }

    /* 版本比較面板 */
    #page-one-click-deploy .version-comparison-panel {
        padding: 0.625rem;
    }

    #page-one-click-deploy .comparison-header h3 {
        font-size: 0.8125rem;
    }

    #page-one-click-deploy .comparison-select-all .select-all-label {
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .comparison-select-all .game-count {
        font-size: 0.625rem;
    }

    #page-one-click-deploy .comparison-filters .filter-label {
        font-size: 0.6875rem;
    }

    /* 版本比較表格 - 更緊湊的卡片佈局 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr {
        grid-template-columns: auto 40px 1fr auto;
        gap: 0.25rem 0.375rem;
        padding: 0.5rem;
    }

    /* Checkbox */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.checkbox-cell input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
    }

    /* 遊戲圖示 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell .game-icon-box {
        width: 40px;
        height: 40px;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell .game-icon-img {
        width: 40px !important;
        height: 40px !important;
    }

    /* 遊戲名稱 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell .game-name {
        font-size: 0.8125rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell .game-code {
        font-size: 0.625rem;
    }

    /* 版本標籤更緊湊 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .version-badge,
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .version-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.3125rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .env-label,
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .env-label {
        font-size: 0.5rem;
    }

    /* 佈署操作列 */
    #page-one-click-deploy .deploy-action-bar {
        padding: 0.625rem;
        margin-top: 0.625rem;
        gap: 0.5rem;
    }

    #page-one-click-deploy .deploy-summary {
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .deploy-action-bar .btn-lg {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }

    /* 手動模式面板 */
    #page-one-click-deploy .manual-deploy-control-panel {
        padding: 0.625rem;
    }

    #page-one-click-deploy .manual-deploy-control-panel h3 {
        font-size: 0.8125rem;
        margin-bottom: 0.5rem;
    }

    #page-one-click-deploy .games-selection-deploy {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    #page-one-click-deploy .game-selection-header .select-all-label {
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .game-selection-header .game-count {
        font-size: 0.625rem;
    }
}

/* 超小螢幕 (max-width: 22.5rem / 360px) */
@media (max-width: 22.5rem) {
    /* 品牌 + 環境選擇 */
    #page-one-click-deploy .deploy-brand-env-row .brand-tab {
        padding: 0.3125rem 0.375rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab img {
        width: 16px;
        height: 16px;
    }

    #page-one-click-deploy .deploy-brand-env-row .brand-tab span {
        font-size: 0.625rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab {
        padding: 0.3125rem 0.375rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab i {
        font-size: 0.625rem;
    }

    #page-one-click-deploy .deploy-brand-env-row .env-tab span {
        font-size: 0.5625rem;
    }

    /* 模式選項 */
    #page-one-click-deploy .deploy-mode-tabs .mode-tab {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-content {
        padding: 0.375rem 0.5rem;
    }

    #page-one-click-deploy .quick-option-btn .option-btn-title {
        font-size: 0.6875rem;
    }

    /* 版本比較表格 */
    #page-one-click-deploy .comparison-table-container .data-table tbody tr {
        grid-template-columns: auto 36px 1fr auto;
        padding: 0.375rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell .game-icon-box {
        width: 36px;
        height: 36px;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td.icon-cell .game-icon-img {
        width: 36px !important;
        height: 36px !important;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell .game-name {
        font-size: 0.75rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(3) .game-info-cell .game-code {
        font-size: 0.5625rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .version-badge,
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .version-badge {
        font-size: 0.5rem;
        padding: 0.125rem 0.25rem;
    }

    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(4) .env-label,
    #page-one-click-deploy .comparison-table-container .data-table tbody tr td:nth-child(6) .env-label {
        font-size: 0.4375rem;
    }

    /* 佈署操作列 */
    #page-one-click-deploy .deploy-action-bar {
        padding: 0.5rem;
    }

    #page-one-click-deploy .deploy-summary {
        font-size: 0.625rem;
    }

    #page-one-click-deploy .deploy-action-bar .btn-lg {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}