/* ============================================================================
   文都网课平台 · 移动端专项优化（nc-mobile.css）
   ----------------------------------------------------------------------------
   目标场景：企微免登链接 → 手机 / 企微内置浏览器（绝大多数真实流量）
   依据：deliverables/software-company/mobile-optimization-spec.md
   作者：涂雅观（UI 工程师）｜ 日期：2026-10-13

   加载位置：base.html 中 nc-theme-blue.css 之后、{% block extra_css %} 之前。
   设计约束：
     · 规则**全部限定在移动断点内**（主要 max-width:1023px，窄屏叠加 639.98px），
       不得影响桌面（≥1024px）观感。
     · 只用 --nc-* / 本文件新定义的 --m-* token，**禁止硬 HEX**
       （唯一例外：与主题无关的中性黑 rgba(0,0,0,x) 已注明）。
     · 不引用旧 tailwind 构建缺失的类；缺类用原生 CSS 实现。
     · 给元素写 display 的，必须补 .<类>.hidden{display:none}（本文件已按需处理）。
     · 提级：控件尺寸被全站表单规则压过时用 #main-content .类（0,2,0）。
   ============================================================================ */

/* ============================================================
   1. 移动专用 token（--m-*）—— 仅变量声明，无视觉副作用
   ============================================================ */
:root {
  /* 触控 */
  --m-tap-min: 44px;              /* 最小可点边长（iOS HIG / WCAG 2.5.5） */
  --m-tap-comfort: 48px;          /* 主操作按钮 / 底部条 */
  /* 排版 */
  --m-font-body: 14px;            /* 正文/说明下限 */
  --m-font-caption: 12px;         /* 装饰角标允许下限 */
  --m-font-h1: 20px;              /* 移动端页标题 */
  /* 间距 */
  --m-gutter-x: 16px;             /* 页面左右安全边距 */
  --m-card-pad: 16px;
  /* 结构 */
  --m-nav-h: 64px;                /* = 现有 h-16 */
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);   /* iOS 底部安全区 */
}

/* ============================================================
   2. 通用移动补丁（≤1023px：手机 + 平板）
   ============================================================ */

@media (max-width: 1023px) {

  /* ---- 2.1 正文与标题字号下限（范围限定 #main-content，避免影响导航/页脚） ---- */
  #main-content p,
  #main-content li,
  #main-content dd,
  #main-content td,
  #main-content .nc-cl-stat__label,
  #main-content .nc-card__meta-item { font-size: var(--m-font-body); }

  #main-content h1 { font-size: var(--m-font-h1); }

  /* ---- 2.2 触控目标兜底：所有 .nc-btn 抬到 ≥44；正方形图标按钮保持正方形 ---- */
  #main-content .nc-btn,
  #main-content .nc-btn--sm {
    min-height: var(--m-tap-min);
    font-size: var(--m-font-body);        /* .nc-btn--sm 原 13px → 14px（正文下限） */
  }
  /* 图标型按钮：宽=高=44（不得拉成长方形） */
  #main-content .nc-btn--icon,
  #main-content .nc-btn--icon.nc-btn--sm {
    width: var(--m-tap-min);
    min-width: var(--m-tap-min);
    height: var(--m-tap-min);
    min-height: var(--m-tap-min);
  }

  /* ---- 2.3 页脚：链接触控 ≥44、正文下限、避让 iOS 安全区 ---- */
  .nc-footer__links { gap: .75rem; flex-wrap: wrap; }
  .nc-footer__links a {
    display: inline-flex; align-items: center;
    min-height: var(--m-tap-min); padding: 0 .25rem;
  }
  .nc-footer__copy { font-size: var(--m-font-caption); }
  .nc-footer { padding-bottom: calc(1.25rem + var(--m-safe-bottom)); }

  /* ---- 2.4 触摸反馈：tap-highlight 已被 preflight 置透明 → 补 :active ---- */
  #main-content .nc-btn:active { transform: scale(.98); }
}

/* ============================================================
   3. 逐页补丁
   ============================================================ */

/* ---------- 3.0 全站导航 / 文本链接触控补充（≤1023px） ---------- */
@media (max-width: 1023px) {
  /* 跳转到主内容 链接（键盘聚焦时可见）→ ≥44 高 */
  .skip-link { min-height: var(--m-tap-min); display: inline-flex; align-items: center; }

  /* 顶栏品牌 Logo 链接 + 移动端抽屉面板内链接：≥44 高（原品牌 145×28） */
  nav[aria-label="主导航"] a,
  #nc-mobile-nav-panel a { min-height: var(--m-tap-min); }

  /* 面包屑文字链接：整行吸附到 ≥44 高，便于点按 */
  #main-content nav[aria-label="breadcrumb"] a {
    display: inline-flex; align-items: center;
    min-height: var(--m-tap-min);
  }

  /* 渐变主 CTA（继续观看 / 开始测验 / 已完成课程 CTA 等）→ ≥44 高 */
  #main-content a.bg-gradient-to-r,
  #main-content button.bg-gradient-to-br,
  #main-content a.bg-gradient-to-br { min-height: var(--m-tap-min); }

  /* 热力图月份/星期/图例标签：由 study_heatmap.js 以内联 style.fontSize=0.625rem(10px) 生成，
     含内联样式优先级高于普通类选择器 → 必须 !important 才能提升到 12px 底线（仅移动断点）。 */
  #main-content #nc-study-heatmap span { font-size: var(--m-font-caption) !important; }
}

/* ---------- 3.1 课程中心 /（course_list.html） ---------- */
@media (max-width: 639.98px) {
  /* 搜索框 / 下拉：min-height 40 → 44 */
  #main-content .nc-cl-search__input,
  #main-content .nc-cl-select { min-height: var(--m-tap-min); }

  /* Tab 段：等宽、≥44 高 */
  #main-content .nc-cl-seg { display: flex; width: 100%; }
  #main-content .nc-tab {
    flex: 1 1 0;
    min-height: var(--m-tap-min);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* 分页页码 36 → 44 */
  #main-content nav a.w-9,
  #main-content nav span.w-9 { width: var(--m-tap-min); height: var(--m-tap-min); }
}

/* ---------- 3.2 个人中心 /profile/（profile.html） ---------- */
@media (max-width: 1023px) {
  /* ① 学习活动热力图：容器全 CSS 原本无定义 → 溢出被裁切。加横向滚动容器。
        内层按月行/周格自然宽度，允许横滑。 */
  #main-content #nc-study-heatmap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }
  #main-content #nc-study-heatmap > * { min-width: max-content; }

  /* ② 排行榜隐私开关：视觉保持 48×26，用 ::after 外扩命中区到 44 高（.nc-toggle-switch
        未使用 ::after，无冲突；slider 用的是 .nc-toggle-slider::before）。 */
  #main-content .nc-toggle-switch { position: relative; }
  #main-content .nc-toggle-switch::after {
    content: ""; position: absolute;
    left: -8px; right: -8px; top: -9px; bottom: -9px;
  }

  /* ③ 企微免登输入行：input/按钮 ≥44（≤575.98 已竖排，见 nc-profile-sso.css） */
  #main-content .nc-sso-input { min-height: var(--m-tap-min); }
  #main-content .nc-sso-row .nc-btn { min-height: var(--m-tap-min); }

  /* ④ 课程进度折叠头 /「继续」按钮 ≥44 */
  #main-content #courseAccordion button[data-bs-toggle="collapse"] { min-height: var(--m-tap-min); }
  #main-content #courseAccordion a.whitespace-nowrap {
    min-height: var(--m-tap-min);
    display: inline-flex; align-items: center;
  }

  /* ⑤ 徽章页签按钮 ≥44 */
  #main-content .nc-badge-tab-btn { min-height: var(--m-tap-min); }
}

/* ---------- 3.3 通知中心 /notifications/（notification_center.html + notifications.js） ---------- */
@media (max-width: 639.98px) {
  #main-content #nc-nc-mark-all-read { min-height: var(--m-tap-min); }
  /* 列表条目：整行可点、≥44 高（条目由 JS 注入） */
  #main-content #nc-nc-list > * { min-height: var(--m-tap-min); }
}

/* ---------- 3.4 知识库 /knowledge/（knowledge.html） ---------- */
@media (max-width: 639.98px) {
  #main-content .nc-kb-head .nc-btn--sm { min-height: var(--m-tap-min); }

  /* 模式切换：等宽 ≥44 */
  #main-content .nc-kb-modes { width: 100%; }
  #main-content .nc-kb-mode {
    flex: 1 1 0;
    min-height: var(--m-tap-min);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* 表单：竖排、输入 42→44、提交 48 */
  #main-content .nc-kb-form { flex-direction: column; align-items: stretch; gap: .5rem; }
  #main-content .nc-kb-input__field { min-height: var(--m-tap-min); }
  #main-content #nc-kb-submit { min-height: var(--m-tap-comfort); }

  /* 结果条目内可点元素 ≥44 */
  #main-content .nc-kb-list a,
  #main-content .nc-kb-answer a { min-height: var(--m-tap-min); }
}

/* ---------- 3.5 组织与配课 /manage/org/（org_dashboard.html） ---------- */
@media (max-width: 639.98px) {
  /* 滚动提示（模板新增 .nc-org-scrollhint，默认隐藏，仅手机显示） */
  #main-content .nc-org-scrollhint {
    display: flex; align-items: center; gap: .375rem;
    margin: 0 0 .5rem; font-size: var(--m-font-caption); color: var(--nc-text-muted);
  }

  /* 表格按钮 ≥44（表格 min-width:648px，本就要横向滚动，变大后仍可滑） */
  #main-content .nc-org-table .nc-btn--sm,
  #main-content .nc-org-assign-btn { min-height: var(--m-tap-min); }
  #main-content #nc-btn-add-dept,
  #main-content #nc-btn-add-pos { min-height: var(--m-tap-min); }

  /* 模态：全断点遮罩已由 .nc-org-modal/.bg-black-40 提供，这里仅收紧内距 */
  #main-content .nc-org-modal > div { max-width: 100%; padding: var(--m-card-pad); }
  #main-content .nc-org-modal .nc-btn { min-height: var(--m-tap-min); }
}

/* 滚动提示：桌面/平板隐藏，**仅**在窄屏显示（见上方 3.5 的 @media(max-width:639.98px)）。
 * ⚠️ 必须包在 min-width 媒体查询里：若写成顶层规则，它会与那条 display:flex **特异性相同(0,2,0)
 *    且源码在后** → 把窄屏的 flex 一并压成 none，导致手机端提示彻底不显示（QA 实测发现）。 */
@media (min-width: 640px) {
  #main-content .nc-org-scrollhint { display: none; }
}

/* ---------- 3.6 登录 / 注册（registration/login.html, register.html） ---------- */
@media (max-width: 1023px) {
  /* min-h-[calc(100vh-4rem)] 类在旧构建缺失 → 用页面级类 .nc-auth-shell 原生补回
     （含 iOS 安全区）。模板已给根容器加 class="nc-auth-shell"。 */
  #main-content .nc-auth-shell { min-height: calc(100vh - var(--m-nav-h) - var(--m-safe-bottom)); }

  #main-content #id_username,
  #main-content #id_password,
  #main-content #id_password1,
  #main-content #id_password2,
  #main-content #id_real_name,
  #main-content #id_phone {
    min-height: var(--m-tap-min);
    font-size: var(--m-font-body);
  }

  /* 底部文字链接触控 ≥44 */
  #main-content a[href*="register"],
  #main-content a[href*="login"],
  #main-content a[href*="password"] {
    display: inline-flex; align-items: center; min-height: var(--m-tap-min);
  }
}

/* ---------- 3.7 章节测验页（includes/_chapter_quiz.html） ---------- */
@media (max-width: 639.98px) {
  /* 底部提交条：避让 iOS 安全区（模板已加 class="nc-m-submitbar"） */
  #main-content .nc-m-submitbar {
    padding-bottom: calc(.75rem + var(--m-safe-bottom));
    padding-left: var(--m-gutter-x);
    padding-right: var(--m-gutter-x);
  }
  /* 选项行确保 ≥44 高 */
  #main-content .nc-quiz-question-card label { min-height: var(--m-tap-min); }
  /* 简答题输入框字号下限（防 iOS 聚焦自动放大：≥16px 更佳，这里取正文下限） */
  #main-content .nc-quiz-question-card textarea { font-size: 16px; }
}

/* border-3 类缺失 → 原生补回「提交中」转圈厚度 */
#main-content .nc-quiz-loading-overlay > div { border-width: 3px; }

/* ---------- 3.8 章节视频（includes/_chapter_video.html, course_detail.html） ---------- */
@media (max-width: 639.98px) {
  #main-content .aspect-video { border-radius: var(--nc-radius); }
}

/* ============================================================
   4. 暗色补充（[data-theme="dark"]）
   ============================================================ */

/* 4.1 测验底部提交条：bg-white/95 未在暗色被翻转（style.css 只覆盖了 .bg-white 与
       .bg-white/80）→ 暗色下仍是白条，刺眼。用 token 覆盖（限定移动断点，不影响桌面）。 */
@media (max-width: 639.98px) {
  [data-theme="dark"] #main-content .nc-m-submitbar {
    background-color: var(--nc-bg-card);
    border-top-color: var(--nc-border);
  }
}

/* 4.2 横滚容器滚动条（暗色）由 --nc-* 支撑，无需额外色值；此处仅统一 Safari 滚动条底色 */
@media (max-width: 1023px) {
  [data-theme="dark"] #main-content #nc-study-heatmap { scrollbar-color: var(--nc-border) transparent; }
}

/* ============================================================
   5. 缺失类原生兜底（仅补确实缺失者；已存在的一律不重复定义）
   ------------------------------------------------------------
   经跨全部 static/css/*.css 子串计数复核（_diag/check_all_css.py）：
     · 已存在，勿重定义：bg-black/40(nc-course-grid.css)、sr-only(style.css)、
       md:col-span-5/7(nc-course-grid.css)、md:grid-cols-12、lg:p-14、lg:col-span-2、
       translate-x-1/2、inset-0、z-[1080]、z-[1200]
     · 确实缺失，本文件已用原生 CSS 兜底：
       min-h-[calc(100vh-4rem)] → .nc-auth-shell
       text-[10px] / min-w-[18px] / h-[18px] → #nc-notification-badge
       border-3 → .nc-quiz-loading-overlay > div
   ============================================================ */

/* 通知铃铛徽章：min-w-[18px] h-[18px] text-[10px] 三缺失 → 用 id 补齐
   （只设尺寸/字号，不设 display，故不与 .hidden 切换冲突） */
#nc-notification-badge {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  line-height: 1;
  padding: 0 4px;
}