/* ============================================================
   小幣獵殺系統 · 共用響應式樣式（手機 / 平板）
   一次載入到每個頁面，讓桌面版設計原封不動地在小螢幕上
   改成「直向堆疊 + 可捲動」的 App 版面。不動任何 API / JS。
   斷點：
     ≤ 980px  平板直向 + 所有手機 → 解除單螢幕鎖定、直向堆疊
     ≤ 560px  手機 → 更緊湊的間距與字級
   ============================================================ */

/* \u624b\u6a5f\u7248\u5c0e\u89bd\u4e0b\u62c9\u9078\u55ae\uff1a\u684c\u9762\u7248\u9690\u85cf\uff08\u53ea\u5728 \u2264980px \u986f\u793a\uff09 */
.navsel { display: none; }

@media (max-width: 980px) {
  html, body { height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; }

  /* --- 解除桌面「固定單螢幕 + zoom 縮放」鎖定，改成自然直向流 --- */
  .app {
    --z: 1 !important;
    zoom: 1 !important;
    height: auto !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
  }
  .app > * { width: 100% !important; }

  /* --- 導覽列：置頂、可換行，分頁列全寬可橫向捲動 --- */
  .nav {
    flex-wrap: wrap !important;
    padding: 9px 14px !important;
    gap: 9px 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    overflow: visible !important;
    background: var(--bg) !important;
  }
  .brand { font-size: 17px !important; }
  .brand .cn { font-size: 15px !important; }
  .navtabs {
    display: none !important;
  }
  .navsel {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255,255,255,.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ff7a1a' stroke-width='1.6'/></svg>") no-repeat right 14px center !important;
    background-size: 12px !important;
    border: 1px solid var(--line2, rgba(255,255,255,.14)) !important;
    border-radius: 9px !important;
    color: var(--tx, #ececed) !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 11px 38px 11px 14px !important;
  }
  .navsel:focus { outline: none !important; border-color: var(--or, #ff7a1a) !important; }
  .navsel option {
    background: #14141a !important;
    color: var(--tx, #ececed) !important;
  }
  .navsel option:checked {
    background: var(--or, #ff7a1a) !important;
    color: #0a0a0a !important;
  }
  .nav-right { margin-left: auto !important; gap: 12px !important; }

  /* --- 主工作區：任何雙欄 / 三欄 → 直向堆疊、可捲動 --- */
  .work {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }
  .work > * { border-right: none !important; }
  .chartcol, .tablecol, .listcol, .detail {
    border-right: none !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .chartcol { border-bottom: 1px solid var(--line) !important; }

  /* SignalFeed 專屬：主表格 + 市場情報側欄改直向堆疊 */
  .main { flex-direction: column !important; min-height: 360px !important; }
  .intel { width: 100% !important; border-left: none !important; border-top: 1px solid var(--line-2) !important; max-height: none !important; }
  .weekbar { flex-wrap: wrap !important; height: auto !important; gap: 8px !important; padding: 8px 12px !important; }
  .filterbar {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow-x: visible !important;
  }
  /* 每個篩選群：整組佔滿一列、內部按鈕換行填滿、不裁切 */
  .filterbar .fgroup {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow: visible !important;
    flex-shrink: 1 !important;
    gap: 1px !important;
  }
  .filterbar .fgroup button {
    flex: 1 1 auto !important;
    white-space: normal !important;
    text-align: center !important;
    min-width: 0 !important;
  }
  .filterbar .flabel { width: 100% !important; margin: 4px 0 2px !important; }
  .filterbar .counter { margin-left: 0 !important; padding-left: 0 !important; }
  .fsep, .filterbar .fsep { display: none !important; }

  /* Overview 專屬 */
  .syshead { flex-direction: column !important; align-items: stretch !important; }
  .sys-id { width: 100% !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .stat-cols { flex-wrap: wrap !important; overflow-x: visible !important; width: 100% !important; }
  .stat { flex: 1 0 45% !important; min-width: 45% !important; border-bottom: 1px solid var(--line) !important; }
  .models { flex-wrap: wrap !important; overflow-x: visible !important; }
  .model { min-width: 100% !important; }
  .chartwrap { flex: 0 0 260px !important; }
  .chartfiller { display: none !important; }
  .tblpanel { flex: none !important; height: 300px !important; }
  .modeldetail { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  /* Strategies：清單 + 詳情直向 */
  .listcol { border-bottom: 1px solid var(--line) !important; max-height: 44vh !important; overflow-y: auto !important; }

  /* Live positions：模式切換三欄 → 保留橫排但縮小；卡片單欄 */
  .ctxbar { grid-template-columns: repeat(3, 1fr) !important; }
  .ctx { padding: 9px 10px !important; }
  .pcards, .papercards { grid-template-columns: 1fr !important; padding: 12px !important; gap: 12px !important; }

  /* 常見統計格：4 欄 → 2 欄；auto-fit 保持 */
  .execgrid, .riskgrid { grid-template-columns: repeat(2, 1fr) !important; }
  .exec-item:nth-child(2n) { border-right: none !important; }

  /* Settings：設定列改單欄堆疊 */
  .setrow { grid-template-columns: 1fr !important; gap: 10px !important; align-items: start !important; }

  /* 表格：允許橫向捲動而不撐破版面 */
  .tbl-scroll, .tbl-wrap, .tablewrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* --- 質感改善：隐藏所有橫向滾動條的灰色軌道（仍可觸控拖動） --- */
  .navtabs, .filterbar, .fgroup, .weekbar, .stat-cols, .models,
  .tbl-scroll, .tbl-wrap, .tablewrap, .ctable-wrap, .ctxbar,
  .work, .listcol, .detail, .main, .intel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .navtabs::-webkit-scrollbar, .filterbar::-webkit-scrollbar, .fgroup::-webkit-scrollbar,
  .weekbar::-webkit-scrollbar, .stat-cols::-webkit-scrollbar, .models::-webkit-scrollbar,
  .tbl-scroll::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar, .tablewrap::-webkit-scrollbar,
  .ctable-wrap::-webkit-scrollbar, .ctxbar::-webkit-scrollbar, .work::-webkit-scrollbar,
  .listcol::-webkit-scrollbar, .detail::-webkit-scrollbar, .main::-webkit-scrollbar,
  .intel::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
  }

  /* 內容區留白收斂 */
  .detail { padding: 20px 16px !important; }
}

@media (max-width: 560px) {
  body { font-size: 13px !important; }

  .navtab { font-size: 13px !important; padding: 6px 10px !important; }
  .brand svg { width: 20px !important; height: 20px !important; }

  /* 統計格全部單欄，避免數字被擠壓換行 */
  .stat { min-width: 100% !important; flex: 1 0 100% !important; }
  .execgrid, .riskgrid { grid-template-columns: 1fr !important; }
  .exec-item { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .riskcell, .stratcell, .statcell { min-width: 0 !important; }

  /* 即時持倉模式切換：三欄太擠 → 直向 */
  .ctxbar { grid-template-columns: 1fr !important; }
  .ctx { border-right: none !important; border-bottom: 1px solid var(--line) !important; }

  .tblpanel { height: 260px !important; }
  .chartwrap { flex: 0 0 220px !important; }

  /* 底部狀態列可換行 */
  .statusbar { flex-wrap: wrap !important; height: auto !important; padding: 10px 14px !important; gap: 6px 12px !important; font-size: 11px !important; line-height: 1.5 !important; }
  .statusbar .sep { display: none !important; }
  .statusbar .r { margin-left: 0 !important; width: 100% !important; }

  .detail { padding: 16px 13px !important; }
}