/* ══════════════════════════════════════════════════════════════════════════
   mobile.css — 手机端适配精修层 (2026-10-03 用户「手机端页面要精修一下，适配度要提高」)

   为什么单独一层:
     style.css 里 `@media (max-width: 480px) { html { font-size: 14px } }` 把根字号
     压到 14px → 390px 手机上 .7rem ≈ 9.8px / .62rem ≈ 8.7px (实测最小 7px), 数据表、
     徽标、按钮整体偏小; 实测点击区最差 13~28px (远低于 40px 触控舒适线)。
   本文件**所有规则包在 media 内** → 桌面端 (≥821px) 零影响; 因在 style.css 之后加载,
   同优先级下覆盖上面那条 480px 的根字号规则。

   量测口径 (可复跑): /tmp/aievl/mobile_recon2.py — 按 class 聚合「横向溢出/裁切/小字/
   小点击区」四类, 排除离屏 fixed 抽屉 (假阳性)。
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

    /* ── 1. 字号基线: 回到 16px (iOS 正文尺度), 全站 rem 尺寸 +14% ───────── */
    html { font-size: 16px; }
    body { font-size: .95rem; line-height: 1.6; }
    /* 最容易过小的几类 (徽标/周期标签/后缀) 保底到 ~11.5px 可读线 */
    .badge, .tf, .h, .sid, small, .at-badge, .tag { font-size: .72rem; }
    .muted, .sub, .s, .k, .hint, .note { font-size: .75rem; }

    /* ── 2. 数据表: 取消强制 600px, 按内容溢出 + 首列吸附 + 可读字号 ───────
       style.css 在 ≤768px 写了 `table { min-width: 600px }` → 390px 屏上
       每张表都必然横向滚动 (连 3 列的窄表也是)。改为按内容自适应, 需要时才滚。 */
    table { font-size: .8rem; min-width: 0; }
    th, td { padding: 9px 10px; }
    .table-container { -webkit-overflow-scrolling: touch; border-radius: 12px; }
    /* 首列 (时间/币种/策略名) 吸附: 横向滑动时仍知道这一行是谁 */
    .table-container th:first-child, .table-container td:first-child {
        position: sticky; left: 0; z-index: 2;
        background: var(--bg-card-solid);
        box-shadow: 1px 0 0 var(--border);
    }
    /* 手机上隐藏低优先列, 减少横向滚动距离
       ⚠️ 列序与 web/templates/{trades,logs,dashboard}.html 的 <th> 一致;
          改动列序必须同步这里, 否则隐藏错列 (已加一致性检查 check_mobile_css)。 */
    .trades-table th:nth-child(2), .trades-table td:nth-child(2),   /* 模式/市场 */
    .trades-table th:nth-child(3), .trades-table td:nth-child(3),   /* 交易所 */
    .trades-table th:nth-child(6), .trades-table td:nth-child(6),   /* 数量 */
    .trades-table th:nth-child(8), .trades-table td:nth-child(8),   /* 状态 */
    .trades-table th:nth-child(9), .trades-table td:nth-child(9),   /* 策略 */
    .log-table th:nth-child(3), .log-table td:nth-child(3),         /* 类型 */
    .log-table th:nth-child(5), .log-table td:nth-child(5),         /* 模式 */
    .log-table th:nth-child(7), .log-table td:nth-child(7),         /* 方向 */
    .log-table th:nth-child(8), .log-table td:nth-child(8),         /* 强度 */
    .log-table th:nth-child(9), .log-table td:nth-child(9),         /* 价格 */
    .pos-table th:nth-child(2), .pos-table td:nth-child(2),         /* 市场 */
    .pos-table th:nth-child(3), .pos-table td:nth-child(3),         /* 模式 */
    .pos-table th:nth-child(8), .pos-table td:nth-child(8) {        /* 盈亏比 */
        display: none;
    }

    /* ── 3. 触控目标: 主操作 ≥40px, 次要/表格内 ≥34px (实测最差 13px) ─────
       本层是**覆盖层**, 部分原样式靠更高特异性 (如 .sg-tf-bar .sg-tf-btn) 或固定
       height 压过普通 min-height → 这里对触控尺寸一律用 !important 确保生效。 */
    .btn, button.btn { min-height: 40px !important; padding: 9px 15px; }
    .btn-sm, button.btn-sm, td .btn, td button, .tbl-actions .btn { min-height: 34px !important; padding: 7px 12px; }
    select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea { min-height: 42px !important; }
    /* 芯片/档位/徽标式链接: 抬到可点高度但不撑破排版 */
    .sg-tf-btn, .val-tf-btn, .guide-toc-chip, .ov-link, .sys-badge, .at-seg .sx-pf,
    .seg-btn, .manual-nav-item, .at-sx-cls, .sa-chip { min-height: 32px !important; display: inline-flex; align-items: center; }
    .at-seg .sx-pf { min-height: 26px !important; }   /* 分段控件跟徽标同高, 单独一档 */
    /* 图表/总览/首页的小按钮与开关 (实测 16~31px) */
    .ov-tf-btn, .ov-btns button, .ms-btn, .cm-menu-btn,
    .solace-tf-btn, .solace-ff-btn, .solace-sr-seg button,
    .sr-toggle, .ai-toggle, .panel-link, .sp-hero-chip, .solace-coin-btn { min-height: 32px !important; display: inline-flex; align-items: center; }
    .solace-nav { width: 34px !important; height: 34px !important; }
    .x.dis { min-width: 28px !important; min-height: 28px !important; display: inline-flex; align-items: center; justify-content: center; }
    /* 首页时间范围档 (24小时/7天/30天, 实测 19px) */
    [data-range] { min-height: 34px !important; padding: 6px 12px !important; }
    /* 相邻小档位之间留指距, 防误触 */
    .sg-tf-btn + .sg-tf-btn, .val-tf-btn + .val-tf-btn, .ov-link + .ov-link { margin-left: 4px; }

    /* ── 3b. 选择栏宽度: 手机上一律撑满 (2026-10-11 用户: 「选择栏的比例太窄, 比例不协调」) ──
       桌面页在手机上仍按内联定宽渲染: 实测 #adminAsSelect (策略矩阵·会员下拉) 仅 **77px**, 与同排
       输入框/按钮宽度差 4 倍以上 ⇒ 统一撑满。⚠️ 只针对**整行型**选择栏; 与文字同排的紧凑控件
       (如 pTrendTfRadar / pConfirmMode, 它们刻意 width:auto 嵌在句子中间) 不动。 */
    /* ⚠️ 必须 !important: 本层(外部 mobile.css)在页面内联 <style> 之前加载, 同特异性会被
       strategies.html 里的 `.at-head-actions{flex-wrap:nowrap}` 反过来压过 —— 首版就踩了
       (规则写了却 77px 不变, 因为 flex 在一行里把它压缩了)。 */
    .at-head-actions { flex-wrap: wrap !important; }
    #adminAsSelect { flex: 1 0 100% !important; width: 100% !important; max-width: none !important; }
    .at-head-actions > select, .form-group > select.auto-wide { width: 100% !important; max-width: none !important; }

    /* ── 4. 卡片网格: 小屏两列, 不再挤成细条 ─────────────────────────────── */
    .at-sx-kpis, .at-stat-grid, .stat-row, .stat-grid, .cfg-grid, .sg-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .at-sx-kpis .at-sx-kpi { padding: 9px 11px; }
    .at-stat-card { min-height: 92px; }

    /* ── 5. 溢出兜底: 长文本/代码/媒体不撑破容器 ─────────────────────────── */
    .page-content { padding: 14px; }
    pre, code, .log-pre, .kpi-sub { white-space: pre-wrap; word-break: break-word; }
    img, svg, canvas, video { max-width: 100%; }
    .card, .panel { overflow-x: clip; }
    .td-strategy .strat-text { max-width: 44vw; }

    /* ── 6. 底部安全区: 别被底部导航栏挡最后一行 ─────────────────────────── */
    .page-content { padding-bottom: calc(var(--mobile-nav-h, 56px) + 16px + env(safe-area-inset-bottom)); }

    /* ── 7. 抽屉/浮层: 全宽 + 顶部安全区 ─────────────────────────────────── */
    .modal, .mobile-sheet { max-width: calc(100vw - 20px); }
    .sg-detail { max-width: 100vw; padding-top: env(safe-area-inset-top); }
    .sg-detail-topbar { padding-left: 12px; padding-right: 10px; }
}

/* 更窄机型 (360/375) 再收一档: 字号略降但仍在可读线以上 */
@media (max-width: 380px) {
    html { font-size: 15.5px; }
    th, td { padding: 8px 8px; }
    .page-content { padding: 12px; }
    .td-strategy .strat-text { max-width: 38vw; }
}