/* ============================================================
   总览页（overview.html）专用样式 —— 2026-10-15 改版
   范围：页头 / 绿色横幅 / 四张指标卡 / 持仓前五列表
   不碰：侧边栏、顶栏、四张表格（list_tab 原样）、ECharts 图表
   ------------------------------------------------------------
   2026-10-15（P1 批次5）：色值全部接入 tokens.css 的 --bb-* 变量。
   此前本文件的字面量与 tokens 定义**逐条同值**（#4e73df / #3a3b45 /
   #858796 / #dddfeb / #e3e6f0），属于「token 已定义但未接线」，
   本次接线后改一处即全站生效。
   ⚠️ 有意保留原值的两处（tokens 刻度无精确对应，强换会改变观感）：
      圆角 12px（--bb-radius-lg 是 8px）、字号 12/12.5/13px（rem 刻度为 12/13.6/14）
   ============================================================ */

/* ---------- ① 页头 ---------- */
.ov-sub {
    color: var(--bb-text-muted);
    font-size: 13px;
    margin-top: 4px;
}

.ov-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 汇率：纯文字（非可点项，不做胶囊），仅数字加重 */
.ov-fx-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--bb-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ov-fx-text b {
    color: var(--bb-text);
    font-weight: 700;
    margin-left: 2px;
}

.ov-fx-text i {
    font-style: normal;
    color: var(--bb-text-divider);
    margin: 0 4px;
}

/* 刷新：时间戳从"蓝色按钮"改为蓝色胶囊，回归"刷新"语义 */
.ov-refresh-form { margin: 0; }

.ov-pill-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    font-weight: 700;
    font-size: 12.5px;
    padding: 7px 15px;
    border-radius: var(--bb-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

.ov-pill-time:hover {
    background: var(--bb-primary-soft-hover);
    border-color: var(--bb-primary);
}

/* ---------- ② 绿色横幅（同交易录入页 alert-success） ---------- */
.ov-banner {
    background: var(--bb-success-soft);
    border: 1px solid var(--bb-success-border);
    color: var(--bb-success-text);
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13px;
    margin: 4px 0 20px;
}

.ov-banner b { font-weight: 700; }

/* ---------- ③ 指标卡 ----------
   2026-10-15 改版：与「投资组合」页的卡片统一（用户指定 image2 的样式）。
     · 卡壳：白底 + SB2 标准阴影（= .card.shadow），去掉左侧 4px 色条与 hover 位移
     · 标题 1rem / 700 / var(--bb-primary)（原 .95rem）
     · 「详情」与标签 .85rem / 500 / var(--bb-text-subtle)（原 12.5px muted）
     · 数值 1.35rem / 700 / var(--bb-text-axis)（原 1.45rem 近黑 --bb-text）
     · 两个指标**横向并排**（同参考卡：标签在上、数值在下，左右两格）
   ⚠️ 横排的宽度约束（实测，2026-10-15 二次改版）：
      四张同排 = `col-xl-3`，**从 1200px 才生效**，故 1200 是全程最窄的一点。
      卡体内容区宽（= 卡宽 − 左右各 20px padding，**不是 clientWidth**）实测拟合为
      `0.25 × 视口 − 120`（1200→180、1366→222、1440→240，逐点吻合）：
        视口    1200  1240  1280  1366  1440  1536  1680  1920
        可用宽   180   190   200   222   240   264   300   360
      两指标并排（间距 12px）在 1.35rem 下需 **239px**（最长格＝「29,094,074元」）
      ⇒ **1200~1480 放不下**，数值字号在该区间按视口线性回落
        （1200 → .95rem，1480 起 1.25rem 满档 —— 第三版按用户「太挤」反馈整体再降一档），
        见下方 @media。
      <1200 时是 `col-md-6` 两列（768px 起可用 210px、1199px 达 426px），1.35rem 全有余量。
   ⚠️ nowrap + tabular-nums 保留，继续防「元/%」换行错位。
   ⚠️ `.ov-unit` 用 em（.63em）而非固定 .85rem —— 它在 1.35rem 下恰好 = .85rem，
      字号回落时单位跟着缩，不会出现「数字小了、『元』还是原来大」的错位。
   ⚠️ 若日后金额位数增长（如总价值涨到 10 亿、+1 位 ≈ +9.6px），1200 档余量会被吃掉，
      届时把 @media 里的下限 1rem 再下调到 .95rem 即可（其余不动）。 */
.stat-row-card {
    height: 100%;
    background: var(--bb-bg-card);
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: var(--bb-radius);        /* .35rem，与 SB2 .card 同值 */
    padding: 1rem 0;                        /* 对齐参考卡的 .py-2 */
    box-shadow: var(--bb-shadow-sm);
}

.ov-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 41.6px;                  /* 参考卡「标题 → 指标」的实际间距（实测） */
}

.ov-card-title {
    font-weight: 700;
    color: var(--bb-primary);
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
}
.ov-card-title:hover { color: var(--bb-primary-hover); }

.ov-more {
    color: var(--bb-text-subtle);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}
.ov-more:hover { color: var(--bb-primary); }

/* 卡体：两格并排。`flex: 1 1 auto`（按内容分配）而非等宽平分 ——
   等宽时 1200px 下每格只有 (180-8)/2 = 86px，连最长的「29,094,074元」（1.35rem 需 135.9px）
   的一个零头都放不下，会白掉更多字号。 */
.ov-card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;                              /* 参考卡 .mr-2 是 8px；用户反馈「太挤」加到 12 */
    padding: 0 20px;
}

.ov-cell {
    flex: 1 1 auto;
    min-width: 0;
}

.ov-lbl {
    display: block;
    color: var(--bb-text-subtle);
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .3rem;
}

.ov-val {
    display: block;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--bb-text-axis);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ov-unit {
    font-size: .63em;                       /* 相对 .ov-val：1.35rem 下 = .8505rem ≈ 原 .85rem */
    font-weight: 500;
    color: var(--bb-text-subtle);
    margin-left: .25rem;
    letter-spacing: 0;
}

/* 「放不下」区间：1200~1480（四列刚生效、卡最窄）。
   第三版（用户反馈「字号小一点，现在太挤」）：在第二版基础上整体再降一档 ——
     下限 1rem → .95rem，上限 1.35rem → 1.25rem，同时 gap 8 → 12px。
   系数 0.01714 = (1.25rem - .95rem) / (1480px - 1200px) = 4.8px / 280px。
   gap 12px、各档需要宽（227px 是 1.35rem 下两格数值宽之和，不含 gap）：
        视口    1200    1280    1366    1440    1480+
        字号    15.2    16.6    18.1    19.3    20.0px
        需/可用 172/180 186/200 202/222 215/240 234/245   ← 余 8~25px
   两格间空白随字号回落而增大，视觉明显松于满字号版。
   ⚠️ 另有两处也要回落（2026-10-15 晚补）：
     ① 两列区间 `col-md-6`（768~1199）：**直开页面**（侧栏展开占 192px）时可用宽
        ≈ 0.5×视口 − 174，768 处仅 210px < 239px ⇒ 768~826 也放不下。
        （⚠️ 从宽窗口 resize 下来测不出这段 —— SB2 的 JS 会在 resize 时把侧栏收起，
          布局变宽「假通过」；验证必须按「每个视口直开」的最坏情况。）
     ② ≤359.98 的极窄屏（col-12 全宽，可用 ≈ 视口 − 90）：320 处可用 230px < 239px。
        360 起恢复满字号（360 可用 270px，余 31px）。 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .stat-row-card .ov-val {
        font-size: clamp(1.05rem, calc(1.05rem + (100vw - 768px) * 0.0516), 1.25rem);
    }
}

@media (max-width: 359.98px) {
    .stat-row-card .ov-val {
        font-size: 1.05rem;
    }
}

@media (min-width: 1200px) {
    .stat-row-card .ov-val {
        font-size: clamp(.95rem, calc(.95rem + (100vw - 1200px) * 0.01714), 1.25rem);
    }
}

/* ---------- ④ 蓝色数据胶囊（卡头数据标签） ---------- */
.ov-pill {
    display: inline-block;
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--bb-radius-pill);
    font-variant-numeric: tabular-nums;
    vertical-align: 1px;
}

/* ---------- ⑤ 持仓前五列表 ----------
   回归原版排版：名称+金额一行、百分比右对齐、下方全宽粗进度条 */
.ov-top5 .progress { background: var(--bb-bg-hover); border-radius: 6px; }
.ov-top5 .progress-bar { border-radius: 6px; }
.ov-top5 h4 a:hover { color: var(--bb-primary); }

/* ---------- ⑥ 移动端（<768px）：四张「近期*」表格压缩（P2-2a · 2026-10-15）
   375px 视口下卡内表格容器只有 ~285px，BS4 默认 .75rem 单元格内边距太奢侈。
   压到 .5rem 后实测：打新表（配合模板侧 d-none 藏「申购类型/证券账户」两列）
   ≥360px 视口完全放下、无横滚；交易/持仓两表溢出量各减 ~40px（仍需横滚，
   由 skeleton.js 的滑动提示兜底）。⚠️ 模板里的 table-condensed 是 BS3 死类
   （BS4 无定义），一直没生效过，压缩实际由本段完成。 */
@media (max-width: 767.98px) {
    .card .table > thead > tr > th,
    .card .table > tbody > tr > td {
        padding: .5rem .5rem;
    }
}