/* 總部頁「流量與會員分析」卡(public/traffic-stats.js;伺服器 server/routes/traffic.js)
 * 獨立成檔,只用 .tf- 開頭的 class,不動 app.css。商米舊 WebView 的守則同 app.css:
 * 橫排用 margin 隔開、不靠 flex gap;不用 grid、:has()、:is()、min()、clamp()。
 * 帶 hidden 的元素一律藏住(下面任何 display 規則都不能把它蓋開)。 */
.tf-card { padding: 0; }
.tf-card[hidden], .tf-card [hidden] { display: none !important; }
.tf-card.open { padding-bottom: 4px; }

/* 收起來時只有一行摘要;點整列展開 */
.tf-toggle { display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: 54px; padding: 10px 16px; margin: 0; border: 0; border-radius: var(--radius);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tf-toggle .ic { flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-right: 8px; color: #1864ab; }
.tf-title { flex: 0 0 auto; margin: 2px 12px 2px 0; font-size: 18px; font-weight: 800; color: #1864ab; }
.tf-sum { flex: 1 1 220px; min-width: 0; margin: 2px 8px 2px 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.tf-sum b { font-weight: 800; color: #1864ab; }
.tf-chev { flex: 0 0 auto; margin-left: auto; font-size: 13.5px; font-weight: 700; color: #14539a; white-space: nowrap; }
.tf-body { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.tf-note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.tf-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffc9c9; background: #fff5f5; color: #c92a2a; font-size: 13.5px; line-height: 1.5; }
.tf-info { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffe066; background: #fff9db; color: #7c5b00; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.tf-info.tf-rule { font-weight: 700; }
.tf-empty { margin: 12px 0 4px; padding: 16px 10px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }

/* 期間 */
.tf-ctl { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8f9fb; }
.tf-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.tf-lbl { flex: 0 0 auto; margin: 0 10px 4px 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.tf-seg { display: flex; flex-wrap: wrap; margin: 0 10px 4px 0; }
.tf-seg > button { min-height: 40px; margin: 0 6px 4px 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; }
.tf-seg > button.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

/* 區塊 */
.tf-sec { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.tf-sec > h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #14539a; }
.tf-sec > summary { padding: 6px 0; font-size: 15px; font-weight: 800; color: #14539a; cursor: pointer; }

/* 數字總覽 */
.tf-kpis { display: flex; flex-wrap: wrap; margin: 6px -4px 0; }
.tf-kpi { flex: 1 1 150px; min-width: 130px; margin: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.tf-kpi-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tf-kpi-v { margin-top: 2px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tf-kpi-s { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.tf-kpi.green .tf-kpi-v { color: #2b8a3e; }
.tf-kpi.blue .tf-kpi-v { color: #1864ab; }

/* 每日圖:SVG 只有圖形(寬度跟著卡片伸縮),日期與圖例是一般文字 */
.tf-chart { margin-top: 12px; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.tf-legend { display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: #495057; line-height: 1.8; }
.tf-key { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 0; border-radius: 3px; vertical-align: -1px; }
.tf-key.tf-key-line { height: 3px; margin-left: 12px; border-radius: 2px; vertical-align: 3px; }
.tf-max { margin-left: auto; padding-left: 10px; color: var(--muted); white-space: nowrap; }
.tf-svg { display: block; width: 100%; height: 110px; margin-top: 6px; overflow: visible; }
.tf-svg .tf-nodata { fill: #f1f3f5; }
.tf-bar-g, .tf-key.tf-bar-g { fill: #2f9e44; background: #2f9e44; }
.tf-bar-n, .tf-key.tf-bar-n { fill: #4c6ef5; background: #4c6ef5; }
.tf-line-b { fill: none; stroke: #1864ab; stroke-width: 2.5; stroke-linejoin: round; }
.tf-line-o { fill: none; stroke: #e8590c; stroke-width: 2.5; stroke-linejoin: round; }
.tf-key.tf-line-b { background: #1864ab; }
.tf-key.tf-line-o { background: #e8590c; }
.tf-axis { display: flex; margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tf-axis > span { flex: 1 1 0; min-width: 0; }
.tf-axis .tf-axis-m { text-align: center; }
.tf-axis .tf-axis-r { text-align: right; }
.tf-days { margin-top: 8px; }
.tf-days > summary { padding: 4px 0; font-size: 13.5px; font-weight: 700; color: #14539a; cursor: pointer; }
.tf-dlist { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid #eef1f5; border-radius: 8px; }
.tf-drow { display: flex; flex-wrap: wrap; padding: 5px 10px; font-size: 13px; border-bottom: 1px dashed #edf0f4; }
.tf-drow:last-child { border-bottom: 0; }
.tf-drow > span { flex: 1 1 120px; min-width: 0; margin-right: 8px; }
.tf-drow > .tf-dd { flex: 0 0 48px; font-weight: 800; }

/* 漏斗 */
.tf-grp { margin: 12px 0 2px; font-size: 13px; font-weight: 800; color: #495057; }
.tf-step { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.tf-step.tf-none { background: #f8f9fa; }
.tf-st-l { flex: 0 0 140px; min-width: 0; font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; }
.tf-st-n { flex: 0 0 90px; text-align: right; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: #1864ab; }
.tf-st-why { flex: 1 1 200px; min-width: 0; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.tf-st-bar { flex: 1 1 120px; min-width: 60px; height: 12px; margin: 0 0 0 12px; border-radius: 6px; background: #f1f3f5; overflow: hidden; }
.tf-st-bar > span { display: block; height: 100%; border-radius: 6px; background: #74c0fc; }
.tf-step.tf-none .tf-st-bar { display: none; }
.tf-st-s { flex: 1 1 100%; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: #495057; overflow-wrap: anywhere; }
.tf-st-s b { color: #1864ab; }
.tf-ref { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; background: #f8f9fa; font-size: 13px; line-height: 1.7; color: #495057; overflow-wrap: anywhere; }

/* 潛在加盟名單 */
.tf-pcount { margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: #495057; }
.tf-pros { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid #ced4da; border-radius: 10px; background: #fff; }
.tf-pros.lv-high { border-left-color: #e8590c; }
.tf-pros.lv-mid { border-left-color: #f59f00; }
.tf-p-h { line-height: 1.6; overflow-wrap: anywhere; }
.tf-p-name { margin-right: 8px; font-size: 15.5px; font-weight: 800; }
.tf-p-code { margin-right: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.tf-chip.lv-high { background: #fff4e6; color: #d9480f; }
.tf-chip.lv-mid { background: #fff9db; color: #7c5b00; }
.tf-chip.lv-low { background: #f1f3f5; color: #495057; }
.tf-chip.lead { background: #ebfbee; color: #2b8a3e; }
.tf-chip.nolead { background: #f1f3f5; color: #868e96; }
.tf-p-why { margin-top: 4px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tf-p-meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.tf-lead { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #ebfbee; font-size: 13px; line-height: 1.6; color: #2b5d34; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.tf-more { margin-top: 8px; }

@media (max-width: 700px) {
  .tf-body { padding-left: 12px; padding-right: 12px; }
  .tf-st-l { flex: 1 1 60%; }
  .tf-st-n { flex: 0 0 auto; margin-left: auto; }
  .tf-st-bar { flex: 1 1 100%; margin: 6px 0 0; }
}
@media (max-width: 480px) {
  .tf-title { font-size: 16.5px; }
  .tf-kpi { flex-basis: 44%; min-width: 120px; }
  .tf-kpi-v { font-size: 19px; }
  .tf-svg { height: 90px; }
}