/* ============================================================
   后台管理 · 移动端适配补丁（2026-11-11 · 修 P2-05）
   
   问题
     390×844 视口下，后台部分模块出现页面级横向滚动：
       · 采集管理（collect）     溢出 44px  —— .card 内表单行过宽
       · 邮箱配置（email_config） 溢出 492px —— 表格 575px 直接撑开页面
     用户必须左右拖动才能看全，表格右侧列完全不可见。

   原则
     1) **横向滚动只发生在表格容器内部**，绝不允许撑开 body
        —— 这是报告里明确写的预期："表格横向滚动应限制在表格容器内"。
     2) 表单栅格在 768px 下改单列。
     3) 不动桌面端任何规则，全部包在媒体查询里。

   为什么不用 admin.css 单独文件
     后台现有两条 CSS 链（app.css + portal.css）已覆盖绝大多数场景，
     这里只是补窄屏的溢出控制，20 行能解决的事不必再开一个文件增加请求。
   ============================================================ */

@media (max-width: 768px) {
  /* ---------- ① 表格：滚动限制在容器内 ---------- */
  /* 后台表格都是裸 <table>（没有包裹层），直接给 table 本身设 display:block
     会破坏表格布局。用 max-width + overflow 让它在自己身上横滚。 */
  .content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 表格自身滚动时不要再带动整页 */
    overscroll-behavior-x: contain;
  }
  /* 表格内容保持原有列宽（否则会被压成一条条竖排文字） */
  .content table > thead,
  .content table > tbody,
  .content table > tfoot {
    display: table;
    width: 100%;
    min-width: 520px;
  }

  /* ---------- ② 卡片与表单：单列堆叠 ---------- */
  .content { padding: 12px; }
  .card { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .card-head { flex-wrap: wrap; }

  /* form-row 是后台最常见的横排表单（label + input 一行） */
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .form-row > label {
    flex: 1 1 100%;
    min-width: 0;
  }
  .form-row > .input,
  .form-row > input,
  .form-row > select,
  .form-row > textarea {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }
  /* 行内写了 style="width:100px" 的窄输入框（如代理池的提取数量）也要拉开 */
  .form-row > input[style*="width"] {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 140px;
  }

  .form-grid { grid-template-columns: 1fr !important; }

  /* ---------- ③ 顶部工具栏与操作区换行 ---------- */
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-head > div { flex: 1 1 100%; min-width: 0; }
  .page-head .btn,
  .card-head .btn { flex: 0 0 auto; }

  /* ---------- ④ 代码块与长 URL（采集源地址常见） ---------- */
  .content code,
  .content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
  }
  /* 长串 URL / 邮箱在窄屏必须能断行，否则一条就把页面撑宽 */
  .content td,
  .content th { word-break: break-word; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .content { padding: 10px 8px; }
  .content table > thead,
  .content table > tbody,
  .content table > tfoot { min-width: 440px; }
}

/* ---------- ⑤ 仪表盘 / 会员中心栅格（2026-11-11 修 P2-06） ----------
 * 实测 390px 下 .grid-2 仍是 2 列（295.98px + 202.53px = 498px），
 * 卡片被挤成 203px 宽却顶到 529px，整页横向溢出 139px。
 * app.css 里 960px 只把 .grid-2 设成 1fr 1fr，没有更窄档的单列规则。
 * 这里补 700px 以下一律单列，并给卡片兜住 min-width:0
 * （grid 子项默认 min-width:auto，内容长一点就会把轨道撑开）。 */
@media (max-width: 700px) {
  .grid-2,
  .grid-3,
  .stat-grid,
  .module-grid,
  .form-grid,
  .ai-grid {
    grid-template-columns: 1fr !important;
  }
  /* grid / flex 子项必须允许收缩，否则长文本会把列撑爆 */
  .grid-2 > *,
  .grid-3 > *,
  .stat-grid > *,
  .module-grid > *,
  .card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- 密码框「显示 / 隐藏」切换（2026-11-11 修 P3-08） ----------
 * 后台新增会员 / 重置密码的输入框已从 type=text 改成 password，
 * 管理员仍需要一个核对入口，这里给个贴在右侧的小按钮。 */
.pwd-wrap { position: relative; display: block; width: 100%; }
.pwd-wrap .pwd-input { padding-right: 52px; width: 100%; box-sizing: border-box; }
.pwd-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer;
  font-size: 12px; color: #6b7280; padding: 4px 8px; border-radius: 6px;
  font-family: inherit;
}
.pwd-eye:hover { color: #0b5bd7; background: #f2f6fd; }