/* PapaRadar Responsive Module - 響應式設計模組 */
/*
修改紀錄（chart-container 高度方案）:
2025-10-07
1. ≥1200px：min-height 提升為 800px （原 600px）
2. ≥1440px：新增動態高度 height: calc(100vh - 200px)，並保留 min-height:800px
   - 目的：在大型桌面螢幕自適應填滿視窗，可視上方導航 / 控制區約 200px 空間
3. 保留較小解析度 (行動 / 中筆電) 原有最小高度策略（400 / 500 / 600 依既有 media query）
後續可調參數：
- calc(100vh - 200px) 中 200 可依實際頁首與控制區總高度調整 (建議 180~220 測試)
- 若 1920px 以上需要額外放大，可再添加 @media (min-width:1920px) 覆蓋
*/

/* Mobile mode switcher - 桌面版隱藏 */
.mode-mobile-nav {
    display: none;
}

/* 🔥 手機專用的力道欄 - 電腦版隱藏 */
.mobile-power-column {
    display: none;
}

/* Mobile mode switcher styles - 手機版顯示 */
@media (max-width: 767px) {
    .mode-mobile-nav {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        margin: 6px 0 10px 0;
        padding: 4px;
        background: rgba(30, 41, 59, 0.85);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid var(--border-color, #334155);
        border-radius: 12px;
        position: sticky;
        top: 0;
        z-index: 8;
        box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.45);
        /* 防止內容撐大容器 */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mode-mobile-nav .nav-btn {
        /* 關鍵：使用flex確保等寬，每個按鈕佔用相同空間 */
        flex: 1 1 0;
        max-width: calc(33.333% - 3px);
        min-width: 0;
        font-size: 11px;
        padding: 8px 2px;
        line-height: 1.15;
        background: linear-gradient(160deg, #1d2532, #151c26);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: var(--text-secondary, #94a3b8);
        border-radius: 8px;
        font-weight: 600;
        letter-spacing: 0;
        transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        white-space: nowrap;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    .mode-mobile-nav .nav-btn:active {
        transform: translateY(1px);
    }

    .mode-mobile-nav .nav-btn.active {
        background: linear-gradient(140deg, var(--primary-accent, #2563eb), #1d4ed8);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .mode-mobile-nav .nav-btn:not(.active):hover {
        background: #223044;
        color: var(--text-primary, #e2e8f0);
    }

    /* 手機版區塊顯示控制由 mode-mobile.js 使用 inline style 處理，不需要額外 CSS */
}

/* 包含：手機版、平板版、桌面版響應式調整 */

/* ===== 手機版響應式 (≤ 767px) ===== */
@media screen and (max-width: 767px) {

    /* ===== 頂部調整 - 手機版緊湊布局 ===== */
    .header-unified {
        flex-wrap: nowrap;
        padding: var(--space-xs);
        min-height: 42px;
        gap: var(--space-xs);
        align-items: center;
    }

    .header-left {
        order: 1;
        position: relative;
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-start;
        margin-bottom: 0;
        gap: var(--space-xs);
    }

    /* 漢堡選單移到logo左邊 - dashboard_public4 風格 */
    .menu-toggle {
        display: flex;
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10000;
        padding: 3px;
    }

    .menu-toggle span {
        width: 20px;
        height: 2px;
        background-color: #FFFFFF;
        margin: 2px 0;
        transition: 0.3s;
    }

    .logo-animated {
        flex-shrink: 0;
        margin-left: 35px;
        /* 為漢堡按鈕留空間 */
    }

    .logo-image,
    .logo-image-main {
        height: 28px;
    }

    .logo-text-main {
        font-size: 14px;
    }

    /* ===== 導航選單 - dashboard_public4 風格 ===== */
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.98);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 80px;
        gap: 25px;
        transition: left 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        margin: 0;
        list-style: none;
    }

    .nav-link {
        font-size: 16px;
        padding: 12px 30px;
        min-width: 200px;
        text-align: center;
        display: block;
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-md);
        transition: var(--transition-normal);
    }

    .nav-link:hover {
        background: var(--accent-color);
        color: var(--primary-bg);
        transform: translateX(10px);
    }

    /* ===== 右側區域調整 - 使用剩餘空間 ===== */
    .header-right {
        order: 2;
        flex: 1;
        min-width: 0;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 4px;
        align-items: center;
    }

    .time-display {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    #currentTimeLabel {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-info-compact {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        padding: var(--space-xs) 6px;
        max-width: 160px;
    }

    .user-email {
        font-size: 11px;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .expiry-date {
        font-size: 9px;
    }

    .desktop-expiry {
        display: none;
    }

    .mobile-expiry {
        display: inline;
    }

    .toggle-btn {
        padding: 2px var(--space-xs);
        font-size: 9px;
    }

    #refreshBtn {
        order: 3;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: var(--text-sm);
    }

    /* ===== 手機版 data-group 轉置優化 ===== */
    .data-group {
        margin-bottom: var(--space-sm);
        padding: 3px;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .data-group-title {
        font-size: 11px;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    /* 🔥 市場現況表格 - CSS Grid 佈局 */
    /* 台指期大區塊在左，其他4項在中間 2×2 格子，右側新增力道/關鍵價 */
    .fancytable {
        display: grid !important;
        grid-template-columns: 1fr 1.2fr 0.6fr 1.2fr;
        /* 4 列：台指期(1fr)、加權(1.2fr)、價差(0.6fr窄)、力道(1.2fr) */
        grid-template-rows: auto auto;
        /* 2 行 */
        gap: 4px;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 🔥 關鍵：讓 tbody 變透明，讓 tr 直接作為 grid 子元素 */
    .fancytable tbody {
        display: contents !important;
    }

    /* 台指期 (第1個tr) - 佔左側整個高度 */
    .fancytable tr:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        /* 跨 2 行 */
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 🔥 置中 */
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 6px;
    }

    .fancytable tr:nth-child(1) .header-cell {
        font-size: 12px;
        font-weight: 600;
        color: var(--accent-color);
        padding: 2px 4px;
        min-height: auto;
        background: transparent;
        border-bottom: none;
    }

    .fancytable tr:nth-child(1) td:last-child {
        font-size: 20px !important;
        font-weight: 700 !important;
        padding: 4px;
        line-height: 1.1;
        text-align: center;
        /* 🔥 置中 */
    }

    /* 加權 (第2個tr) - 右上角第1格 */
    .fancytable tr:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column;
        padding: 2px;
    }

    /* 價差 (第4個tr) - 右上角第2格 */
    .fancytable tr:nth-child(4) {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column;
        padding: 2px;
    }

    /* 周小台 (第3個tr) - 右下角第1格 */
    .fancytable tr:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column;
        padding: 2px;
    }

    /* 震幅 (第5個tr) - 中間區域右下角 */
    .fancytable tr:nth-child(5) {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column;
        padding: 2px;
    }

    /* 🔥 即時力道 (第6個tr) - 最右側上格 */
    .fancytable tr:nth-child(6) {
        grid-column: 4 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column;
        padding: 2px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 🔥 關鍵價 (第7個tr) - 最右側下格 */
    .fancytable tr:nth-child(7) {
        grid-column: 4 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column;
        padding: 2px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 🔥 手機版專用的力道欄 - 在手機版顯示 */
    .mobile-power-column {
        display: flex !important;
        flex-direction: column;
    }

    /* 🔥 可點擊的即時力道/關鍵價格子 */
    .mobile-power-clickable {
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .mobile-power-clickable:active {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* 右側 4 格的共通樣式 - 小而緊湊 */
    .fancytable tr:not(:first-child) .header-cell {
        font-size: 9px;
        padding: 1px 2px;
        min-height: auto;
        background: transparent;
        border-bottom: none;
        color: var(--text-muted, #666);
    }

    .fancytable tr:not(:first-child) td:last-child {
        font-size: 13px !important;
        font-weight: 600;
        padding: 2px;
        text-align: center;
        white-space: nowrap;
        /* 🔥 不換行 */
    }

    /* fancytable_sub 和 fancytable_gap 保持原來的轉置樣式 */
    .fancytable_sub,
    .fancytable_gap {
        display: table;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px;
        border-collapse: separate;
        border-spacing: 0;
        margin: 0 !important;
        box-sizing: border-box !important;
        table-layout: auto;
    }

    .fancytable_sub tr,
    .fancytable_gap tr {
        display: table-cell;
        vertical-align: top;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        padding: 0;
        width: auto;
    }

    .fancytable_sub tr:last-child,
    .fancytable_gap tr:last-child {
        border-right: none;
    }

    /* 標題儲存格 - 基礎樣式 */
    .header-cell {
        display: block;
        padding: 3px 2px;
        font-size: 9px;
        text-align: center;
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        line-height: 1.2;
        font-weight: 500;
        color: var(--text-secondary);
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    /* 數值儲存格 - 基礎樣式 */
    .fancytable td:last-child,
    .fancytable_sub td:last-child,
    .fancytable_gap td:last-child {
        display: block;
        text-align: center;
        padding: 6px 4px;
        font-size: 14px;
        line-height: 1.3;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.02);
        border-radius: 3px;
        margin-top: 2px;
        width: 100%;
    }

    .gap-value {
        display: block;
        font-size: 11px;
        padding: 5px 4px;
        line-height: 1.3;
        text-align: center;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: var(--accent-color);
        width: 100%;
    }

    /* 左側面板切換按鈕 - 浮動按鈕設計 */
    .left-panel-toggle {
        position: fixed;
        top: 2px;
        /* 相對於 leftContainer 的頂部 */
        right: 12px;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border-radius: 50%;
        z-index: 900;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .left-panel-toggle .toggle-icon {
        font-size: 16px;
        margin: 0;
    }

    .left-panel-toggle .toggle-text {
        display: none;
    }

    .left-panel-toggle .toggle-arrow {
        font-size: 10px;
        margin: 0;
    }

    /* 浮動按鈕展開/收合狀態 */
    .left-panel-toggle:not(.collapsed) {
        background: linear-gradient(135deg, var(--accent-color), #0099cc);
        border-color: var(--accent-color);
    }

    .left-panel-toggle.collapsed {
        background: var(--card-bg);
        border-color: var(--border-color);
        margin-bottom: 0;
        /* 收合時移除下方空白 */
    }

    .left-panel-content {
        padding: 0;
        gap: 6px;
    }

    /* 收合狀態時移除 leftContainer 的底部空白 */
    #leftContainer:has(.left-panel-toggle.collapsed) {
        gap: 0;
        margin-bottom: 0;
    }

    /* ===== 主容器水平滾動修正 ===== */
    body {
        overflow-x: hidden;
        /* 防止頁面水平滾動 */
        width: 100vw;
        max-width: 100vw;
    }

    /* 手機版：資訊面板收合後鎖定高度並禁止滾動 */
    #leftContainer:has(.left-panel-toggle.collapsed) {
        max-height: 56px;
        /* 與按鈕高度接近，僅顯示標題列 */
        overflow: hidden !important;
    }

    .main-container {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding: 0 2px;
        /* 極小邊距 */
    }

    #leftContainer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* 手機版三欄布局調整 */
    #container {
        flex-direction: column !important;
        /* 手機版改為垂直排列 */
        height: auto !important;
    }

    #leftContainer {
        order: 1 !important;
        /* 左側面板在最上面 */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        /* 移除桌面版的高度限制 */
        margin: 0 !important;
        /* 移除左右邊距 */
        padding: 10px !important;
        /* 減少內邊距 */
        border-radius: 0 !important;
        /* 移除圓角以完全填滿 */
        box-sizing: border-box !important;
        /* 確保 padding 計入總寬度 */
    }

    /* 手機版 middleContainer (原 rightContainer) 允許垂直滾動 */
    #middleContainer {
        position: relative !important;
        /* 作為 absolute 定位按鈕的參考點 */
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        padding: 0 !important;
        overflow: auto !important;
        /* 強制覆蓋任何 overflow: hidden */
        overflow-x: hidden !important;
        /* 防止水平滾動 */
        overflow-y: auto !important;
        /* 強制垂直滾動 */
        -webkit-overflow-scrolling: touch !important;
        /* iOS 平滑滾動 */
        touch-action: pan-y;
        /* 只允許垂直滑動 */
        box-sizing: border-box !important;
        order: 2 !important;
        /* 確保在 leftContainer 之後 */
    }

    /* 手機版右側控制面板 - 改用 transform 控制顯示/隱藏 */
    #rightControlPanel {
        /* 不再使用 display: none，改由 JS 透過 transform 控制 */
        display: flex !important;
        transform: translateX(100%) !important;
        /* 預設隱藏在螢幕外 */
    }

    /* 當面板被 JS 標記為 visible 時顯示 */
    #rightControlPanel.visible {
        transform: translateX(0) !important;
    }

    /* 手機版週期選擇器樣式 */
    .period-select {
        flex: 1;
        min-width: 60px;
        height: 32px;
        padding: 4px 8px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    /* 手機版分析師切換按鈕 */
    .people-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 64px;
        height: 32px;
        padding: 4px 12px;
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
        border-radius: var(--radius-sm);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    .people-toggle:active {
        transform: scale(0.95);
    }

    .people-toggle .toggle-icon {
        font-size: 16px;
    }

    .people-toggle .toggle-text {
        font-weight: 700;
    }

    /* ===== 手機版智能控制佈局 ===== */
    .controls-container {
        margin: 0 2px;
        /* 減少左右邊距 */
        padding: var(--space-xs);
        overflow-x: hidden;
        /* 防止水平滾動 */
    }

    .basic-controls {
        display: flex;
        flex-direction: row;
        gap: 2px;
        /* 縮小間距 */
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: var(--space-md);
        padding: var(--space-xs);
        /* 減少內邊距 */
        border-radius: var(--radius-md);
        overflow-x: hidden;
        /* 防止水平滾動 */
    }

    .date-period-controls {
        display: contents;
    }

    .axis-controls {
        display: contents;
    }

    /* 智能寬度分配 - 日期控制需要更多空間 */
    .date-control-group {
        flex: 0 0 30%;
        /* 日期控制佔 30% - 更寬空間 */
        min-width: 120px;
        /* 確保最小寬度足夠 */
        max-width: 140px;
    }

    .period-control-group {
        flex: 0 0 20%;
        /* 週期控制佔 20% */
        min-width: 80px;
        max-width: 100px;
    }

    .time-axis-control,
    .price-axis-control {
        flex: 0 0 15%;
        /* 軸控制各佔 15% */
        min-width: 60px;
        max-width: 80px;
    }

    .people-controls {
        flex: 0 0 20%;
        /* 人員控制佔 20% */
        min-width: 80px;
        max-width: 100px;
    }

    /* 確保所有控制組都是垂直布局 */
    .date-control-group,
    .period-control-group,
    .time-axis-control,
    .price-axis-control,
    .people-controls {
        display: flex;
        flex-direction: column;
        gap: 2px;
        /* 縮小內部間距 */
        padding: var(--space-xs);
        /* 減少內邊距 */
        border-radius: var(--radius-sm);
        /* 稍微減少圓角 */
        /* 確保所有控制項高度和對齊一致 */
        box-sizing: border-box;
        min-height: auto;
        align-items: center;
    }

    /* 控制按鈕尺寸調整 */
    .period-btn {
        padding: 3px 4px;
        font-size: 11px;
        min-width: 24px;
        height: 28px;
        line-height: 1.1;
    }

    .axis-btn {
        padding: 2px 3px;
        font-size: 12px;
        width: 24px;
        height: 28px;
        min-width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .people-btn {
        padding: 2px 3px;
        font-size: 12px;
        height: 28px;
        line-height: 1.1;
        min-width: 24px;
    }

    .date-nav-btn {
        padding: 2px 3px;
        min-width: 24px;
        height: 28px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .date-display {
        padding: 3px 4px;
        font-size: 11px;
        height: 28px;
        line-height: 1.1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 35px;
        flex: 1;
        /* 讓日期顯示填滿可用空間 */
        text-align: center;
    }

    /* 手機版專用：日期輸入包裝器優化 */
    .date-input-wrapper {
        display: flex;
        align-items: center;
        gap: 2px;
        width: 100%;
    }

    /* 控制標籤手機版優化 */
    .control-label {
        font-size: 10px;
        margin-bottom: 3px;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 週期選擇器手機版樣式 */
    .period-select {
        width: 100%;
        font-size: 11px;
        height: 28px;
        text-align: center;
        padding: 0 4px;
    }

    /* 控制標籤調整 */
    .control-label {
        font-size: 11px;
        margin-bottom: 2px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }

    /* 按鈕群組間距調整 */
    .period-buttons,
    .axis-buttons,
    .people-buttons {
        gap: 1px;
        justify-content: center;
    }

    .period-buttons {
        flex-wrap: wrap;
    }

    .people-buttons {
        flex-wrap: wrap;
    }

    /* ===== 表格優化 ===== */
    .optable {
        font-size: 12px;
        /* 從10px增加到12px */
    }

    .optable th,
    .optable td {
        padding: var(--space-xs);
        font-weight: 500;
        /* 輕微加粗提高可讀性 */
    }

    /* 強化optable中的數字顯示 */
    .optable td:not(:first-child) {
        font-weight: 600;
        /* 數字列加粗 */
        font-size: 13px;
        /* 數字比表頭大1px */
    }

    /* 手機版表格標籤優化 */
    .fancytable td:first-child,
    .fancytable_sub td:first-child,
    .fancytable_gap td:first-child {
        font-weight: 500 !important;
        /* 標籤適度加粗 */
        color: var(--accent-color) !important;
        /* 使用主題色 */
        font-size: 12px !important;
        /* 標籤字體大小 */
    }

    /* 手機版重要數字突出顯示 */
    .fancytable td[id*="price"],
    .fancytable td[id*="close"],
    .fancytable td[id*="diff"] {
        font-weight: 700 !important;
        /* 價格相關數字特別加粗 */
        font-size: 15px !important;
        /* 關鍵數字更大 */
    }

    /* ===== 手機版 tab-content 和圖表優化 ===== */

    /* Tab 容器：使用 flex 布局填滿剩餘空間 */
    .tab-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        /* 填滿 middleContainer 剩餘空間 */
        overflow: hidden;
    }

    .tab-content .content {
        display: none;
        /* 預設隱藏 */
    }

    .tab-content .content.active {
        display: flex;
        flex-direction: column;
        flex: 1;
        /* 填滿 tab-content 空間 */
        overflow-y: auto;
        padding: var(--space-xs);
    }

    /* Tab1: K線圖容器使用 flex 填滿 */
    #tab1.content.active {
        display: flex;
        flex-direction: column;
    }

    .chart-container {
        flex: 1;
        /* 填滿剩餘空間 */
        min-height: 600px;
        /* 最小高度為70%的視窗高度 */
        overflow: hidden;
    }

    #chartContainer,
    #kbarContainer_review {
        flex: 1;
        height: 100% !important;
        width: 100%;
    }

    /* Tab2, Tab3, Tab3_atm: 嵌入圖表使用 flex 填滿 */
    #tab2.content.active,
    #tab3.content.active,
    #tab3_atm.content.active,
    #tab_opcross.content.active {
        display: flex;
        flex-direction: column;
        padding: 0;
        /* 移除 padding 讓 iframe 完整顯示 */
    }

    .chart-embed {
        width: 100%;
        min-height: 600px;
        /* 最小高度確保內容可見 */
        height: 100%;
        /* 填滿父容器 */
        display: flex;
        /* 使用flex布局 */
        flex: 1;
        /* 自動伸展 */
        overflow: visible;
        /* 允許內容完整顯示 */
    }

    .chart-embed iframe {
        width: 100%;
        min-height: 600px;
        /* 與父容器一致 */
        height: 100%;
        /* 填滿父容器 */
        flex: 1;
        /* 自動伸展 */
        border: none;
    }
}

/* ===== 平板版響應式 (768px - 1023px) ===== */
@media screen and (min-width: 768px) {

    /* 響應式顯示切換 - 桌面版和平板版 */
    .desktop-only {
        display: flex !important;
        /* 改為 flex 以保持原有的佈局 */
    }

    .mobile-only {
        display: none !important;
    }

    /* 隱藏手機版工具列 */
    .mobile-toolbar {
        display: none;
    }

    /* 隱藏手機版左側面板切換按鈕 */
    .left-panel-toggle {
        display: none;
    }

    /* 確保桌面版左側面板內容始終顯示 */
    .left-panel-content {
        max-height: none !important;
        opacity: 1 !important;
    }

    body {
        padding-bottom: 0;
    }

    #container {
        flex-direction: row;
        /* 恢復左右排列 */
        padding: 2px var(--space-xs);
        /* 從 var(--space-xs) var(--space-md) 進一步縮小到 2px var(--space-xs) */
        gap: var(--space-xs);
        /* 從 var(--space-md) 縮小到 var(--space-xs) */
    }

    #leftContainer {
        flex: 0 0 18%;
        /* 平板版比例 */
        min-width: 200px;
        max-width: 300px;
    }

    .controls-container {
        padding: var(--space-xs) var(--space-md);
        /* 減少上下padding */
    }

    #rightContainer {
        order: 1;
        flex: 1;
    }

    /* 顯示桌面版頂部佈局 */
    .header-unified {
        flex-wrap: nowrap;
        padding: var(--space-sm) var(--space-md);
    }

    .menu-toggle {
        display: none;
    }

    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        backdrop-filter: none;
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
        gap: var(--space-sm);
        flex: 1;
    }

    .nav-link {
        font-size: var(--text-sm);
        padding: var(--space-sm) var(--space-md);
        min-width: auto;
        text-align: left;
    }

    .desktop-expiry {
        display: inline;
    }

    .mobile-expiry {
        display: none;
    }

    .user-email {
        font-size: var(--text-sm);
        max-width: none;
    }

    .toggle-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--text-xs);
    }

    /* 控制面板佈局調整 */
    .basic-controls {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-lg);
        flex-wrap: wrap;
    }

    .date-period-controls {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .date-control-group {
        flex: 0 0 auto;
        min-width: 180px;
        max-width: 220px;
    }

    .period-control-group {
        flex: 0 0 auto;
        min-width: 180px;
    }

    .axis-controls {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .time-axis-control,
    .price-axis-control {
        flex: 0 0 auto;
        min-width: 100px;
    }

    /* Grafana 框架調整 */
    .power-frames-container {
        flex-direction: row;
        gap: var(--space-sm);
    }

    .power-frame-wrapper {
        flex: 1;
    }

    /* 圖表容器高度調整 - 平板版本 */
    .chart-container {
        min-height: 500px;
        /* 改為最小高度 */
        height: auto;
        /* 讓 JS 動態設定 */
    }

    .chart-embed {
        min-height: 600px;
        /* 改為最小高度 */
        height: 100%;
        /* 填滿父容器 */
        display: flex;
        /* 使用flex布局 */
        flex: 1;
        /* 自動伸展 */
        /* 讓 JS 動態設定 */
    }

    /* 股票網格調整 */
    .stocks-container {
        grid-template-columns: repeat(4, 1fr);
    }

    /* General rule for all iframe tabs to ensure full height on tablet and desktop */
    #tab_opcross.content.active,
    #tab3.content.active,
    #tab3_atm.content.active {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0;
    }

    #tab_opcross.content.active .chart-embed,
    #tab3.content.active .chart-embed,
    #tab3_atm.content.active .chart-embed {
        flex: 1;
        /* Make the wrapper grow */
        display: flex;
        /* Turn the wrapper into a flex container */
        height: 100%;
        /* 確保高度填滿 */
        min-height: 600px;
        /* 保持最小高度 */
    }

    #tab_opcross.content.active .chart-embed iframe,
    #tab3.content.active .chart-embed iframe,
    #tab3_atm.content.active .chart-embed iframe {
        flex: 1;
        /* Make the iframe itself grow to fill the wrapper */
        width: 100%;
        height: 100%;
        /* 確保iframe高度填滿 */
        border: none;
    }
}

/* ===== 桌面版響應式 (1024px - 1439px) ===== */
@media screen and (min-width: 1024px) {
    .header-unified {
        padding: var(--space-md) var(--space-lg);
        min-height: 56px;
    }

    .logo-image {
        height: 40px;
    }

    .nav-link {
        padding: var(--space-md) var(--space-lg);
    }

    .user-info-compact {
        padding: var(--space-md);
    }

    #currentTimeLabel {
        font-size: var(--text-xl);
    }

    #container {
        max-width: none;
        margin: 0;
        padding: 2px var(--space-xs);
        /* 從 var(--space-md) var(--space-lg) 縮小到 2px var(--space-xs) */
    }

    #leftContainer {
        flex: 0 0 20%;
        /* 桌面版比例 */
        min-width: 200px;
        max-width: 350px;
    }

    /* 控制面板緊湊化 */
    .date-control-group {
        min-width: 150px;
        max-width: 180px;
    }

    .period-control-group {
        min-width: 150px;
    }

    .time-axis-control,
    .price-axis-control {
        min-width: 80px;
    }

    /* 數據群組間距 */
    .data-group {
        padding: 0.75rem;
        /* 12px */
    }

    .power-frame-wrapper {
        height: 150px;
    }

    /* 表格字型大小調整 */
    .fancytable,
    .fancytable_sub,
    .fancytable_gap {
        font-size: var(--text-base);
    }

    .optable {
        font-size: var(--text-sm);
    }
}

/* ===== 大螢幕響應式 (≥ 1440px) ===== */
@media screen and (min-width: 1440px) {
    #container {
        padding: 2px var(--space-xs);
        /* 從 var(--space-lg) 縮小到 2px var(--space-xs) 保持一致 */
    }

    #leftContainer {
        flex: 0 0 17%;
        /* 大螢幕比例 */
        min-width: 200px;
        max-width: 400px;
    }

    .power-frames-container {
        flex-direction: column;
    }

    .power-frame-wrapper {
        height: 200px;
    }

    /* 顯示更多 Grafana 框架 */
    .power-frames-container.show-both-rows .power-frame-wrapper:nth-child(3),
    .power-frames-container.show-both-rows .power-frame-wrapper:nth-child(4) {
        display: block;
    }

    /* 圖表容器更大 - 大螢幕版本 */
    .chart-container {
        min-height: 800px;
        /* 桌面版提高最小高度，填滿螢幕 */
        height: auto;
        /* 讓 JS 動態設定 */
    }

    .chart-embed {
        height: 700px;
    }
}

/* 動態高度：大型桌面螢幕 (≥1440px) 自動填滿視窗高度 */
@media screen and (min-width: 1440px) {
    .chart-container {
        /* 以視窗高度減去上方導航/控制區估計高度 (約 180px~220px 可再微調) */
        height: calc(100vh - 240px);
        /* 動態填滿剩餘空間 */
        min-height: 800px;
        /* 保持與 1200px 區間一致的最低保障高度 */
    }
}

/* ===== 超寬螢幕響應式 (≥ 1920px) ===== */
@media screen and (min-width: 1920px) {
    #container {
        max-width: 1800px;
        margin: 0 auto;
        padding: 2px var(--space-xs);
        /* 從 var(--space-xl) 縮小到 2px var(--space-xs) 保持一致 */
    }

    #leftContainer {
        flex: 0 0 25%;
        max-width: 500px;
    }

    .header-unified {
        padding: var(--space-lg) var(--space-xl);
    }

    #currentTimeLabel {
        font-size: 1.5rem;
    }

    .nav-link {
        font-size: var(--text-base);
        padding: var(--space-lg) var(--space-xl);
    }
}

/* ===== 螢幕方向響應式 ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {

    /* 橫向模式優化 */
    .mobile-toolbar {
        padding: var(--space-xs);
    }

    .mobile-tool-btn {
        padding: var(--space-xs);
        font-size: 10px;
    }

    #currentTimeLabel {
        font-size: var(--text-sm);
    }

    /* 小螢幕版本 */
    .chart-container {
        min-height: 200px;
        /* 改為最小高度 */
        height: auto;
        /* 讓 JS 動態設定 */
    }
}

/* ===== 模式控制區域響應式設計 ===== */

/* 平板版 (768px - 1199px) */
@media screen and (max-width: 1199px) and (min-width: 768px) {
    .mode-sections-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .mode-section {
        padding: var(--space-md);
    }

    .mode-buttons-row {
        gap: var(--space-xs);
    }

    .mode-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.85rem;
    }

    .custom-group {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .custom-input {
        min-width: 120px;
    }
}

/* 手機版模式控制 (≤ 767px) */
@media screen and (max-width: 767px) {

    /* 響應式顯示切換 */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .period-select {
        display: block !important;
        width: 100%;
    }

    /* 手機版控制容器 - 最小化邊距 */
    .controls-container {
        padding: var(--space-sm) var(--space-xs);
        /* 大幅縮小左右邊距 */
        margin: 0;
        /* 移除外邊距 */
    }

    .mode-controls {
        margin: var(--space-sm) 0;
        gap: var(--space-sm);
    }

    .mode-sections-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .mode-section {
        padding: var(--space-xs);
        /* 減少模式區塊內邊距 */
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin: 0;
        /* 移除外邊距 */
    }

    .mode-section-title {
        font-size: 0.8rem;
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-xs);
    }

    /* 手機版模式按鈕行 - 禁止換行，使用水平滾動 */
    .mode-buttons-row {
        display: flex;
        /* 改用 flexbox，避免 grid 的自動換行 */
        flex-wrap: nowrap;
        /* 禁止換行！ */
        overflow-x: auto;
        /* 允許水平滾動 */
        overflow-y: hidden;
        gap: var(--space-xs);
        scroll-snap-type: x mandatory;
        /* 滑動對齊 */
        -webkit-overflow-scrolling: touch;
        /* iOS 平滑滾動 */
        scrollbar-width: thin;
        /* 顯示細滾動條 */
        padding-bottom: 4px;
        /* 為滾動條留空間 */
    }

    .mode-btn {
        padding: var(--space-xs);
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 32px;
    }

    /* 自訂功能手機版 - 改為垂直堆疊，每組一行 */
    .custom-controls {
        display: flex;
        flex-direction: column;
        /* 垂直排列 */
        gap: var(--space-sm);
        /* 組之間的間距 */
        width: 100%;
    }

    .custom-group {
        display: flex;
        flex-direction: row;
        /* 橫向排列 */
        align-items: center;
        gap: var(--space-xs);
        width: 100%;
        /* 填滿寬度 */
        flex-wrap: wrap;
        /* 允許換行 - 配合components.css的兩行布局 */
        min-height: auto;
    }

    /* 自訂功能區的所有按鈕樣式已統一在 paparadar-components.css 處理 */
    /* 包括：缺口、自訂價位、自訂OP、黃金切割 */

    .custom-input,
    .custom-input-small {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    .custom-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-btn {
        flex: 1 1 auto;
        /* 讓按鈕也能伸展 */
        padding: var(--space-sm);
        font-size: var(--text-sm);
        justify-content: center;
        display: flex !important;
        /* 強制顯示 */
        align-items: center;
    }

    /* 圖標在手機版顯示，保持一致性 */
    .btn-icon {
        display: inline;
        margin-right: 4px;
    }

    .section-icon {
        display: inline;
    }

    /* 箭頭分隔符在手機版也顯示 */
    .input-separator {
        display: inline;
        flex: 0 0 auto;
    }

    /* 黃金切割樣式已統一在 paparadar-components.css 中處理 */
}

/* 小型手機 (≤ 480px) */
@media screen and (max-width: 480px) {

    /* 極小螢幕邊距最小化 */
    .controls-container {
        padding: var(--space-xs) 4px;
        /* 極小的左右邊距 */
    }

    .basic-controls {
        gap: 1px;
        /* 最小間距 */
        padding: 4px;
        /* 最小內邊距 */
        margin-bottom: var(--space-sm);
    }

    .mode-section {
        padding: 4px;
        /* 最小內邊距 */
        margin: 0 2px;
        /* 極小外邊距 */
    }

    /* 極小螢幕模式按鈕行 - 同樣禁止換行 */
    .mode-buttons-row {
        display: flex;
        /* 確保使用 flexbox */
        flex-wrap: nowrap;
        /* 禁止換行！ */
        overflow-x: auto;
        /* 允許水平滾動 */
        gap: 2px;
        /* 最小按鈕間距 */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .mode-btn {
        padding: var(--space-xs);
        font-size: 0.65rem;
        min-height: 28px;
    }

    .custom-group {
        padding: 4px;
        /* 最小內邊距 */
    }

    /* 極小螢幕基本控制優化 */
    .basic-controls {
        gap: 2px;
    }

    .date-control-group {
        flex: 0 0 32%;
        /* 稍微增加日期控制空間 */
        min-width: 110px;
    }

    .period-control-group {
        flex: 0 0 18%;
        min-width: 70px;
    }

    .time-axis-control,
    .price-axis-control {
        flex: 0 0 14%;
        min-width: 50px;
    }

    .people-controls {
        flex: 0 0 22%;
        min-width: 75px;
    }

    /* 極小螢幕按鈕尺寸 */
    .date-nav-btn {
        width: 22px;
        height: 26px;
        font-size: 11px;
    }

    .date-display {
        font-size: 10px;
        height: 26px;
        min-width: 32px;
    }

    .control-label {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .axis-btn {
        width: 22px;
        height: 26px;
        font-size: 11px;
    }

    .people-btn {
        font-size: 10px;
        height: 26px;
        padding: 2px 4px;
    }

    .period-select {
        font-size: 10px;
        height: 26px;
    }

    /* ===== 手機版 OP表優化 - 最大化螢幕利用 ===== */
    /* 參考 dashboard_public4.html 的緊湊設計 */

    #optableContainer-user .op-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
        /* 移除多餘padding */
    }

    #optableContainer-user .optable {
        font-size: 9px;
        /* 縮小字體以容納更多內容 */
        min-width: 100%;
        /* 確保表格至少填滿容器 */
    }

    #optableContainer-user .optable th,
    #optableContainer-user .optable td {
        padding: 3px 2px;
        /* 大幅縮小 padding */
        white-space: nowrap;
        min-width: unset;
        /* 移除最小寬度限制 */
    }

    /* 履約價欄位保持可讀性 */
    #optableContainer-user .strike-price {
        min-width: 42px;
        /* 稍微增加履約價欄位寬度 */
        font-size: 10px;
        /* 履約價字體稍大 */
        font-weight: 700;
        padding: 3px 4px;
    }

    /* 表頭優化 */
    #optableContainer-user .optable thead th {
        padding: 4px 2px;
        font-size: 9px;
        font-weight: 600;
    }

    /* CALL/PUT 主標題 */
    #optableContainer-user .call-header,
    #optableContainer-user .put-header,
    #optableContainer-user .power-header {
        font-size: 10px;
        padding: 5px 2px;
        font-weight: 700;
    }

    /* 數字欄位精簡顯示 */
    #optableContainer-user .optable td {
        font-size: 9px;
        line-height: 1.2;
    }

    /* OP表標題優化 */
    #optableContainer-user .optable-header {
        padding: var(--space-sm) var(--space-xs);
    }

    #optableContainer-user .optable-header h3 {
        font-size: var(--text-sm);
    }

    /* 包裝器優化 */
    #optableContainer-user.optable-wrapper {
        margin-top: var(--space-sm);
        border-radius: var(--radius-sm);
    }

    /* === Admin Tab2 手機版優化 - 套用相同的緊湊設計 === */

    #optableContainer-admin-tab2 .op-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    #optableContainer-admin-tab2 .optable {
        font-size: 9px;
        min-width: 100%;
    }

    #optableContainer-admin-tab2 .optable th,
    #optableContainer-admin-tab2 .optable td {
        padding: 3px 2px;
        white-space: nowrap;
        min-width: unset;
    }

    #optableContainer-admin-tab2 .strike-price {
        min-width: 42px;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 4px;
    }

    #optableContainer-admin-tab2 .optable thead th {
        padding: 4px 2px;
        font-size: 9px;
        font-weight: 600;
    }

    #optableContainer-admin-tab2 .call-header,
    #optableContainer-admin-tab2 .put-header,
    #optableContainer-admin-tab2 .power-header {
        font-size: 10px;
        padding: 5px 2px;
        font-weight: 700;
    }

    #optableContainer-admin-tab2 .optable td {
        font-size: 9px;
        line-height: 1.2;
    }

    #optableContainer-admin-tab2 .optable-header {
        padding: var(--space-sm) var(--space-xs);
    }

    #optableContainer-admin-tab2 .optable-header h3 {
        font-size: var(--text-sm);
    }

    #optableContainer-admin-tab2.optable-wrapper {
        margin-top: var(--space-sm);
        border-radius: var(--radius-sm);
    }

    /* ===== 手機版浮動 Tab 切換器 ===== */
    /* 只在手機版顯示，節省垂直空間 */

    .mobile-tab-switcher {
        position: absolute !important;
        left: 0 !important;
        /* top 由 JavaScript 動態計算 */
        z-index: 1041;
        /* 高於一般內容，確保不被覆蓋 */
        display: block;
        opacity: 0;
        /* 初始隱藏，定位後淡入 */
        transition: opacity 0.4s ease-in;
    }

    .mobile-tab-switcher.positioned {
        opacity: 1;
        /* 定位後顯示 */
    }

    /* 為 mobile-tab-toggle 預留左側空間（手機版） */
    @media screen and (max-width: 768px) {
        .permanent-controls {
            margin-left: 30px;
            /* 預留 mobile-tab-toggle 寬度 + 間距 */
        }

        /* 當右側面板按鈕可見時，動態添加右邊距以實現對稱 */
        body:has(#globalRightPanelToggle.positioned) .permanent-controls {
            margin-right: 30px;
        }
    }

    /* 由於原有全域樣式控制彈出選單，這段改為不使用 position: absolute 版本，保留下方官方樣式 */

    /* 浮動按鈕 */
    .mobile-tab-toggle {
        background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
        backdrop-filter: blur(10px);
        border: 1px solid #00d9ff;
        border-radius: 0 10px 10px 0;
        /* 左側貼邊，右側圓角 */
        padding: 10px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        box-shadow: -2px 0 15px rgba(0, 217, 255, 0.3);
        transition: all 0.3s ease;
        min-width: 32px;
        opacity: 1;
        /* 初始完全不透明 */
    }

    /* 1.5 秒後自動半透明 */
    .mobile-tab-toggle.auto-fade {
        opacity: 0.5;
    }

    /* hover 或 active 時恢復完全不透明 */
    .mobile-tab-toggle:hover,
    .mobile-tab-toggle:active {
        opacity: 1 !important;
    }

    /* 右側面板切換按鈕貼右側（獨立區塊避免嵌套） */
    #globalRightPanelToggle.global-right-panel-toggle {
        position: absolute !important;
        /* top 由 JavaScript 動態計算 */
        right: 0 !important;
        border-radius: 10px 0 0 10px;
        margin: 0;
        opacity: 0;
        /* 初始隱藏 */
        transition: opacity 0.4s ease-in, all 0.3s ease;
    }

    #globalRightPanelToggle.positioned {
        opacity: 1;
        /* 定位後顯示 */
    }

    /* 1.5 秒後自動半透明 */
    #globalRightPanelToggle.auto-fade {
        opacity: 0.5;
    }

    /* hover 或 active 時恢復完全不透明 */
    #globalRightPanelToggle:hover,
    #globalRightPanelToggle:active {
        opacity: 1 !important;
    }

    .mobile-tab-toggle:active {
        transform: scale(0.95);
    }

    .mobile-tab-toggle .tab-icon {
        font-size: 18px;
    }

    .mobile-tab-toggle .tab-text {
        writing-mode: vertical-rl;
        font-size: 12px;
        font-weight: 600;
        color: #00d9ff;
        letter-spacing: 2px;
    }

    /* 彈出選單 */
    .mobile-tab-menu {
        position: fixed;
        left: 48px;
        /* 從左側按鈕往右展開（按鈕寬度約 40px + 間距）*/
        top: var(--mobile-tab-top, 100px);
        /* JS 可覆蓋同步高度 */
        transform: translateY(0) translateX(0);
        background: rgba(15, 20, 25, 0.95);
        backdrop-filter: blur(12px);
        border: 1px solid #00d9ff;
        border-radius: 8px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 110px;
        box-shadow: 0 4px 20px rgba(0, 217, 255, 0.25);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .mobile-tab-menu.show {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    /* Tab 項目 */
    .mobile-tab-item {
        padding: 10px 16px;
        background: #1a2332;
        border: 1px solid #2a3544;
        border-radius: 6px;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .mobile-tab-item:active {
        transform: scale(0.95);
    }

    .mobile-tab-item.active {
        background: linear-gradient(135deg, #00d9ff 0%, #00b8d4 100%);
        color: #0a0e1a;
        border-color: #00d9ff;
        font-weight: 700;
    }

    .mobile-tab-item:not(.active):hover {
        background: #222d3f;
        border-color: #00d9ff;
    }

    /* 隱藏原本的 tabs */
    .tabs {
        display: none !important;
    }
}

/* 桌面版：完全隱藏手機版 Tab 切換器 */
@media screen and (min-width: 769px) {
    .mobile-tab-switcher {
        display: none !important;
    }
}

/* ===== 高度受限響應式 ===== */
@media screen and (max-height: 600px) {
    .left-panel-content {
        max-height: 300px;
        overflow-y: auto;
    }

    .power-frame-wrapper {
        height: 100px;
    }

    /* 手機版圖表 */
    .chart-container {
        min-height: 250px;
        /* 改為最小高度 */
        height: auto;
        /* 讓 JS 動態設定 */
    }
}

/* ===== 列印響應式 ===== */
@media print {

    .mobile-toolbar,
    .left-panel-toggle,
    .menu-toggle,
    #refreshBtn,
    .toggle-btn {
        display: none !important;
    }

    #container {
        flex-direction: column;
        padding: 2px;
        /* 從 0 改為 2px，保持極小的邊距 */
        gap: var(--space-xs);
        /* 從 var(--space-md) 縮小到 var(--space-xs) */
    }

    #leftContainer,
    #rightContainer {
        width: 100%;
        flex: none;
    }

    /* 手機版內容區域高度調整 */
    .tab-content .content.active {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 140px);
        /* 手機版高度調整：扣除 header + tabs + toolbar */
        padding: var(--space-xs);
        overflow-y: auto;
    }

    /* 手機版 Tab1 布局 */
    #tab1.content.active {
        height: calc(100vh - 140px);
        overflow-y: auto;
    }

    /* 手機版 Tab2 (OP表) 布局 */
    #tab2.content.active {
        height: calc(100vh - 140px);
        overflow-y: auto;
    }

    /* 手機版 Tab3 (嵌入圖表) 布局 */
    #tab3.content.active,
    #tab3_atm.content.active {
        height: calc(100vh - 140px);
        overflow-y: auto;
    }

    /* 手機版控制面板折疊優化 */
    .controls-container.collapsed+.chart-container {
        /* flex: 1 自動處理高度，無需手動計算 */
    }

    /* 手機版圖表和嵌入內容 */
    .chart-container,
    .chart-embed {
        flex: 1;
        /* 填滿剩餘空間 */
        min-height: 400px;
        /* 最小高度 */
        height: 100%;
        /* 填滿父容器 */
        width: 100%;
        overflow: hidden;
    }

    /* K線圖容器 */
    #chartContainer,
    #kbarContainer_review {
        flex: 1;
        min-height: 400px;
        height: 100% !important;
        width: 100%;
    }

    /* 嵌入 iframe 完整顯示 */
    .chart-embed iframe {
        width: 100%;
        height: 100%;
        min-height: 400px;
    }
}

/* ===== 緊湊版面響應式優化 ===== */

/* 最高優先級：強制統一所有控制項的 label 對齊 */
.date-control-group .control-label,
.period-control-group .control-label,
.time-axis-control .control-label,
.price-axis-control .control-label,
.people-controls .control-label {
    margin: 0 0 4px 0 !important;
    /* 縮小下邊距從 6px 到 4px，與 gap 同步 */
    padding: 0 !important;
    line-height: 1.1 !important;
    /* 進一步縮小行高從 1.2 到 1.1 */
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
    font-size: 10px !important;
    /* 統一字體大小 */
}

/* 特別針對分析師控制項的 label 強制對齊 */
.people-controls .control-label {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    width: 100% !important;
    align-self: flex-start !important;
    /* 強制從頂部開始對齊 */
    font-size: 10px !important;
    /* 確保沒有任何額外的垂直偏移 */
    vertical-align: top !important;
    display: block !important;
}

/* 日期週期控制並排優化 - 桌面版 */
@media (min-width: 768px) {
    .date-period-controls {
        flex-direction: row;
        /* 桌面版改為橫向排列 */
        align-items: flex-start;
        /* 改為頂部對齊，不強制拉伸 */
        gap: var(--space-xs);
        /* 從 var(--space-md) 縮小到 var(--space-xs) */
    }

    .date-control-group,
    .period-control-group {
        flex: 1 1 auto;
        /* 平均分配空間 */
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* 改為從上對齊，不強制拉伸 */
    }

    /* 軸控制也改為橫向 */
    .axis-controls {
        flex-direction: row;
        align-items: flex-start;
        /* 改為頂部對齊，不強制拉伸 */
        gap: var(--space-xs);
        /* 從 var(--space-md) 縮小到 var(--space-xs) */
    }

    .time-axis-control,
    .price-axis-control,
    .people-controls {
        flex: 1 1 auto;
        /* 平均分配空間 */
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* 改為從上對齊，不強制拉伸 */
    }
}

/* 手機版緊湊優化 */
@media (max-width: 767px) {

    /* 控制面板手機版優化 */
    .controls-container {
        padding: 2px !important;
        /* 從 4px 進一步縮小到 2px，與桌面版一致 */
    }

    .basic-controls {
        padding: 4px;
        /* 從 6px 進一步縮小到 4px */
        gap: 2px;
        /* 從 6px 進一步縮小到 2px */
    }

    .mode-section {
        padding: 4px;
        /* 從 6px 進一步縮小到 4px */
    }

    .mode-sections-grid {
        grid-template-columns: 1fr;
        /* 手機版改為單列 */
        gap: 4px;
        /* 從 6px 進一步縮小到 4px */
    }

    /* 自訂功能手機版優化 - 支援左右滑動 */
    .custom-controls {
        flex-wrap: nowrap;
        /* 不換行 */
        overflow-x: auto;
        /* 允許橫向滾動 */
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* 滑動對齊 */
        -webkit-overflow-scrolling: touch;
        /* iOS 平滑滾動 */
        scrollbar-width: none;
        /* 隱藏滾動條 Firefox */
        -ms-overflow-style: none;
        /* 隱藏滾動條 IE */
        padding-bottom: 10px;
        /* 底部留空間 */
    }

    /* 隱藏 Webkit 滾動條 */
    .custom-controls::-webkit-scrollbar {
        display: none;
    }

    .custom-group {
        display: flex;
        /* 確保 flexbox 佈局 */
        align-items: center;
        /* 垂直置中，避免高度被拉高 */
        flex: 0 0 auto;
        /* 自動寬度，跟隨父容器 */
        width: 100%;
        /* 填滿rightControlPanel寬度 */
        max-width: 100%;
        /* 確保不超過容器 */
        scroll-snap-align: start;
        /* 滑動對齊到左側 */
        margin-right: 10px;
        /* 區塊間距 */
        /* 重置可能導致高度問題的屬性 */
        min-height: auto;
        height: auto;
        padding: 4px;
        /* 緊湊的內邊距 */
        gap: 4px;
        flex-wrap: wrap;
        /* 允許內部元素換行 */
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
    }

    .custom-group:last-child {
        margin-right: 0;
    }

    /* 自訂輸入框手機版優化 */
    .custom-input {
        flex: 1 1 auto;
        /* 在固定寬度容器內自適應 */
        min-width: 80px;
        max-width: 150px;
    }

    /* 確保按鈕不會被拉伸 */
    .custom-group .mode-btn,
    .custom-group .search-btn {
        flex: 0 0 auto;
        /* 按鈕保持原始大小，不擴展 */
    }

    /* 電腦版確保搜尋按鈕寬度自適應 */
    .custom-group .search-btn {
        width: auto;
        min-width: auto;
    }

    /* 黃金切割樣式已統一在 paparadar-components.css 中處理 */
}

/* 平板版優化 */
@media (min-width: 768px) and (max-width: 1023px) {
    .custom-input {
        flex: 0 1 150px;
        /* 平板版中等寬度 */
        max-width: 180px;
    }

    .mode-sections-grid {
        grid-template-columns: 1fr;
        /* 平板版也改為單列避免太擠 */
        gap: var(--space-xs);
        /* 從 var(--space-sm) 縮小到 var(--space-xs) */
    }
}

/* 中等螢幕優化 (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .custom-group {
        /* user 版本：中等螢幕可能需要兩行排列 2+1 */
        flex: 1 1 calc(50% - 8px);
        min-width: 300px;
    }

    /* admin 版本：中等螢幕兩行排列 2+2 */
    .admin-user .custom-group,
    body[data-user-role="admin"] .custom-group {
        flex: 1 1 calc(50% - 8px);
        min-width: 280px;
    }
}

/* 大螢幕優化 */
@media (min-width: 1200px) {

    /* 大螢幕維持 flexbox 橫向排列，提供更好的響應性 */
    .custom-controls {
        gap: var(--space-xs);
        /* 保持緊湊間距 */
    }

    .custom-group {
        justify-content: flex-start;
        /* 改為左對齊，避免元素被強制拉伸 */
        /* user 版本：大螢幕3個區塊並排（不包含admin-only的自訂OP） */
        flex: 1 1 calc(33.333% - 4px);
        min-width: 280px;
    }

    /* admin 版本：移除強制寬度設置 */
    .admin-user .custom-group,
    body[data-user-role="admin"] .custom-group {
        flex: 0 0 auto;
        /* 自動寬度 */
        width: auto;
        /* 自動寬度 */
        min-width: 0;
        /* 允許收縮 */
    }
}

/* ===== 桌面版修正 (min-width: 769px) ===== */
/* 整合 leftcontainer-fix.css 和 middlecontainer-fix.css 的樣式 */
@media (min-width: 769px) {

    /* ===== LeftContainer 修正 ===== */
    #leftContainer {
        /* 布局 */
        display: block !important;
        /* 改用 block，不用 flex，避免子元素被壓縮 */
        width: 200px !important;

        /* 高度和滾動 */
        height: auto !important;
        /* 不限制高度，讓內容自然展開 */
        max-height: calc(100vh - 60px) !important;
        /* 最大高度限制為視窗高度 */
        overflow-y: auto !important;
        /* 內容超過時顯示滾動條 */
        overflow-x: hidden !important;

        /* 定位 */
        order: 1 !important;
        flex-shrink: 0 !important;
        /* 在三欄布局中不被壓縮 */

        /* 美化樣式保留 */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 8px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
            0 2px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
    }

    /* 重置 leftPanelContent */
    #leftPanelContent,
    .left-panel-content {
        display: block !important;
        /* 改用 block，不用 flex */
        overflow: visible !important;
        /* 允許內容完全展開 */
        max-height: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* 確保所有 data-group 完整顯示 */
    #leftContainer .data-group {
        flex-shrink: 0 !important;
        margin-bottom: 16px;
        /* 不設定固定高度，讓內容自然展開 */
    }

    /* power-frames 容器 */
    .power-frames-container {
        margin-bottom: 16px;
    }

    .power-frames-row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .power-frames-row .power-frame-wrapper {
        flex: 1;
        height: 150px;
        /* 固定高度 */
    }

    /* 滾動條美化 - leftContainer */
    #leftContainer::-webkit-scrollbar {
        width: 8px;
    }

    #leftContainer::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

    #leftContainer::-webkit-scrollbar-thumb {
        background: rgba(0, 217, 255, 0.3);
        border-radius: 4px;
    }

    #leftContainer::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 217, 255, 0.5);
    }

    /* ===== MiddleContainer 修正 ===== */
    #middleContainer {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0a0e1a !important;
        overflow-y: auto !important;
        order: 2 !important;
        height: 100% !important;
        /* 填滿 container 高度 */
    }

    /* Tabs 不被壓縮 */
    #middleContainer .tabs {
        flex-shrink: 0 !important;
    }

    /* Tab 內容區域 - 允許自然展開 */
    .tab-content {
        flex: 1 !important;
        overflow: visible !important;
        /* 允許內容完整顯示 */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 每個 Tab - 允許內容完整顯示 */
    .tab-content>.content {
        display: none;
        flex-direction: column;
        height: auto !important;
        /* 允許內容自然展開 */
        min-height: 0;
    }

    .tab-content>.content.active {
        display: flex;
        flex: 1;
    }

    /* K線圖容器 - 固定高度 */
    #chartContainer,
    #kbarContainer_review {
        height: 600px;
        /* 固定高度，不要用 flex */
        flex-shrink: 0 !important;
        width: 100%;
    }

    /* OptableContainer - 允許自然展開並顯示滾動條 */
    #optableContainer-desktop,
    #optableContainer-user,
    #optableContainer-admin-tab2 {
        flex-shrink: 0 !important;
        /* 不被壓縮 */
        height: auto !important;
        /* 允許自然展開 */
        margin-top: 20px;
    }

    /* OP Table Container - 固定最大高度並顯示滾動條 */
    .op-table-container {
        overflow-y: auto;
        /* 顯示滾動條 */
        overflow-x: auto !important;
        /* 水平滾動支援 */
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }

    /* OptableWrapper */
    .optable-wrapper {
        flex-shrink: 0 !important;
        margin-bottom: 20px;
    }

    /* Optable Header */
    .optable-header {
        padding: 15px 20px;
        background: rgba(0, 217, 255, 0.1);
        border-bottom: 1px solid rgba(0, 217, 255, 0.3);
    }

    .optable-header h3 {
        margin: 0;
        color: #00d9ff;
        font-size: 16px;
        font-weight: 600;
    }

    /* 滾動條美化 - OP Table */
    .op-table-container::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .op-table-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }

    .op-table-container::-webkit-scrollbar-thumb {
        background: rgba(0, 217, 255, 0.3);
        border-radius: 5px;
    }

    .op-table-container::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 217, 255, 0.5);
    }

    /* 滾動條美化 - middleContainer */
    #middleContainer::-webkit-scrollbar {
        width: 10px;
    }

    #middleContainer::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }

    #middleContainer::-webkit-scrollbar-thumb {
        background: rgba(0, 217, 255, 0.3);
        border-radius: 5px;
    }

    #middleContainer::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 217, 255, 0.5);
    }

    /* Top Controls - 固定高度，不被壓縮 */
    .top-controls {
        flex-shrink: 0 !important;
        height: auto !important;
    }
}

/* ===== 手機版覆蓋規則 - 確保手機版樣式優先 ===== */
@media (max-width: 768px) {
    #leftContainer {
        /* 強制覆蓋所有桌面版寬度設定 */
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        /* 布局設定 */
        display: flex !important;
        flex-direction: column !important;

        /* 移除桌面版的固定寬度 */
        flex: 0 0 100% !important;

        /* 確保填滿容器 */
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}