/* ==========================================================================
   Fund Insight 基金业务数据站
   mobile.css — 移动端响应式适配(断点参照 website-UI.md：1100px / 720px)
   版本: v1.1.0
   核心策略: 汉堡菜单 + 纵向堆叠 + 表格横向滚动
   ========================================================================== */

/* ---------- 窄屏 (<=1100px) ---------- */
@media (max-width: 1100px) {
  :root {
    --header-h: 56px;
  }

  .header-inner {
    padding: 0 16px;
    gap: 16px;
  }

  .brand-sub {
    display: none;
  }

  .header-tools .btn-doc {
    display: none;
  }

  /* 汉堡按钮显示 */
  .menu-toggle {
    display: flex;
  }

  /* 汉堡按钮**移到右侧**（2026-09-30 用户指定）：
     视觉顺序＝[品牌] …… [☰]，品牌贴左、按钮贴右（用 margin-left:auto 吃掉全部剩余空间）。
     ⚠ 用 flex `order` 调整，**不改 DOM 结构** —— DOM 里按钮仍排在 .brand 之前，
       这样 PC 端（按钮 display:none）与无障碍顺序都不受影响，改动只落在这一段媒体查询里。
     ⚠ 移动端 .main-nav 是 position:absolute 的抽屉（不参与 flex 排版）⇒ 只需给这两个排 order；
       若将来把抽屉改成 static，需一并给 .main-nav 一个 order。 */
  .header-inner > .brand { order: 1; }
  .header-inner > .menu-toggle { order: 2; margin-left: auto; }

  /* 导航折叠为抽屉式下拉 */
  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 16px;
    gap: 2px;
    display: none;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-item {
    border-bottom: 1px solid var(--border);
  }

  .nav-item:last-child {
    border-bottom: none;
  }

  .nav-link {
    padding: 12px 10px;
    font-size: 15px;
    justify-content: space-between;
  }

  .nav-link .arrow {
    width: 12px;
    height: 12px;
  }

  /* 二级菜单改为展开式(不再 hover 悬浮) */
  .subnav {
    position: static;
    display: none;
    border: none;
    background: var(--surface-2);
    margin: 0 0 8px;
    padding: 4px 0;
    min-width: 0;
  }

  .nav-item.open .subnav {
    display: block;
  }

  /* 触屏没有 hover（main.css 的 hover 效果已收进 @media (hover: hover)）⇒ 展开指示改由 .open 驱动：
     箭头朝上 + 子菜单显示，两者都在，用户仍能一眼看出哪个一级菜单展开了。
     2026-09-28：文字**不变蓝**，避免与当前栏目的 .active 蓝叠加成"两个一级菜单同时标蓝"。 */
  .nav-item.open > .nav-link .arrow {
    transform: rotate(180deg);
  }

  .subnav-link {
    padding: 10px 16px;
  }

  .site-main {
    padding: 16px;
  }

  .page-head {
    padding: 22px 20px 18px;
  }

  .page-title {
    font-size: 26px;
  }

  /* KPI 6 -> 3 列 */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .doc-page {
    padding: 24px 20px;
  }

  /* 页脚网站地图：品牌块**独占一行**（行间距 = 与列区的分隔距离），列区 5 列 -> 3 列
     （品牌与栏目分属两个容器，见 main.css .footer-map 的两级结构说明） */
  .footer-map {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
  }
}

/* ---------- 平板/手机 (<=720px) ---------- */
@media (max-width: 720px) {
  .brand-name {
    font-size: 15px;
  }

  .brand-logo {
    /* ≤720px 时 .brand-sub 被隐藏，文字块只剩 .brand-name(15px×1.15)
       ⇒ 用 --brand-text-h-narrow 保持「图标上/下沿与文字对齐」（2026-09-30 用户指定） */
    width: var(--brand-text-h-narrow);
    height: var(--brand-text-h-narrow);
  }

  .site-main {
    padding: 12px;
  }

  .page-head {
    padding: 18px 16px 14px;
    margin-bottom: 16px;
  }

  .page-title {
    font-size: 22px;
  }

  .page-desc {
    font-size: 13px;
  }

  .meta-bar {
    font-size: 12px;
  }

  /* 筛选栏: 纵向堆叠 */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 10px;
  }

  /* 筛选器(tagbar 分组胶囊)：保持白底浅边框，仅覆盖 flex 纵向干扰。
     ⚠ padding 必须**单一值**（page-authoring-rules §4.10）：原为三值 `12px 16px 4px`，
       底部只有 4px —— 手机版下标签离下边框明显比上/左近（2026-09-26 用户反馈：红利ETF页最明显）。
       改后取 12px（与上方移动端 .filter-bar 一致）；如需调整留白大小，只改这一处的单一值，勿写多值。 */
  .tagbar.filter-bar {
    display: block;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 0;
  }

  .filter-group {
    justify-content: space-between;
  }

  .filter-select,
  .filter-input {
    flex: 1;
    min-width: 0;
  }

  /* KPI 3 -> 2 列 */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card {
    padding: 12px 12px 12px 16px;
  }

  .stat-card .value {
    font-size: 20px;
  }

  /* 首页卡片 */
  .home-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 面板 */
  .panel-head {
    padding: 12px 0 12px 14px;   /* 右侧不留空间 */
  }
  .data-panel .panel-head {
    padding-left: 18px;   /* 竖线装饰留白(小屏略收窄) */
  }

  .panel-tools {
    font-size: 11px;
  }

  /* 数据表格: 容器横向滚动，保持可读性 */
  .panel-body {
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    font-size: 13px;
    min-width: 640px;
  }

  /* 产品列表：横向滚动 + 前两列冻结(小屏下冻结列收窄) */
  #tbl-funds.data-table {
    min-width: 1480px;
  }
  /* 已清盘精简视图(5 列)：窄屏也无需 1480px 的大宽度，回落通用紧凑值(2026-09-27 用户指定) */
  #tbl-funds.data-table.is-compact {
    min-width: 640px;
  }
  #tbl-funds .fix-code {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }
  #tbl-funds .fix-name {
    left: 100px;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
  }

  /* 移动端：产品列表(分页控制行数，触屏直接滑动即可) */
  .panel-body.funds-scroll {
    scrollbar-width: none;
  }

  /* 移动端吸顶表头：与主表一致的紧凑内边距(冻结列的 left 偏移由 JS 按主表实算值写入，无需在此覆盖) */
  .thead-stuck th {
    padding: 8px 10px;
  }
  .panel-body.funds-scroll::-webkit-scrollbar {
    display: none;
  }

  .data-table thead th,
  .data-table tbody td {
    padding: 8px 10px;
  }

  /* 文档页表格: 更紧凑 */
  .doc-page {
    padding: 16px 14px;
    font-size: 13.5px;
  }

  .doc-page table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .doc-page h2 {
    font-size: 17px;
  }

  .doc-page h3 {
    font-size: 15px;
  }

  .doc-page pre {
    font-size: 11.5px;
    padding: 10px 12px;
  }

  /* 页脚网站地图：列区 3 列 -> 2 列（品牌块仍独占一行、与列区留白隔开） */
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
  }
  .footer-map {
    gap: 24px;
  }
  .site-footer .footer-inner {
    padding: 22px 16px 0;
  }

  .empty-state {
    padding: 40px 16px;
  }

  .empty-state .code-block {
    font-size: 11px;
  }
}

/* ---------- 超小屏 (<380px) ---------- */
@media (max-width: 380px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .brand-name {
    font-size: 14px;
  }
}

/* ---------- 基金经理详情页：窄屏档案块改为纵向（2026-09-26） ----------
   横向「头像 + 键值」在手机上会挤成一列窄条，改为上下堆叠；头像保持比例居中不留空。 */
@media (max-width: 720px) {
  .mgr-profile {
    flex-direction: column;
    gap: 14px;
  }
  .mgr-profile-photo { flex: 0 0 auto; }
  /* 键值组：窄屏由 3 列降为 2 列（三列时每列仅 ~100px，「在管产品规模/代表基金」的值会挤成两行） */
  .mgr-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 注：原此处有 `.mgr-intro { max-width: none; }`——基类已不再限宽，2026-09-26 删除该冗余覆盖 */
}