/* =========================================================================
   mobile.css — GPT 号池管理平台 · 移动端 / 触屏自适应增强
   仅新增覆盖，不改动 styles.css 既有规则；置于 styles.css 之后加载。
   策略：外壳(导航/工具栏/表单/弹窗/卡片)完全流式；
        数据表 = 增强横向滚动 + 关键表首列吸附 + 隐藏次要列(ID/说明)。
   断点：640px 手机(主)、900px 大屏手机横屏/小平板、400px 超小屏。
   ========================================================================= */

/* 用动态视口高度(dvh)替代 100vh，避免移动端浏览器地址栏伸缩导致跳动/截断 */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .login-view { min-height: calc(100dvh - 220px); }
}

/* ============================ 阶段0 基础层 ============================ */
@media (max-width: 640px) {
  /* 文本输入统一 ≥16px，避免 iOS 聚焦时自动放大整页 */
  input[type="text"], input[type="search"], input[type="password"],
  input[type="number"], input[type="email"], input[type="date"],
  input[type="datetime-local"], input:not([type]), textarea {
    font-size: 16px !important;
  }
  /* 加大可点区域（触屏友好） */
  .btn, .tab, .btn-logout { min-height: 40px; }
  .icon-btn, .gp-op-btn, .wp-chip, .btn-sm { min-height: 34px; }
  .modal-close { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
  main { padding: 16px 12px 40px; }
}

/* ==================== 阶段1 外壳：顶栏 + 药丸导航 ==================== */
@media (max-width: 640px) {
  .topbar { padding: 10px 14px; gap: 10px; }

  /* 品牌压缩：保留图标 + 主名，隐藏副标题 */
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-text b { font-size: 14px; }
  .brand-text small { display: none; }

  /* 用户区压缩：隐藏用户名，仅保留状态点 + 退出 */
  .user-area { gap: 8px; }
  .user-area .chip .uname { display: none; }
  .user-area .chip { padding: 6px 8px; }

  /* 药丸导航：整行横滑 + 两侧渐隐提示 + 更大点击区
     （topbar-admin 在 ≤1280px 已把 tabs 放到 grid-area:nav 整行，这里做移动端强化） */
  .topbar-admin .tabs {
    width: 100%;
    margin: 2px -14px 0;                 /* 顶到屏幕两侧，露出更多标签 */
    padding: 5px 14px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .topbar-admin .tab { scroll-snap-align: center; padding: 9px 14px; font-size: 13px; }

  /* toast 移到底部并近全宽，避免超出小屏、也更靠近拇指 */
  .toast-wrap { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }
  .toast { min-width: 0; max-width: none; width: 100%; }

  /* 顶部号池概览条：每档一行 */
  .apb-item { flex-basis: 100%; padding: 11px 14px; }
  .apb-metrics { gap: 16px; }
}

/* ============ 阶段2 工具栏 / 筛选行：流式化，覆盖内联定宽 ============ */
@media (max-width: 640px) {
  .card { padding: 14px; }

  /* 卡片头：标题块与工具块上下堆叠、各自占满整行 */
  .list-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .list-head .filter-row { width: 100%; }
  .filter-row { gap: 8px; }
  .filter-row.sched-tools { flex-wrap: wrap !important; }

  /* 非 list-head 的内联 flex 卡片头(封控中心/蒸馏抽查)里的占位撑满元素，移动端去掉避免大空隙 */
  .card-head span[style*="flex:1"], .card-head span[style*="flex: 1"] { display: none !important; }

  /* 让筛选/工具栏里的 select、搜索框自适应，覆盖 admin.html 内联写死的宽度 */
  .filter-row > select,
  .filter-row > .select-wrap,
  .filter-row > input[type="search"],
  .filter-row > input[type="text"],
  .filter-row > .search-input {
    flex: 1 1 140px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .select-wrap { width: 100%; }
  .search-input, .proxy-search { width: 100% !important; }

  /* 批量操作分组整行铺开 */
  .wp-group { display: flex; flex-wrap: wrap; width: 100%; gap: 6px; }
  .wp-group select { flex: 1 1 160px !important; width: auto !important; }
}

/* ==================== 阶段3 数据表：增强横向滚动 ==================== */
@media (max-width: 640px) {
  /* 统一：滚动容器惯性滚动；取消内部纵向滚动，改由整页纵向滚动(移动端更顺手)，
     同时覆盖 admin.html 内联的 max-height: calc(100vh - Npx) */
  .table-scroll,
  .tab-panel div[style*="overflow:auto"],
  .tab-panel div[style*="overflow: auto"] {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none !important;
  }

  /* 更紧凑的单元格，让更多列一屏可见 */
  table { font-size: 12px; }
  thead th { padding: 8px 9px; font-size: 11px; }
  tbody td { padding: 9px; }
  .row-actions .icon-btn, .gp-op-btn { padding: 6px 10px; }

  /* 首列吸附(冻结列)已按用户偏好移除：账号/用户列跟随表格一起左右滚动，不再钉在左侧 */

  /* —— 隐藏次要列(用户已确认) —— */
  /* 说明/reason 列：mail 池、Gmail 池用类名，安全隐藏 */
  .gm-reason-th, .gm-reason-cell { display: none !important; }
  /* 内部自增 ID 列：移动端速览价值最低，优先让位给关键指标 */
  #proxiesTable th:nth-child(1), #proxiesTable td:nth-child(1) { display: none !important; } /* ID */
  #wpTable th:nth-child(2), #wpTable td:nth-child(2),
  #gmTable th:nth-child(2), #gmTable td:nth-child(2),
  #olTable th:nth-child(2), #olTable td:nth-child(2),
  #tmTable th:nth-child(2), #tmTable td:nth-child(2) { display: none !important; }         /* ID(勾选框后一列) */
}

/* 超小屏：号池调度表再让位「配额重置 / 会员周期 / 说明」三个次要列 */
@media (max-width: 400px) {
  #schedTable th:nth-child(9),  #schedTable td:nth-child(9),   /* 配额重置 */
  #schedTable th:nth-child(10), #schedTable td:nth-child(10),  /* 会员周期 */
  #schedTable th:nth-child(12), #schedTable td:nth-child(12) { /* 说明 */
    display: none !important;
  }
}

/* ==================== 阶段4 弹窗 / 表单 ==================== */
@media (max-width: 640px) {
  /* 标准 .modal-overlay 弹窗：底部抽屉(bottom sheet)样式 */
  .modal-overlay { padding: 0 !important; place-items: end stretch !important; }
  .modal-overlay .modal {
    max-width: none !important;
    width: 100% !important;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    animation: sheetUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

  /* 操作按钮吸底、平分整行，避免误触和滚动找按钮 */
  .modal-actions {
    position: sticky;
    bottom: 0;
    margin: 16px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(11, 16, 32, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .modal-actions .btn { flex: 1 1 auto; }

  /* 内联自定义全屏遮罩(导入/导出/充值等)：底部抽屉化，去留白，卡片吃满高度 */
  div[style*="position:fixed"][style*="inset:0"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  div[style*="position:fixed"][style*="inset:0"] > .glass.card,
  div[style*="position:fixed"][style*="inset:0"] > .card.glass {
    width: 100% !important;
    max-height: 94dvh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* 所有内联两/三列栅格塌成单列 */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  .form-2col, .form-3col { grid-template-columns: 1fr !important; }
}

/* ============ 大屏手机横屏 / 小平板(641–900px) 轻量收敛 ============ */
@media (min-width: 641px) and (max-width: 900px) {
  main { padding: 24px 16px 48px; }
  .form-3col { grid-template-columns: 1fr 1fr; }
  .proxy-stats { grid-template-columns: repeat(2, 1fr); }
}

/* 平板(641–1024px)：宽表(最多 18 列)仍会横向溢出，确保惯性横滑顺滑 */
@media (min-width: 641px) and (max-width: 1024px) {
  .table-scroll,
  .tab-panel div[style*="overflow:auto"],
  .tab-panel div[style*="overflow: auto"] { -webkit-overflow-scrolling: touch; }
}