/* ==========================================================================
   移动端适配补丁  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 人机界面指南的建议值）。
       用负外边距抵消额外宽度，避免顶栏标题位置发生位移。 */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-left: -14px;
    align-items: center;
    justify-content: center;
  }

  .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(255, 255, 255, 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(255, 255, 255, 0.015);
  }

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

  .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.015);
  }

  .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(255, 255, 255, 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;
    }
  }
}