/* ============================================================
   Astudlox 题库管理站 · 移动端适配补丁 v1.0
   覆盖：批量导入页横向溢出(604px→390px)、题目管理表格、
        操作日志时间列换行、导航触控区、工作台 15px 溢出
   引入方式（二选一）：
     A. 直接部署本文件：<link rel="stylesheet" href="/assets/mobile-fix.css">
     B. 合并进 app.css：将以下内容追加到 app.css 文件末尾
   兼容性：iOS Safari 12+ / Chrome / Edge；无需改动任何 HTML 结构
   ============================================================ */

/* ---------- 1. 视口兜底：杜绝任何元素撑破屏幕 ---------- */
html,
body {
  overflow-x: hidden;
}

.page {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- 2. 卡片容器允许收缩（604px 溢出根因修复）
     原规则：.card 未设 min-width:0，flex/grid 子项默认
     min-width:auto，被 .table 的 min-width:640px 撑破页面
     → 已实测验证：文档宽度 604px 降至 390px
     注：表格自身保留最小宽度（列宽可读），改为在容器内横向滑动 ---------- */
.card,
.dash-card,
.table-wrap {
  min-width: 0;
}

/* 表格外层滚动容器严格约束在卡片内 */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- 3. 操作日志：时间列不换行（ISSUE-003）
     原：时间 "2026-09-07 03:43:43" 被拆成 3 行 ---------- */
@media (max-width: 640px) {
  .table th:first-child,
  .table td:first-child {
    white-space: nowrap;
  }
}

/* ---------- 4. 题干列：保证省略号截断生效（ISSUE-002） ---------- */
.cell-main {
  min-width: 0;
  max-width: 55vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 5. 导航触控区：图标按钮 ≥ 44×44（ISSUE-004，iOS HIG）
     原：≤640px 时仅 38/40px，且 5 个交互点挤在 ~200px 内 ---------- */
@media (max-width: 640px) {
  .nav-actions {
    gap: 4px;
  }
  .nav-actions .icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

/* ---------- 6. 工作台 15px 溢出（ISSUE-008）
     难度分布进度条区域被撑破，卡片内允许收缩 ---------- */
@media (max-width: 640px) {
  .dash-card {
    min-width: 0;
    overflow-x: hidden;
  }
  .diff-row,
  .diff-bar {
    min-width: 0;
  }
}