/* ==========================================================================
   移动端适配补丁  mobile.css
   --------------------------------------------------------------------------
   ⚠️ 本文件只允许出现 max-width 媒体查询。
   这是为了从机制上保证「PC 端零改动」：

     · 所有规则都包在 @media (max-width: N) 里
     · 桌面视口下这些规则完全不参与层叠计算
     · 因此 PC 端渲染结果与引入本文件之前完全一致

   若在文件末尾之外直接写无媒体查询的选择器，PC 端就会被影响，务必避免。

   纳入范围（对照 2026-10-31 的实测基线）：
     1. 触摸目标过小 —— 顶栏菜单按钮 16×16px，是手机上打开侧栏的唯一入口
     2. 输入框字号 < 16px —— iOS Safari 聚焦时强制放大整页
     3. 后台表格 7~9 列、宽 633~913px —— 横向滚动手感差，改卡片式
     4. 账号中心资料区 —— 企业名被挤成 3 行
     5. 安全区与动态视口高度 —— iPhone 底部横条、地址栏收缩
   ========================================================================== */

/* ==========================================================================
   1. 全局基础（≤ 767px，覆盖大多数手机横竖屏）
   ========================================================================== */
@media (max-width: 767px) {
  /* 输入框字号统一提到 16px。
     iOS Safari 的行为是：聚焦时若字号 < 16px 就强制缩放整个视口，
     用户必须手动缩回去，体验极差。这是移动端最容易被忽略的一条。 */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 触摸时不再出现灰色高亮方块（Android Chrome 默认行为） */
  a,
  button,
  [role='button'],
  .btn,
  .icon-btn,
  .sidebar__item {
    -webkit-tap-highlight-color: transparent;
  }

  /* 长单词 / 长链接不撑破容器 */
  .table td,
  .card,
  .page-head__desc {
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   2. 后台 / 账号中心的顶栏与侧栏（≤ 767px）
   侧栏已经是抽屉式（fixed + translateX(-100%)），
   真正的问题是打开它的按钮只有 16×16px。
   ========================================================================== */
@media (max-width: 767px) {
  .topbar__toggle {
    /* 视觉上图标仍是 16px，但点击热区扩到 44×44（iOS 人机界面指南的建议值）。
       原先靠 margin-left: -14px 抵消额外宽度、让图标贴齐左边缘；
       现在顶栏最左侧多了「返回上一页」按钮，菜单按钮不再是第一个元素，
       这个负外边距会让两个按钮的触摸热区重叠、并压到返回按钮上，
       所以要归零（贴齐左边缘的责任移交给 .topbar__back 自己的负外边距）。 */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-left: 0;
    align-items: center;
    justify-content: center;
  }

  /* 同样的 44×44 热区处理；它才是顶栏第一个元素，由它来抵消左侧内边距 */
  .topbar__back {
    min-width: 44px;
    min-height: 44px;
    margin-left: -12px;
  }

  /* 顶栏标题区：加了返回按钮后，可用宽度少了 44px。
     账号中心标题较长（「信息资料与绑定」），实测被压成 3 行、高 106px，
     顶栏高度撑破。改为单行 + 省略号，让它在任何宽度下都保持一行。

     min-width: 0 是关键：flex 子项默认 min-width:auto，
     内容比容器宽时不会收缩，只能换行 —— 这正是压成 3 行的直接原因。 */
  .topbar > div:not(.topbar__right) {
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar__title,
  .topbar__sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 右侧图标组收紧间距，把省下的宽度还给标题 */
  .topbar__right {
    gap: 0.25rem;
    flex: none;
  }

  /* 顶栏里的「管理后台」文字按钮在手机上占 86px，加返回按钮后
     标题只剩 50px（「信息资料与绑定」被截成「信…」）。
     改为只留图标的方形按钮，省下的 ~50px 全部还给标题。
     该入口在手机侧栏里没有重复项，所以保留可点，只是去掉文字。 */
  .topbar__right .btn--sm {
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  /* 文字隐藏后必须有图标兜底，否则按钮会变成一个空白方块。
     用 CSS 画一个「控制台」图形（四宫格），不依赖图片与字体。 */
  .topbar__right .btn--sm::before {
    content: '';
    width: 16px;
    height: 16px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 7px 7px no-repeat,
      linear-gradient(currentColor, currentColor) 100% 0 / 7px 7px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 7px 7px no-repeat,
      linear-gradient(currentColor, currentColor) 100% 100% / 7px 7px no-repeat;
    opacity: 0.85;
  }

  .topbar {
    /* 顶部内边距收紧，给内容留高度 */
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* 抽屉宽度不超过屏幕 84%，留出可见的遮罩区域供点击关闭 */
  .sidebar {
    width: min(280px, 84vw);
  }

  /* 侧栏菜单项触摸高度提上来（当前 39px，接近但不达标） */
  .sidebar__item {
    min-height: 44px;
  }

  .sidebar__item:active {
    background: rgba(15, 23, 42, 0.06);
  }
}

/* ==========================================================================
   3. 后台表格 → 卡片式（≤ 767px）
   --------------------------------------------------------------------------
   背景：后台 4 张表分别是 7 / 9 / 8 / 9 列，实测表格宽度 633~913px，
   而手机容器只有 356px。虽然 .table-wrap 有 overflow-x:auto 不会撑破页面，
   但用户要横向拖动才能看全一行，操作列也在屏幕外。

   方案：表头隐藏，每行变成一张卡片，每个单元格左侧显示字段名。
   字段名来自 JS 模板里的 data-label 属性（本文件不含任何 JS 改动）。

   注意：colspan 的空状态行（table__empty）必须排除，
   否则"暂无数据"会被套进卡片布局。
   ========================================================================== */
@media (max-width: 767px) {
  .table-wrap {
    overflow-x: visible;
  }

  .table {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
  }

  .table thead {
    /* 表头在手机上不可见，字段名改由每格 data-label 呈现 */
    display: none;
  }

  .table tbody {
    display: block;
  }

  .table tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.03);
  }

  .table tbody tr:last-child {
    margin-bottom: 0;
  }

  .table tbody tr:hover {
    background: rgba(15, 23, 42, 0.03);
  }

  .table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    text-align: right;
  }

  .table tbody tr td:last-child {
    border-bottom: none;
  }

  /* 字段名标签：只在有 data-label 时出现 */
  .table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 42%;
    color: var(--text-faint);
    font-size: 0.75rem;
    text-align: left;
    line-height: 1.5;
  }

  /* 单元格内容允许收缩，避免长文本把标签挤掉 */
  .table td > * {
    min-width: 0;
  }

  /* 空状态行：整行居中，不套卡片样式 */
  .table tbody tr:has(> td.table__empty) {
    border: none;
    background: none;
  }

  .table td.table__empty {
    display: block;
    text-align: center;
    padding: 2.5rem 1rem;
  }

  .table td.table__empty::before {
    content: none;
  }

  /* 操作列不再需要吸附，卡片里它本来就在最下方 */
  .table__sticky-col {
    position: static;
    box-shadow: none;
    background: transparent !important;
  }

  /* 卡片内操作按钮组改为右对齐，与其它行一致 */
  .table__actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* 数字列在卡片里不再右对齐，跟随 flex 布局 */
  .table__num {
    text-align: right;
  }
}

/* ==========================================================================
   4. 账号中心资料区（≤ 639px）
   实测问题：头像 + 姓名 + 企业名 + 「编辑资料」按钮挤在一行，
   企业名被压成 3 行（"政岸 / 信息科技（上海）有 / 限公司"）。
   ========================================================================== */
@media (max-width: 639px) {
  .profile-head {
    flex-wrap: wrap;
    gap: 0.875rem;
  }

  .profile-head > .btn,
  .profile-head > button {
    /* 按钮不再和头像抢横向空间，单独占一行靠左 */
    flex: 0 0 auto;
  }

  .profile-name {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   5. 移动端触感与安全区（≤ 767px）
   ========================================================================== */
@media (max-width: 767px) {
  /* 底部弹层 / 固定底栏避开 iPhone 底部横条 */
  .modal,
  .sheet,
  .bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* 内容区底部留白，避免最后一行被横条压住 */
  .content {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  }

  /* 横向滚动更顺滑（表格兜底场景仍会用到） */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* 分页器在窄屏换行时不要挤成一团 */
  .pager {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   6. 动态视口高度（≤ 767px）
   --------------------------------------------------------------------------
   100vh 在移动浏览器里指的是「地址栏收起时的最大高度」，
   地址栏展开时内容会被裁掉。优先用 dvh，老浏览器回落到 vh。
   ========================================================================== */
@supports (height: 100dvh) {
  @media (max-width: 767px) {
    .sidebar {
      height: 100dvh;
      bottom: auto;
    }

    .modal__dialog,
    .sheet {
      max-height: 90dvh;
    }
  }
}
/* ==========================================================================
   7. 数据看板（≤ 767px）
   --------------------------------------------------------------------------
   看板改成「结论条 → KPI → 趋势 → 主维度 → 次维度」之后，桌面上的两列
   在手机上会落成四张单列 KPI 卡，一屏放不下，得翻三下才看到趋势图。
   这里把 KPI 压成两列、并收紧结论条的字号与间距。
   ========================================================================== */
@media (max-width: 767px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
    margin-bottom: 1rem !important;
  }
  .stat { padding: 0.75rem 0.875rem; }
  .stat__value { font-size: 1.25rem; }
  .stat__label { margin-bottom: 0.375rem; font-size: 0.6875rem; }
  .stat__note { font-size: 0.625rem; }

  .bi-story {
    padding: 0.75rem;
    gap: 0.375rem;
    margin-bottom: 1rem;
  }
  .bi-story__row { font-size: 0.75rem; line-height: 1.55; }

  /* 趋势图在窄屏上高度收一点，否则占掉大半屏 */
  .bi-chart { height: 160px; }
  .bi-trend__peak { font-size: 0.6875rem; }

  /* 主维度卡固定单列，次维度卡片也单列 —— auto-fit 在 390px 下本来就会
     落成一列，这里显式声明避免中间尺寸（平板竖屏）出现半宽卡片 */
  .bi-pair { grid-template-columns: 1fr; gap: 1rem; }
  .ch-bars--two { grid-template-columns: 1fr; gap: 0; }

  /* 次维度页签在小屏可以横向滚动，四个页签挤在一行会换行成两排 */
  .bi-sub__head { gap: 0.5rem; }
  .bi-sub__head .bi-seg--sm {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bi-sub__head .bi-seg--sm::-webkit-scrollbar { display: none; }
  .bi-sub__head .bi-seg--sm .bi-seg__item { white-space: nowrap; flex: none; }
  .bi-sub__hint { display: none; }

  /* 交叉透视表在手机上必然横向滚动，行头吸附保留，其余放开 */
  .bi-cross__th span { max-width: 5.5rem; }
  .bi-cross__rowhead span { max-width: 6rem; }
}