/* ============================================================
   食息指南 · 移动端适配（2026-08-17）
   ------------------------------------------------------------
   原则：
   1. 桌面端（≥768px）零影响——手机规则全部包在 max-width:767px 内，
      平板（768–1024px）仅微调字号/padding，保持表格布局。
   2. 不修改 HTML 结构与 JS 逻辑；排序下拉框由 mobile.js 动态注入。
   3. 触屏体验：36px 触控区、无 hover 残留、安全区适配。
   ============================================================ */

/* ============ 平板区间 768–1024px：保留表格，防拥挤 ============ */
@media (min-width: 768px) and (max-width: 1024px) {
  .page { padding: 16px; }
  .main-nav { margin: 0 12px; }
  .main-nav-item { padding: 0 12px; font-size: 13px; }
  .index-table th { padding: 8px 5px; font-size: 12px; }
  .index-table td { padding: 7px 5px; font-size: 11.5px; white-space: normal; }
  .index-table .col-name { min-width: 72px; }
  .index-table .col-code { font-size: 11px; }
  .index-table th:first-child, .index-table td:first-child { padding-left: 8px; }
  .asset-table-header { font-size: 11px; }
  .asset-table-header, .asset-row { gap: 2px; padding-left: 10px; padding-right: 10px; }
  .asset-row { font-size: 12px; }
  .detail-body { padding: 0 10px; }
  .weekly-body { padding: 0 12px; }
}

/* ============ 手机端（≤767px）：全部适配 ============ */
@media (max-width: 767px) {

  /* ---- 触控基础 ---- */
  * { -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .page { padding: 12px; }

  /* ---- 1. 顶部导航：汉堡菜单（默认折叠，2026-08-17 用户要求）---- */
  .top-bar {
    padding-top: env(safe-area-inset-top);
    height: auto;
    min-height: 52px;
  }
  .mobile-hamburger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 4px; width: 40px; height: 40px; padding: 10px;
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
  }
  .mobile-hamburger .hb-bar {
    display: block; height: 2px; background: #1c1c1e; border-radius: 1px;
    transition: transform .2s, opacity .2s;
  }
  .mobile-hamburger.open .hb-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-hamburger.open .hb-bar:nth-child(2) { opacity: 0; }
  .mobile-hamburger.open .hb-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* ===== 汉堡菜单：左侧滑出抽屉（2026-08-17 用户最终要求）
     左侧抽屉(280px) + 背景遮罩变暗 + 内容左对齐横向文字 + 子层级右侧 > 箭头 ===== */
  .m-nav-mask {
    position: fixed; inset: 0; z-index: 990;
    background: rgba(15, 18, 32, 0.45);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
  }
  .m-nav-mask.show { opacity: 1; visibility: visible; }

  .m-nav-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 84vw;
    margin: 0; padding: 0;
    background: #fff;
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
  }
  .m-nav-drawer.menu-open { transform: translateX(0); visibility: visible; }

  /* 顶部：logo 左对齐 + 右上 ✕ */
  .m-nav-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; flex-shrink: 0;
    padding: 0 16px;
  }
  .m-nav-drawer-header .m-drawer-logo { font-size: 16px; font-weight: 600; color: #111; white-space: nowrap; }
  .m-nav-close {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    border-radius: 0; color: #111;
  }
  .m-nav-close svg { width: 22px; height: 22px; }

  /* 一级列表：从上往下、左对齐、横向单行、行高适度 */
  .m-nav-list {
    flex: 1; overflow-y: auto;
    padding: 8px 0 16px;
  }
  .m-nav-list .main-nav-item {
    display: flex; align-items: center;
    height: 44px; padding: 0 16px;
    font-size: 15px; font-weight: 400; color: #111;
    white-space: nowrap;            /* 禁止单字竖排 / 换行 */
    text-align: left;
    background: none; border: none; border-radius: 0;
    cursor: pointer;
  }
  .m-nav-list .main-nav-item:hover { background: none; color: #111; }
  .m-nav-list .main-nav-item.active { font-weight: 600; color: #000; }
  /* 子层级：右侧 > 箭头 */
  .m-nav-list .main-nav-item.has-sub::after {
    content: ">";
    margin-left: auto;
    padding-left: 8px;
    font-size: 13px; font-weight: 400; color: #999;
  }

  /* 二级层：抽屉内覆盖（从右侧滑入第二层） */
  .m-nav-sub {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: #fff;
    display: flex; flex-direction: column;
    z-index: 5;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s;
  }
  .m-nav-sub.open { transform: translateX(0); visibility: visible; }
  .m-nav-sub-header {
    display: flex; align-items: center; gap: 2px;
    height: 60px; flex-shrink: 0;
    padding: 0 8px 0 4px;
  }
  .m-nav-sub-back {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    border-radius: 0; color: #111;
  }
  .m-nav-sub-back svg { width: 22px; height: 22px; }
  .m-nav-sub-title { font-size: 15px; font-weight: 500; color: #111; white-space: nowrap; }
  .m-nav-sub-list { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
  .m-nav-sub-group {
    margin: 0; padding: 8px 16px 4px;
    font-size: 12px; font-weight: 400; color: #999;
  }
  .m-nav-sub .dropdown-item {
    display: flex; align-items: center;
    height: 44px; padding: 0 16px;
    font-size: 14px; font-weight: 400; color: #555;
    white-space: nowrap; text-align: left;
    background: none; border: none; border-radius: 0;
    cursor: pointer;
  }
  .m-nav-sub .dropdown-item:hover { background: none; color: #555; }
  .m-nav-sub .dropdown-item.active { font-weight: 600; color: #000; }

  .m-nav-drawer .main-nav-item.active { font-weight: 700; color: #000; }
  .m-nav-drawer .dropdown-item.active { font-weight: 700; color: #111; }
  .m-nav-drawer .main-nav-item:last-child { border-bottom: none; }
  .m-nav-drawer .main-nav-item .arrow { display: none; }   /* 平铺展开后箭头无意义（2026-08-17） */
  /* 二级选项：与一级样式完全一致（2026-08-17 用户要求：无背景/无符号/无 padding 容器感），选中主色蓝 */
  .m-nav-drawer .dropdown {
    position: static; top: auto; left: auto; right: auto;
    display: block;
    width: 100%; max-height: none; overflow: visible;
    margin: 0; padding: 0; z-index: auto;
    background: none; box-shadow: none; min-width: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .m-nav-drawer .dropdown-item { border-bottom: none; }
  .m-nav-drawer .dropdown-item::before { content: none; }   /* 无符号（参考 elevenreader） */

  /* ---- 2. 排序下拉框（mobile.js 注入）---- */
  .mobile-sort-select {
    display: block; width: 100%;
    margin: 0 0 10px; padding: 10px 30px 10px 12px;
    font-size: 14px; color: #1c1c1e;
    background: #fff; border: none; border-radius: 0;
    -webkit-appearance: none; appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, #8e8e93 50%),
      linear-gradient(135deg, #8e8e93 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
  }

  /* ---- 3. 通用卡片骨架（所有 .index-table 系列表）---- */
  .index-table-wrap { overflow: visible; }
  .index-table thead { display: none; }
  .index-table tbody { display: block; }
  .index-table tr {
    display: block;
    position: relative;
    background: #fff;
    border: 1px solid #eef1f8;
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .index-table tr:last-child { margin-bottom: 0; }
  .index-table td { display: inline; border: none; padding: 0; white-space: normal; }
  .index-table .col-code { display: inline-block; font-size: 11px; color: #8e8e93; margin-right: 6px; }
  .index-table .col-name { display: block; font-size: 15px; font-weight: 700; color: #1c1c1e; padding-right: 64px; }

  /* ---- 3a. 红利指数浏览器（9 列：代码/名称/日期/市场/成分/币种/股息率/当日/本年）---- */
  #indexListContainer .index-table .col-yield {
    position: absolute; top: 12px; right: 14px;
    font-size: 18px; font-weight: 700; color: #001AFF;
  }
  #indexListContainer .index-table td:nth-child(3),
  #indexListContainer .index-table td:nth-child(4),
  #indexListContainer .index-table td:nth-child(5),
  #indexListContainer .index-table td:nth-child(6) {
    display: inline-block; font-size: 11px; color: #8e8e93; margin-top: 4px;
  }
  #indexListContainer .index-table td:nth-child(3)::after,
  #indexListContainer .index-table td:nth-child(4)::after,
  #indexListContainer .index-table td:nth-child(5)::after {
    content: "\00b7"; color: #d0d0d6; margin: 0 3px;
  }
  #indexListContainer .index-table .col-pct {
    display: inline-block; margin: 6px 6px 0 0;
    padding: 2px 8px; font-size: 11px; font-weight: 600;
    border-radius: 4px;
  }
  #indexListContainer .index-table .col-pct.up   { background: #fbeaea; color: #d0312d; }
  #indexListContainer .index-table .col-pct.down { background: #e9f4ef; color: #2d6a4f; }
  #indexListContainer .index-table .col-pct.na   { background: #f3f3f6; color: #b0b0b8; }

  /* ---- 3b. 月月分红 ETF / 场外（7 列：代码/名称/跟踪/费率/年度/月均/最近分红）---- */
  #monthlyEtfContainer .index-table .col-name,
  #monthlyFundContainer .index-table .col-name { padding-right: 84px; }
  #monthlyEtfContainer .index-table td:nth-child(6),
  #monthlyFundContainer .index-table td:nth-child(6) {
    position: absolute; top: 12px; right: 14px;
    font-size: 15px; font-weight: 700; color: #001AFF;
  }
  #monthlyEtfContainer .index-table td:nth-child(3),
  #monthlyFundContainer .index-table td:nth-child(3) {
    display: block; font-size: 12px; color: #4a4f5e; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #monthlyEtfContainer .index-table td:nth-child(4),
  #monthlyFundContainer .index-table td:nth-child(4),
  #monthlyEtfContainer .index-table td:nth-child(5),
  #monthlyFundContainer .index-table td:nth-child(5),
  #monthlyEtfContainer .index-table td:nth-child(7),
  #monthlyFundContainer .index-table td:nth-child(7) {
    display: inline-block; font-size: 11px; color: #8e8e93; margin-top: 4px;
  }
  #monthlyEtfContainer .index-table td:nth-child(4)::after,
  #monthlyFundContainer .index-table td:nth-child(4)::after,
  #monthlyEtfContainer .index-table td:nth-child(5)::after,
  #monthlyFundContainer .index-table td:nth-child(5)::after {
    content: "\00b7"; color: #d0d0d6; margin: 0 3px;
  }
  #monthlyEtfContainer .index-table td:nth-child(7),
  #monthlyFundContainer .index-table td:nth-child(7) { color: #4a4f5e; }

  /* ---- 3c. 境内 / 港交所红利 ETF（5 列：代码/名称/跟踪/成立日/费率）---- */
  #cnEtfListContainer .index-table .col-name,
  #hketfListContainer .index-table .col-name { padding-right: 0; }
  #cnEtfListContainer .index-table td:nth-child(3),
  #hketfListContainer .index-table td:nth-child(3) {
    display: block; font-size: 12px; color: #4a4f5e; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #cnEtfListContainer .index-table td:nth-child(4),
  #cnEtfListContainer .index-table td:nth-child(5),
  #hketfListContainer .index-table td:nth-child(4),
  #hketfListContainer .index-table td:nth-child(5) {
    display: inline-block; font-size: 11px; color: #8e8e93; margin-top: 4px;
  }
  #cnEtfListContainer .index-table td:nth-child(4)::after,
  #hketfListContainer .index-table td:nth-child(4)::after {
    content: "\00b7"; color: #d0d0d6; margin: 0 3px;
  }
  #cnEtfListContainer .index-table td:nth-child(5),
  #hketfListContainer .index-table td:nth-child(5) { color: #001AFF; font-weight: 600; }

  /* ---- 4. 主流资产食息率表（7 列）→ 卡片两行式 ---- */
  .asset-table { overflow: visible; border: none; background: transparent; }
  .asset-table-header { display: none; }
  .asset-table { display: flex; flex-direction: column; gap: 10px; }
  .asset-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "type type yield"
      "name name yield"
      "date note src"
      "fav  fav  fav";
    gap: 2px 8px;
    padding: 12px 14px;
    background: #fff;
    width: 100%;
  }
  .asset-type-cell  { grid-area: type;  font-size: 11px; font-weight: 600; }
  .asset-name-cell  { grid-area: name;  font-size: 15px; font-weight: 700; color: #1c1c1e; }
  .asset-yield-cell { grid-area: yield; font-size: 18px; font-weight: 700; text-align: right; align-self: center; }
  .asset-date-cell  { grid-area: date;  font-size: 11px; color: #8e8e93; white-space: nowrap; }
  .asset-note-cell  { grid-area: note;  font-size: 11px; color: #8e8e93; min-width: 0;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asset-source-cell{ grid-area: src;   font-size: 11px; color: #8e8e93; white-space: nowrap; }
  .asset-note-cell::before, .asset-source-cell::before {
    content: "\00b7"; margin: 0 5px; color: #d0d0d6;
  }
  .asset-fav-cell { grid-area: fav; text-align: right; }
  .asset-fav-cell .fav-btn {
    min-width: 36px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ---- 5. 详情页 ---- */
  .detail-info-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .detail-info-row .value { text-align: left; font-size: 14px; }
  .detail-info-row .value.yield { font-size: 18px; }
  .detail-chart-canvas { height: 220px !important; width: 100% !important; }
  .detail-slider { height: 44px; }
  .detail-slider-handle { width: 26px; height: 30px; font-size: 11px; }
  .detail-slider-track { height: 5px; }
  .detail-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* ---- 6. 触控区 36px 下限 ---- */
  .index-tag, .weekly-nav-item {
    min-height: 36px;
    display: inline-flex; align-items: center;
    border: none;
  }
  .dropdown-item { min-height: 40px; display: flex; align-items: center; }
  .index-tag-reset { min-height: 36px; display: inline-flex; align-items: center; }



  /* ---- 9. 筛选器：标签不换行，横向滑动（2026-08-17 用户要求，避免换行显得选项多）---- */
  .index-tagbar-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .index-tagbar-row::-webkit-scrollbar { display: none; }
  .index-tagbar-group,
  .index-tag,
  .index-tag-reset { flex-shrink: 0; white-space: nowrap; }

  /* ---- 8. 移动端独立渲染层卡片（2026-08-17 中间态，renderXxxMobile 直接生成）---- */
  .m-list { display: flex; flex-direction: column; gap: 10px; }
  .m-card {
    position: relative; background: #fff;
    padding: 12px 14px; cursor: pointer;
  }
  .m-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .m-name  { font-size: 15px; font-weight: 700; color: #1c1c1e; min-width: 0; }
  .m-type  { font-size: 11px; font-weight: 600; }
  .m-yield { font-size: 18px; font-weight: 700; text-align: right; white-space: nowrap; }
  .m-fee   { font-size: 13px; font-weight: 600; color: #001AFF; white-space: nowrap; }
  .m-card-name { font-size: 15px; font-weight: 700; color: #1c1c1e; margin-top: 2px; }
  .m-card-meta { font-size: 11px; color: #8e8e93; margin-top: 4px; padding-right: 26px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-card-pcts { margin-top: 6px; }
  .m-pct { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
           border-radius: 4px; margin-right: 6px; }
  .m-pct.up   { background: #fbeaea; color: #d0312d; }
  .m-pct.down { background: #e9f4ef; color: #2d6a4f; }
  .m-pct.na   { background: #f3f3f6; color: #b0b0b8; }
  .m-track { font-size: 12px; color: #4a4f5e; margin-top: 4px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-card-fav { position: absolute; bottom: 6px; right: 8px; }
  .m-card-fav .fav-btn {
    min-width: 36px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ---- 7. 取消触屏 hover 残留（仅无鼠标设备；桌面鼠标不受影响）---- */
  @media (hover: none) {
    .index-tag:hover, .weekly-nav-item:hover, .index-tag-reset:hover,
    .main-nav-item:hover, .dropdown-item:hover {
      background: transparent; color: inherit; border-color: inherit;
    }
    .index-table tr:hover td { background: transparent; }
    .index-table th:hover, .asset-table-header:hover { background: #001aff; }
    .index-tag.active, .dropdown-item.active, .main-nav-item.active {
      background: #001aff; border-color: #001aff; color: #fff;
    }
  }
}