/**
 * 後台響應式 - 小型手機尺寸（30rem / 480px）的全域調整
 *
 * 由 admin-responsive.css 依原行序拆出；載入順序見 src/lib/assets.ts 的
 * ADMIN_STYLES，順序即 cascade 順序，不可調換。
 */

/* ===== 小型手機尺寸 (max-width: 30rem / 480px) ===== */
@media (max-width: 30rem) {
    /* Header 進一步精簡 */
    .admin-header {
        padding: 0.5rem;
    }

    .admin-page .sidebar-toggle {
        padding: 0.375rem;
        margin-right: 0.5rem;
    }

    .admin-header .header__logo img {
        max-height: 1.5rem;
    }

    .admin-header .header__logo h1 {
        font-size: 0.875rem;
    }

    .admin-header .header__icon {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        padding: 0;
        line-height: 1;
    }

    .admin-header .theme-toggle {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        order: 1;
        padding: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 側邊欄全螢幕寬度 (後台專用) */
    /* 收起時的位移由 viewport-desktop.css 以 translateX(-100%) 處理，隨寬度自動對齊 */
    .admin-page .sidebar {
        width: 85%;
        max-width: 16rem;
    }

    /* 側邊欄導航 - 減少內距 */
    .admin-page .sidebar-nav {
        padding: 0.5rem 0;
    }

    /* 導航項目 - 緊湊間距 */
    .admin-page .nav-item {
        margin: 0.125rem 0.375rem;
    }

    /* 導航連結 - 優化觸控區域和視覺 */
    .admin-page .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
        border-radius: 0.375rem;
    }

    /* 導航圖標 - 縮小尺寸 */
    .admin-page .nav-link i {
        width: 1.25rem;
        margin-right: 0.625rem;
        font-size: 1rem;
    }

    /* 導航文字 */
    .admin-page .nav-link span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 主內容區域 */
    .admin-main {
        padding: 0.5rem;
    }

    /* 頁面標題 - 緊湊版 */
    .page-header {
        margin-bottom: 0.75rem;
    }

    .page-header h2 {
        font-size: 1rem;
        gap: 0.375rem;
    }

    .page-header h2 i {
        font-size: 0.875rem;
    }

    .page-subtitle {
        font-size: 0.6875rem;
        margin-top: 0.125rem;
    }

    /* 統計卡片 2x2 網格 - 緊湊版 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.625rem 0.75rem;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .stat-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .stat-info {
        min-width: 0;
    }

    .stat-info h3 {
        font-size: 1.125rem;
        line-height: 1.2;
    }

    .stat-info p {
        font-size: 0.625rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 快捷操作 - 緊湊版 */
    .quick-actions {
        padding: 0.75rem;
    }

    .quick-actions h3 {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 0.375rem;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }

    .action-btn i {
        font-size: 0.875rem;
    }

    /* 開發部屬管理 - 緊湊版（維持橫排，放不下才換行） */
    .dev-deploy-row {
        gap: 0.5rem;
    }

    .backend-brand-list {
        padding-left: 0;
        gap: 0.5rem;
    }

    .backend-brand-group {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* 三個品牌標籤等寬，讓各列按鈕的起始位置對齊 */
    .backend-brand-label {
        min-width: 4.25rem;
        padding: 0.375rem 0.5rem;
    }

    .backend-env-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* 最近活動 - 緊湊版 */
    .recent-activity {
        padding: 0.75rem;
    }

    .recent-activity h3 {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    /* 遊戲卡片 - 水平列表式佈局 */
    .games-grid {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }

    .toolbar-right .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.375rem;
    }

    .game-card-admin {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem;
        padding: 0.625rem;
        align-items: start;
    }

    .game-card-image {
        width: 70px;
        height: 70px;
        border-radius: 0.375rem;
    }

    .game-card-body {
        gap: 0.2rem;
    }

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

    .game-id,
    .game-project,
    .game-sort {
        font-size: 0.6875rem;
    }

    .game-env-status {
        gap: 0.15rem;
        margin-top: 0.15rem;
    }

    .env-badge-full {
        font-size: 0.5rem;
        padding: 0.1rem 0.2rem;
    }

    .game-card-actions {
        gap: 0.25rem;
    }

    .game-card-actions .btn-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    /* 工具列 */
    .toolbar {
        gap: 0.5rem;
    }

    .toolbar-right {
        gap: 0.5rem;
    }

    .view-toggle {
        padding: 0.125rem;
    }

    .view-btn {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Modal 彈窗樣式（保持彈窗形式，不全屏蓋板） */
    .modal-content {
        width: 95%;
        max-width: 24rem;
        max-height: 85vh;
        margin: 0.5rem;
        border-radius: 0.75rem;
    }

    .modal-content.modal-sm,
    .modal-sm .modal-content {
        max-width: 20rem;
    }

    .modal-content.modal-lg,
    .modal-lg .modal-content,
    .modal-content.modal-xl,
    .modal-xl .modal-content,
    .modal-content.modal-game,
    .modal-game .modal-content {
        max-width: 95%;
        width: 95%;
    }

    /* ===== 遊戲彈窗 - 小螢幕優化 ===== */
    #gameModal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }

    #gameModal .modal-header {
        flex-shrink: 0;
        padding: 0.75rem 1rem;
    }

    #gameModal .modal-header h3 {
        font-size: 1rem;
    }

    #gameModal .modal-body {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        padding: 0.75rem 1rem;
        gap: 0.625rem;
    }

    #gameModal .modal-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background-color: #1e1e1e;
        border-top: 1px solid #2a2a2a;
        padding: 0.75rem 1rem;
        flex-direction: row;
        gap: 0.5rem;
    }

    .light-theme #gameModal .modal-footer {
        background-color: #fff;
        border-top-color: #e0e0e0;
    }

    #gameModal .modal-footer .btn {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    /* 遊戲圖片預覽區 - 保持橫向但更緊湊 */
    .game-image-preview-section {
        flex-direction: row;
        gap: 0.75rem;
        padding-bottom: 0.625rem;
        margin-bottom: 0.625rem;
    }

    .game-image-preview {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }

    .game-image-preview i {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .game-image-preview span {
        font-size: 0.5625rem;
    }

    .game-image-input-group label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    #gameModal .input-with-button {
        flex-direction: column;
        gap: 0.375rem;
    }

    #gameModal .input-with-button .form-input {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    #gameModal .input-with-button .btn-sm {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    /* 表單行 - 保持雙欄 */
    #gameModal .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    #gameModal .form-group label {
        font-size: 0.75rem;
    }

    #gameModal .form-input {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }

    #gameModal textarea.form-input {
        min-height: 2.5rem;
    }

    /* 環境狀態 - 2x2 網格 */
    #gameModal .env-status-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
        padding: 0.5rem;
    }

    #gameModal .checkbox-label {
        font-size: 0.75rem;
        gap: 0.375rem;
        padding: 0.25rem 0;
    }

    #gameModal .checkmark {
        width: 1.125rem;
        height: 1.125rem;
    }

    .modal-header h3 {
        font-size: 1rem;
    }

    .modal-body {
        max-height: calc(85vh - 8rem);
        overflow-y: auto;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Config / GlobalConfig Modal 手機版優化 - 確保底部按鈕可見 */
    #configModal .modal-content,
    #globalConfigModal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }

    #configModal .modal-header,
    #globalConfigModal .modal-header {
        flex-shrink: 0;
    }

    #configModal .modal-body,
    #globalConfigModal .modal-body {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    #globalConfigModal .modal-body {
        padding: 0.75rem;
    }

    #configModal .modal-footer,
    #globalConfigModal .modal-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background-color: #1e1e1e;
        border-top: 1px solid #2a2a2a;
        padding: 0.75rem 1rem;
    }

    .light-theme #configModal .modal-footer,
    .light-theme #globalConfigModal .modal-footer {
        background-color: #fff;
        border-top-color: #e0e0e0;
    }

    /* GlobalConfig 環境資訊手機版 */
    #globalConfigModal .global-config-env-info {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    #globalConfigModal .global-config-env-info .env-label {
        font-size: 0.8125rem;
    }

    /* GlobalConfig 表格改為卡片式佈局 */
    #globalConfigModal .global-config-table-wrapper {
        max-height: none;
        overflow: visible;
        border: none;
    }

    #globalConfigModal #globalConfigTable {
        display: block;
        min-width: unset;
    }

    #globalConfigModal #globalConfigTable thead {
        display: none;
    }

    #globalConfigModal #globalConfigTable tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #globalConfigModal #globalConfigTable tbody tr {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.375rem 0.625rem;
        padding: 0.625rem;
        background: #252530;
        border-radius: 0.5rem;
        border: 1px solid #333;
        align-items: center;
    }

    .light-theme #globalConfigModal #globalConfigTable tbody tr {
        background: #f9fafb;
        border-color: #e5e7eb;
    }

    /* 縮圖欄位 - 跨行 */
    #globalConfigModal #globalConfigTable tbody tr td:nth-child(1) {
        grid-row: 1 / 3;
        padding: 0;
    }

    /* 專案代碼欄位 - 第一行 */
    #globalConfigModal #globalConfigTable tbody tr td:nth-child(2) {
        padding: 0;
        font-size: 0.75rem;
        color: #9ca3af;
    }

    /* 遊戲代碼欄位 - 第二行 */
    #globalConfigModal #globalConfigTable tbody tr td:nth-child(3) {
        grid-column: 2;
        padding: 0;
    }

    #globalConfigModal #globalConfigTable tbody tr td:nth-child(3) .global-config-game-code {
        font-size: 0.875rem;
        font-weight: 600;
    }

    /* 顯示名稱欄位 - 第三行，跨滿 */
    #globalConfigModal #globalConfigTable tbody tr td:nth-child(4) {
        grid-column: 1 / -1;
        padding: 0;
    }

    #globalConfigModal #globalConfigTable tbody tr td:nth-child(4)::before {
        content: '名稱：';
        font-size: 0.6875rem;
        color: #6b7280;
        margin-right: 0.25rem;
    }

    /* 版本欄位 - 右側 */
    #globalConfigModal #globalConfigTable tbody tr td:nth-child(5) {
        grid-column: 3;
        grid-row: 1 / 3;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #globalConfigModal #globalConfigTable tbody tr td:nth-child(5) .version-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }

    #globalConfigModal .global-config-version-input {
        max-width: 100px;
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    #globalConfigModal .global-config-name-input {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* 操作欄位（編輯模式） */
    #globalConfigModal #globalConfigTable tbody tr td:nth-child(6) {
        grid-column: 3;
        grid-row: 1 / 3;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* 編輯模式下的佈局調整 */
    #globalConfigModal #globalConfigTable tbody tr:has(td:nth-child(6)) {
        grid-template-columns: 40px 1fr auto auto;
    }

    #globalConfigModal #globalConfigTable tbody tr:has(td:nth-child(6)) td:nth-child(5) {
        grid-row: 1 / 3;
    }

    #globalConfigModal #globalConfigTable tbody tr:has(td:nth-child(6)) td:nth-child(6) {
        grid-column: 4;
        grid-row: 1 / 3;
        margin-left: 0.375rem;
    }

    /* 新增遊戲按鈕區 */
    #globalConfigModal .global-config-add-row {
        margin-bottom: 0.5rem;
    }

    /* 表單元素更大的觸控區域 */
    .form-input {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    select.form-input {
        padding: 0.75rem 1rem;
    }

    .checkbox-label {
        padding: 0.5rem 0;
    }

    .checkbox-label .checkmark {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* 表格最小寬度 */
    .data-table {
        min-width: 32rem;
    }

    /* ===== 遊戲版本表格卡片 - 小螢幕優化 (4列 Grid) ===== */
    #versionTable {
        min-width: unset;
    }

    #versionTable tbody tr {
        padding: 0.5rem;
        column-gap: 0.375rem;
        row-gap: 0.25rem;
    }

    /* 縮圖 - 縮小 */
    #versionTable tbody tr td:nth-child(1) img,
    #versionTable tbody tr td:nth-child(1) > div {
        width: 36px !important;
        height: 36px !important;
    }

    /* 顯示名稱(代碼) - 縮小 */
    #versionTable tbody tr td:nth-child(2) {
        font-size: 0.75rem;
    }

    #versionTable tbody tr td:nth-child(2) .project-code-suffix {
        font-size: 0.625rem;
    }

    /* 狀態圖示 - 小螢幕 */
    #versionTable tbody tr td:nth-child(5) .status-icon {
        width: 20px;
        height: 20px;
        font-size: 0.625rem;
    }

    /* 版本徽章 - 縮小 */
    #versionTable .version-badge {
        padding: 0.125rem 0.375rem;
        font-size: 0.5625rem;
    }

    /* 按鈕 - 縮小 */
    #versionTable tbody tr td:nth-child(8) .btn,
    #versionTable tbody tr td:nth-child(9) .btn {
        padding: 0.1875rem 0.375rem;
        font-size: 0.5rem;
    }

    /* ===== 遊戲版本管理頁面 - 小螢幕保持顯示 ===== */
    /* 環境頁籤文字保持顯示 */
    #page-game-versions .env-tab span {
        display: inline;
    }

    #page-game-versions .env-tab {
        padding: 0.5rem 0.25rem;
        font-size: 0.625rem;
    }

    #page-game-versions .env-tab i {
        font-size: 0.6875rem;
    }

    /* 品牌頁籤文字保持顯示 */
    #page-game-versions .brand-tab span {
        display: inline;
    }

    #page-game-versions .brand-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.6875rem;
    }

    #page-game-versions .brand-tab i {
        font-size: 0.75rem;
    }

    /* 工具列按鈕文字保持顯示 */
    #page-game-versions .toolbar-right .btn span {
        display: inline;
    }

    #page-game-versions .toolbar-right .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* 設定按鈕 */
    .settings-actions {
        flex-direction: column;
    }

    .settings-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ===== 遊戲彈窗 - 極小螢幕優化 (30rem / 480px) ===== */
    #gameModal .modal-content {
        max-height: 92vh;
    }

    #gameModal .modal-header {
        padding: 0.625rem 0.75rem;
    }

    #gameModal .modal-header h3 {
        font-size: 0.9375rem;
    }

    #gameModal .modal-body {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    #gameModal .modal-footer {
        padding: 0.625rem 0.75rem;
    }

    #gameModal .modal-footer .btn {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }

    /* 遊戲圖片預覽區 - 小螢幕縮小 */
    .game-image-preview-section {
        gap: 0.625rem;
    }

    .game-image-preview {
        width: 70px;
        height: 70px;
        min-width: 70px;
    }

    .game-image-preview i {
        font-size: 1rem;
    }

    .game-image-preview span {
        font-size: 0.5rem;
    }

    .game-image-input-group label {
        font-size: 0.6875rem;
    }

    /* 表單輸入框 - 小螢幕 */
    #gameModal .form-row {
        gap: 0.375rem;
    }

    #gameModal .form-group label {
        font-size: 0.6875rem;
    }

    #gameModal .form-input {
        padding: 0.4375rem 0.5rem;
        font-size: 0.75rem;
    }

    #gameModal textarea.form-input {
        min-height: 2rem;
    }

    /* 環境狀態 - 4列緊湊 */
    #gameModal .env-status-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.25rem;
        padding: 0.375rem;
    }

    #gameModal .checkbox-label {
        font-size: 0.6875rem;
        gap: 0.25rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #gameModal .checkmark {
        width: 1rem;
        height: 1rem;
    }

    /* Toast 通知位置調整 */
    .toast-container {
        top: auto;
        bottom: 1rem;
        right: 0.5rem;
        left: 0.5rem;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    /* 分頁按鈕 */
    .pagination {
        flex-wrap: wrap;
    }

    .pagination button {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* 環境頁籤 */
    .env-tabs {
        width: 100%;
    }

    .env-tab {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.5rem;
        font-size: 0.75rem;
    }

    .env-tab span {
        display: none;
    }

    .env-tab i {
        font-size: 1rem;
        margin: 0;
    }

    /* 活動列表 */
    .activity-item {
        padding: 0.625rem;
    }

    .activity-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .activity-content p {
        font-size: 0.8125rem;
    }

    /* 遊戲選擇卡片 - 中等手機優化 */
    .games-selection {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }

    .game-checkbox {
        padding: 0.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    .game-checkbox input[type="checkbox"] {
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0;
        margin-bottom: 0.25rem;
    }

    .game-checkbox-icon {
        width: 48px;
        height: 48px;
    }

    .game-checkbox-info {
        gap: 0.1rem;
    }

    .game-code-line {
        font-size: 0.65rem;
    }

    .game-project-code {
        font-size: 0.6rem;
    }

    .game-versions-container {
        gap: 0.25rem;
    }

    .game-version-display {
        font-size: 0.55rem;
    }
}