/* ============================================================
 * 全站移动端兜底样式（mobile-global）—— 老板硬规则（2026-10-31）：
 *   「项目中的每个模块里面的功能，都去做适配手机端的各个型号，用手机也能看完整适配。」
 *
 * 设计目标：一层全局兜底，一次改动让【所有页面/模块】在手机上先「能看全、能操作」，
 * 把逐页手改的成本压到最低。只做【加法/收窄】，不改结构、不动桌面观感：
 *   ① 整页横向溢出兜底（body overflow-x:clip，不破坏 sticky）；
 *   ② 宽表格横向滚动（配套 modules/mobile-responsive.js 自动包裹 .ec-mob-tbl-wrap）；
 *   ③ 图片/视频/画布不撑破容器；
 *   ④ 表单控件：全宽不溢出 + iOS 聚焦不缩放（font-size≥16px）+ 触控高度；
 *   ⑤ 工具栏/筛选条/操作按钮行自动换行；
 *   ⑥ 弹窗窄屏兜底（max-width:95vw + 内部滚动）。
 *
 * 加载顺序：本文件在 index.html 所有 CSS 之后加载（同物理行追加），
 * 相同特异性下后者胜，故能兜住各页遗漏；桌面（>900px）几乎不受影响。
 * 与既有断点体系（全局 1400/1024/768/640、page-shell 760/480）并存，不冲突。
 * ============================================================ */

/* ── ① 整页横向溢出兜底 ──
 * 用 overflow-x:clip 而非 hidden：clip 不创建滚动容器，
 * 不会破坏子元素的 position:sticky（表头/首列吸顶仍生效）。 */
html, body { max-width: 100%; }
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* ── ③ 媒体元素不撑破容器 ── */
.main img, .main video, .main canvas, .main iframe, .main svg,
.modal img, .modal video, .modal canvas {
  max-width: 100%;
}
.main img, .main video, .main canvas { height: auto; }

/* ── ② 宽表格横向滚动包裹（JS 自动挂 .ec-mob-tbl-wrap） ── */
.ec-mob-tbl-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* 触屏滚动到底/到顶时给一点视觉反馈，避免误以为卡住 */
  scrollbar-width: thin;
}
.ec-mob-tbl-wrap > table { max-width: none; }

/* ── ④⑤⑥ 手机/窄屏适配（与既有 768 断点同口径） ── */
@media (max-width: 900px) {
  /* flex 容器允许收缩，避免子项把父容器顶宽 */
  .main, .main .page { min-width: 0; }

  /* 工具栏 / 筛选条 / 操作按钮行：自动换行，不横向溢出 */
  .main [class*="toolbar"],
  .main [class*="filter"],
  .main [class*="action"],
  .main [class*="btn-row"],
  .main [class*="btns"],
  .main [class*="-bar"],
  .main [class*="header"],
  .main [class*="chips"] {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  /* ④ 表单控件：不溢出 + 触控友好 + iOS 聚焦不缩放 */
  .main input[type="text"], .main input[type="number"], .main input[type="search"],
  .main input[type="date"], .main input[type="datetime-local"], .main input[type="time"],
  .main input[type="email"], .main input[type="tel"], .main input[type="url"],
  .main input[type="password"], .main select, .main textarea,
  .modal input, .modal select, .modal textarea {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* <16px 会触发 iOS Safari 聚焦自动放大，这里统一到 16px */
  }
  .main textarea, .modal textarea { width: 100%; }

  /* 触控目标高度：标准按钮/下拉/单行输入不低于 38px（手指可点）。
   * 刻意不覆盖裸 .main button —— 表格内小图标按钮强撑 38px 会打乱密集行，
   * 这类按钮保留自身 padding 即可点，标准按钮走 .ec-btn 类统一兜底。 */
  .main .ec-btn, .main select,
  .main input[type="text"], .main input[type="number"], .main input[type="search"],
  .main input[type="date"], .main input[type="email"], .main input[type="tel"],
  .main input[type="password"] {
    min-height: 38px;
  }

  /* 操作/按钮行在手机上一律可换行、左对齐 */
  .ec-actions, .main [class*="actions"] { flex-wrap: wrap; }

  /* ⑥ 弹窗窄屏兜底：不超视口、内部可滚动 */
  .modal, .ecx-modal {
    max-width: 95vw !important;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* KPI / 统计 / 得分等宽网格在手机上收成两列，避免每格被挤到不可读 */
  .main [class*="kpi-grid"],
  .main [class*="stat-grid"],
  .main [class*="score-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 长单词/长链接强制折行，防止撑破窄屏 */
  .main td, .main th, .main p, .main li, .main label, .main span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  /* 超窄屏：宽网格收成单列，弹窗内边距收紧 */
  .main [class*="kpi-grid"],
  .main [class*="stat-grid"],
  .main [class*="score-grid"] {
    grid-template-columns: 1fr !important;
  }
  .modal, .ecx-modal { padding: 14px; }
}

/* ── ⑦ 内联写死多列网格收列（2026-11-01 老板真机报障：手机上卡片被挤、文字竖排）──
 * 根因：各页大量多列网格是内联样式（grid-template-columns:1fr 1fr 1fr 1fr /
 * repeat(4,1fr) 等），内联样式优先级高于任何媒体查询，本兜底层此前兜不住——
 * 窄屏上 N 张卡挤一行、中文被挤成竖排（选品决策入口页四卡即此形态）。
 * 唯一把手：属性选择器匹配内联 style 子串 + !important 收列。
 * 同一模式登记「无空格/有空格」两种子串：触屏点按会触发 mouseover、内联事件
 * 改 element.style 后浏览器按规范形式重序列化 style 属性（冒号后/逗号后带空格），
 * 无空格子串会漏匹配。
 * 只做加法/收窄：≤900px 收两列、≤640px 收单列；桌面 DOM 零改动。
 * minmax(0,1fr) 允许子项继续收缩，长文案不会把网格顶宽。 */
@media (max-width: 900px) {
  .main [style*="grid-template-columns:1fr 1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr 1fr"],
  .main [style*="grid-template-columns:repeat(3,1fr)"],
  .main [style*="grid-template-columns: repeat(3, 1fr)"],
  .main [style*="grid-template-columns:repeat(4,1fr)"],
  .main [style*="grid-template-columns: repeat(4, 1fr)"],
  .main [style*="grid-template-columns:repeat(5,1fr)"],
  .main [style*="grid-template-columns: repeat(5, 1fr)"],
  .main [style*="grid-template-columns:repeat(6,1fr)"],
  .main [style*="grid-template-columns: repeat(6, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:1fr 1fr 1fr"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: 1fr 1fr 1fr"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(3,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(3, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(4,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(4, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(5,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(5, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(6,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .main [style*="grid-template-columns:1fr 1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr 1fr"],
  .main [style*="grid-template-columns:repeat(3,1fr)"],
  .main [style*="grid-template-columns: repeat(3, 1fr)"],
  .main [style*="grid-template-columns:repeat(4,1fr)"],
  .main [style*="grid-template-columns: repeat(4, 1fr)"],
  .main [style*="grid-template-columns:repeat(5,1fr)"],
  .main [style*="grid-template-columns: repeat(5, 1fr)"],
  .main [style*="grid-template-columns:repeat(6,1fr)"],
  .main [style*="grid-template-columns: repeat(6, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:1fr 1fr 1fr"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: 1fr 1fr 1fr"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(3,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(3, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(4,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(4, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(5,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(5, 1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns:repeat(6,1fr)"],
  :is(.modal, .ecx-modal) [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ──  分组落地页卡墙比屏幕宽（2026-11-01 老板真机续报：手机所有卡右边被裁）──
 * 根因：渲染器（nav.js renderGroupLanding）的层头栏内联两个 white-space:nowrap
 * （层名+长副标题）；≤768 时 .group-cards 虽已收单列，但 1fr 的下限是 auto=min-content，
 * nowrap 长文案把单列撑到六七百px → 整墙宽于屏幕，右侧被①的 overflow-x:clip 裁掉
 * （连横滑都滑不动）。侧边栏全部分组落地页共用该渲染器，故一犯犯一片。
 * 修法：列下限归零（minmax(0,1fr)）+ 手机端解除 nowrap 允许换行；桌面层头栏照旧一行。
 * 同登记 [style*="grid-column:1/-1"]（跨满整行的层头栏），兜住其他同病网格。 */
@media (max-width: 768px) {
  .main .group-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .main .group-cards > *,
  .main [style*="grid-column:1/-1"] { min-width: 0; }
  .main .group-cards [style*="white-space:nowrap"],
  .main [style*="grid-column:1/-1"] [style*="white-space:nowrap"] {
    white-space: normal !important;
  }
}

/* ──  宽表横滑提示（2026-11-01 老板拍板 A 方案：横滑 + 滑动提示）──
 * 两层提示：① 边缘渐变阴影——mobile-responsive.js 在 ≤900 给记录表壳外套 .ec-mob-scroll-cue 外壳，
 * 壳的 ::before/::after 是两条绝对定位渐变（pointer-events:none，盖在表格内容之上），
 * ec-cue-l/ec-cue-r 按滚动位置点亮、滑到头自灭 = “这边还有货”。
 * 不用 background-attachment:local 滚动阴影经典法：记录表斑马行/表头是 opaque 底色
 * （index.html 内联 <style> .ec-hist-tbl tbody tr:nth-child(even)），背景层阴影会被行底色
 * 挡成隔行露缝；且内联 <style> 的 background: 简写在本文件之后、会重置 background-image。
 * ② JS 提示行 .ec-mob-scroll-hint（≤900 给可横滑容器前插一行「左滑查看其余列」，
 * 首次滑动后自删、桌面视口全删）——解决“不知道能滑”。
 * 桌面：渐变被媒体查询强制隐藏、外壳仅 position:relative = 零视觉变化。 */
.ec-mob-scroll-cue { position: relative; }
.ec-mob-scroll-cue::before, .ec-mob-scroll-cue::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16px;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 2;
}
.ec-mob-scroll-cue::before { left: 0; border-radius: 10px 0 0 10px;
  background: linear-gradient(to right, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)); }
.ec-mob-scroll-cue::after { right: 0; border-radius: 0 10px 10px 0;
  background: linear-gradient(to left, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)); }
.ec-mob-scroll-cue.ec-cue-l::before, .ec-mob-scroll-cue.ec-cue-r::after { opacity: 1; }
.ec-mob-scroll-hint { font-size: 11px; color: #64748b; margin: 0 2px 4px; }
@media (min-width: 901px) {
  .ec-mob-scroll-cue::before, .ec-mob-scroll-cue::after { opacity: 0 !important; }
  .ec-mob-scroll-hint { display: none; }
}