/* ============================================================
   市場日報設計稿 · tradfi.css（TradFi 頁籤專屬樣式）
   ------------------------------------------------------------
   規則（_plans/redesign_daily_comp_brief.md §0）：
   - 所有選擇器一律 .tf- 前綴，只作用在 #tab-tradfi 內
   - 不覆寫 daily.css 的 token 與共用 class（.row／.panel／.page-head…）
   - 不使用堆疊層級屬性（層疊由 DOM 順序＋position:fixed 解決，本檔無浮動元件）
   - 色彩只用 daily.css 既有 token，綠漲紅跌、靛藍只做強調
   ============================================================ */

/* ---------- 市場開休盤狀態列 ---------- */
#tab-tradfi .tf-market-status { padding-bottom: 0; }
#tab-tradfi .tf-mkt-open { color: var(--indigo); }
#tab-tradfi .tf-mkt-closed { color: var(--ink-2); }
#tab-tradfi .tf-mkt-note { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: -8px; }

/* ---------- 篩選 chip 第二列 ---------- */
#tab-tradfi .tf-tier-filters { margin-top: 4px; }

/* ---------- 焦點區工具列：分頁切換＋搜尋 ---------- */
#tab-tradfi .tf-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 0 20px 12px;
}
#tab-tradfi .tf-toolbar .seg { padding: 0; flex: none; width: auto; }
#tab-tradfi .tf-toolbar .seg-btn { flex: none; padding: 0 16px; }
#tab-tradfi .tf-search { flex: 1; min-width: 200px; max-width: 320px; }
#tab-tradfi .tf-search-input {
  width: 100%; height: 36px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  font-family: var(--font-main); font-size: 15px; color: var(--ink);
}
#tab-tradfi .tf-search-input:focus { border-color: var(--indigo); }
#tab-tradfi .tf-search-input::placeholder { color: var(--ink-3); }

/* ---------- 散點圖點色（資金費率正綠負紅零灰） ---------- */
#tab-tradfi .sc-pt.tf-pt-pos { fill: var(--up); fill-opacity: 0.55; }
#tab-tradfi .sc-pt.tf-pt-neg { fill: var(--down); fill-opacity: 0.55; }
#tab-tradfi .sc-pt.tf-pt-flat { fill: var(--ink-3); fill-opacity: 0.4; }
#tab-tradfi .sc-pt.tf-pt-pos.hit { fill-opacity: 0.95; cursor: pointer; }
#tab-tradfi .sc-pt.tf-pt-neg.hit { fill-opacity: 0.95; cursor: pointer; }
#tab-tradfi .sc-pt.tf-pt-flat.hit { fill-opacity: 0.85; cursor: pointer; }
#tab-tradfi .tf-dot-pos { background: var(--up); }
#tab-tradfi .tf-dot-neg { background: var(--down); }
#tab-tradfi .tf-dot-flat { background: var(--ink-3); opacity: 0.5; }

/* ---------- 來源標記（2026-09-24 階段 6：Bitget 補品項每列標來源） ---------- */
#tab-tradfi .tf-src-badge {
  height: 18px; padding: 0 5px; margin-left: 6px;
  font-size: 11px; vertical-align: middle;
}
#tab-tradfi .tf-src-bitget { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-soft); }

/* fix2（m1）：外匯／股指等整批 Bitget 的類別不顯示可點門檻 chip，改這個純展示用標記 */
#tab-tradfi .tf-tier-filters .chip-static {
  cursor: default; color: var(--ink-2); background: var(--surface-2);
  border: 1px dashed var(--rule-2);
}

/* fix1（major #2）：排行榜依來源分段的段落標題；跨所不互比圖說常駐顯示 */
#tab-tradfi .tf-src-section-head {
  padding: 8px 20px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
#tab-tradfi .tf-src-section-head:first-child { border-top: 0; }
#tab-tradfi .tf-cross-note { padding: 0 20px 10px; }

/* ---------- 排行榜欄位模板 ---------- */
#tab-tradfi .tf-rank-table .row {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) 96px 92px 108px 92px 92px 108px 96px 26px;
}
#tab-tradfi .tf-rank-table .c-num { font-size: 15px; }
/* 欄位固定寬總和在窄於 ~920px 的桌機／平板寬度會把識別欄壓到 0，
   改讓 .tf-focus-body 局部橫向捲動（不外溢到 document，document.scrollingElement
   的寬度不受影響），手機斷點另有精簡欄位模板不受此規則影響。 */
@media (min-width: 768px) {
  #tab-tradfi .tf-focus-body { overflow-x: auto; }
  #tab-tradfi .tf-rank-table { min-width: 920px; }
}

/* ---------- 今日重點三欄 ---------- */
#tab-tradfi .tf-today {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
#tab-tradfi .tf-today-col {
  padding: 4px 20px 18px;
  border-left: 1px solid var(--rule);
}
#tab-tradfi .tf-today-col:first-child { border-left: 0; }
#tab-tradfi .tf-today-title {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 8px;
}
#tab-tradfi .tf-today-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--rule);
  cursor: pointer;
}
#tab-tradfi .tf-today-item:first-of-type { border-top: 0; }
#tab-tradfi .tf-today-item:hover { background: var(--hover); }
#tab-tradfi .tf-today-item .c-sym { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
#tab-tradfi .tf-today-item .c-num { font-size: 15px; }
#tab-tradfi .tf-today-empty { padding: 12px 0; font-size: 13px; }
#tab-tradfi .tag.tf-tag-warn { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); font-size: 12px; height: 20px; padding: 0 6px; }

/* ---------- 手機（< 768px） ---------- */
@media (max-width: 767px) {
  #tab-tradfi .tf-cat-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #tab-tradfi .tf-cat-filters::-webkit-scrollbar { display: none; }
  #tab-tradfi .tf-cat-filters .chip { flex: none; }

  #tab-tradfi .tf-toolbar { padding-inline: 14px; }
  #tab-tradfi .tf-search { max-width: none; flex-basis: 100%; }

  #tab-tradfi .tf-rank-table .row {
    grid-template-columns: minmax(0, 1fr) 84px 88px 18px;
    padding-inline: 14px;
  }
  #tab-tradfi .tf-rank-table .tf-col-underlying,
  #tab-tradfi .tf-rank-table .tf-col-cat,
  #tab-tradfi .tf-rank-table .tf-col-perp,
  #tab-tradfi .tf-rank-table .tf-col-spot,
  #tab-tradfi .tf-rank-table .tf-col-implied,
  #tab-tradfi .tf-rank-table .tf-col-oi { display: none; }

  #tab-tradfi .tf-today { grid-template-columns: 1fr; }
  #tab-tradfi .tf-today-col { border-left: 0; border-top: 1px solid var(--rule); padding-inline: 14px; }
  #tab-tradfi .tf-today-col:first-child { border-top: 0; }
}