/* ══════════════════════════════════════════════════════════════════════════════
   admin-mobile.css — 平台端后台「内页移动化」层（2026-10-11）
   ------------------------------------------------------------------------------
   定位：**附加层**，不修改 admin.css / admin-v2.css / admin-orders-analytics.css。
        加载顺序在最后 ⇒ 同权重时覆盖前三个文件；回滚只需移除 index.html 里的一行 <link>。

   为什么单独成文件而不是改原文件：
     原三个 CSS 共 78KB、被桌面端大量依赖；就地修改的回归面无法收敛。
     附加层 + 末尾加载 = 「桌面端零风险 + 移动端可独立演进 + 可一键回滚」。

   ▸ 取证结论（真实 Chromium，43 路由 × 390/360/320px = 129 组）
     首轮探针报「129 组全部有问题」，但其中 `TABLE.admin-table`（108 次）是**探针误报**：
     它已在 `.admin-table-wrap{overflow-x:auto}` 内，几何越界但**可横向滚动**，属正常。
     剔除误报后，真根因只有 3 个：
       ① **网格/弹性子项缺 `min-width:0`** —— 宽表格（min-content）把祖先撑爆。
          实测同一页面里 `.panel` 有的 `min-width:0px`、有的 `auto` ⇒ 溢出正是后者。
          这是 `.panel`(54)、`.kpi-card`(66)、`.feat-mini`(60) 溢出的**共同成因**。
       ② **固定列网格不塌缩** —— `.feat-grid{repeat(3,1fr)}`、`.price-grid{repeat(4,1fr)}`
          在手机上未降列；且**13 处 `grid-template-columns` 写在元素 style 属性里**（内联），
          必须用属性选择器 + `!important` 才能覆盖。
       ③ **顶栏 ≤360px 过挤** —— 5 个图标按钮 + 用户块；且汉堡仅 **22px**（< 44px 触控目标）、
          标题被压到 **16px**（无法阅读）。

   ▸ 分阶段（与需求 P1–P5 对齐）
     §0 基线（外壳/顶栏/内容/表格/面板/工具栏/分页/弹窗）—— 所有页共同受益
     §1 P1 权限设置（角色 / 权限矩阵 / 员工 / 角色分配）
     §2 P2 系统设置（账号安全 / 通知 / 集成配置 / 参数）
     §3 P3 数据看板（KPI / 图表 / 配送 / 分析）
     §4 P4 内容审核（敏感词命中 / 质检记录 / 批量处置 / 工单）
     §5 P5 其余模块（套餐价格卡 / 资源管理表格 / 杂项）

   ▸ 触屏目标基线：交互元素 ≥44px（Apple HIG）/ ≥48dp（Material）。
     例外：`.pager button`（32px）与表格内 `.op-btn`（行内紧凑按钮）保留原尺寸但补足
     上下内边距，避免误触由「拉高行高」解决而非硬撑按钮宽度。
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── §0 基线（全页通用）─────────────────────────── */

/* §0.1 根因①：让布局子项可收缩 —— 宽表格不再撑爆祖先。
   只列**容器类**原语（不写 `*{min-width:0}`，否则会破坏 .pager button 的 min-width 等
   有意设置的最小尺寸）。 */
@media (max-width: 1024px) {
  .admin-main :is(.panel, .panel-body, .panel-head,
    .kpi-grid, .kpi-card, .feat-grid, .feat-card-grid, .feat-mini,
    .dash-cols, .dash-view, .price-grid, .price-card,
    .ticket-card, .poa-card, .poa-kpi, .poa-kpis, .poa-card-body, .poa-card-head,
    .admin-table-wrap, .toolbar, .pg-head, .pg-actions, .tabs, .pager,
    .f-item, .form-grid2, .switch-grid, .cust-kpi) { min-width: 0; }
}

/* §0.2 顶栏：可阅读的标题 + 达标的触控目标 */
@media (max-width: 768px) {
  .admin-topbar { height: auto; min-height: 56px; padding: 8px 14px; gap: 10px; flex-wrap: nowrap; }
  .admin-menu-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  .admin-topbar-title { flex: 1 1 auto; min-width: 0; font-size: 15.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-topbar-right { margin-left: auto; gap: 8px; flex: 0 0 auto; }
  /* .admin-content 的 padding 统一由 §0.8 的 --adm-pad 管理（与 .poa 负边距同源） */
}
@media (max-width: 520px) {
  /* 顶栏中段最挤：5 个图标按钮 + 用户块。实测 390px 刚好放下、320px 必然溢出。
     🔴 首版把图标按钮压到 36px 来省空间 —— 由守卫「触控目标达标」抓出**违反 44px 标准**
        （也低于 Apple HIG 44 / Material 48）。正解是**换行而不是缩小**：
        顶栏允许折行，按钮独占第二行（5×44 + 4×6 = 244px，320px 下仍宽裕），
        每个按钮保持 44×44，且**不隐藏任何功能按钮**。
     仍隐藏 .admin-user：它是**纯装饰性身份展示**（用户名/角色在侧边栏与改密流程中可见），
        保留会挤占第二行约 58px。 */
  .admin-topbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; height: auto; min-height: 56px; }
  .admin-topbar-title { flex: 1 1 auto; }
  .admin-topbar-right { flex: 1 1 100%; margin-left: 0; justify-content: flex-end; gap: 6px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .admin-user { display: none; }
}

/* §0.3 表格：保留横向滚动（既有 .admin-table-wrap 已是 scroll 容器），
   补两点可用性：① 明确的可滚动提示；② 单元格内边距收窄以容纳更多列。 */
@media (max-width: 768px) {
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 滚动阴影提示（左/右）：用背景附着实现，无需 JS
     🔴 2026-10-14 修正：渐隐遮罩原先**硬编码 #fff**，暗色主题下会在表格两侧露出白色渐隐块。
        改用 var(--skin-surface, #fff)：皮肤层会把它重映射为当前皮肤的面色；
        var() 回退值 #fff 保证"皮肤层未加载"时与旧行为完全一致（零回归）。 */
  .admin-table-wrap { background:
    linear-gradient(to right, var(--skin-surface, #fff) 30%, transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left, var(--skin-surface, #fff) 30%, transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.12), transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.12), transparent) right center/14px 100% no-repeat scroll; }
  .admin-table th, .admin-table td { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  /* 表格内的行内操作按钮：补足触控高度（宽度保持紧凑，避免每行过高） */
  .admin-table .op-btn, .admin-table .btn-sm { min-height: 34px; padding: 6px 12px; }
}

/* §0.4 面板头/工具栏/分页 在窄屏换行排布 */
@media (max-width: 768px) {
  .panel-head { flex-wrap: wrap; gap: 10px; }
  .panel-head > .spacer { display: none; }          /* 桌面用来推右侧的占位符，移动端会挤坏 */
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .search-box { min-width: 0; flex: 1 1 100%; }
  .pg-head { margin-bottom: 16px; }
  .pg-head h2 { font-size: 17.5px; }
  .pg-actions { flex-wrap: wrap; gap: 8px; width: 100%; }
  .pager { flex-wrap: wrap; gap: 6px; padding: 12px; justify-content: center; }
  /* 🔴 必须写 .ui2 .pager button（(0,2,1)）—— 基础样式就是该优先级，
     只写 .pager button（(0,1,1)）会被它压掉（守卫实测仍是 32px）。 */
  .ui2 .pager button { min-width: 40px; height: 40px; }
}

/* §0.5 页签条（.tab-btn 是全站最高频元素，28 路由合计 720 次）：
   横向可滑动 + 不换行，避免换行后占掉半屏高度。 */
@media (max-width: 768px) {
  .ui2 .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: thin; }
  .ui2 .tab-btn { flex: 0 0 auto; padding: 8px 14px; min-height: 38px; display: inline-flex;
    align-items: center; white-space: nowrap; }
}

/* §0.6 弹窗/抽屉：占满可用宽度并限制高度 */
@media (max-width: 768px) {
  .modal, .ui2 .modal { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important; max-height: calc(100dvh - 24px); overflow: auto; }
  .modal-body, .ui2 .modal-body { max-height: calc(100dvh - 160px); overflow: auto; }
  .form-grid2, .switch-grid { grid-template-columns: 1fr !important; }
}

/* §0.7 根因②：内联 grid-template-columns 的覆盖（13 处写在 style 属性里）。
   分两档精确降列 —— 只针对内联声明，不影响类定义的网格。 */
@media (max-width: 900px) {
  #view [style*="repeat(6,1fr)"], #view [style*="repeat(5,1fr)"], #view [style*="repeat(4,1fr)"],
  #view [style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  #view [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* §0.8 内容区留白与「通栏负外边距」的耦合修正（#/orders、#/analytics 的 6px 溢出根因）
   原样式 `@media(max-width:768px){ .poa{margin:-16px} }` 用**负外边距**抵消父级 padding
   来实现通栏底色 —— 这要求父级 padding 恰为 16px。本层把 .admin-content 改为 14px 后
   就不再匹配 ⇒ 每侧溢出 2px（实测 #/orders、#/analytics 各 6px）。
   正解不是把数字改回去（下次再调 padding 又会坏），而是**用同一个变量绑定两侧**：
   父级 padding 与子级负边距同源，任何取值都自动抵消。
   ⚠ 必须排除 `.poa--plain`（弹窗内复用时要求 margin:0）—— 本文件最后加载，
      若不加 :not() 会把弹窗里的 .poa 也加上负边距。 */
.admin-content { --adm-pad: 26px; }
@media (max-width: 768px) {
  .admin-content { --adm-pad: 16px; padding: var(--adm-pad); }
  .poa:not(.poa--plain) { margin: calc(-1 * var(--adm-pad)); padding: 16px 16px 28px; }
}
@media (max-width: 360px) {
  .admin-content { --adm-pad: 10px; }
}

/* ─────────────────────────── §1 P1 权限设置 ───────────────────────────
   覆盖：角色列表与权限勾选矩阵、员工账号、角色分配。
   移动端要点：
     · 权限矩阵在桌面是「模块 × 权限码」的多列表格 → 手机改为**按模块分组的复选框卡片**，
       否则一列权限码只有几十像素宽，必然既要横滚又难勾选；
     · 勾选框本身补足触控尺寸（桌面 16px → 移动 20px，并给整行可点区域）。 */
@media (max-width: 768px) {
  /* 权限勾选行：整行可点 + 触控达标 */
  #view .per, #view .perm-row, #view .perm-item { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  #view .per input[type="checkbox"], #view .perm-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; }
  /* 角色卡片/列表 */
  #view .role-card, #view .roles-list > * { width: 100%; }
  /* 权限矩阵若用表格承载：允许横滚并降低列宽压力 */
  #view .perm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 员工/角色分配表单：单列 */
  #view .role-assign-grid, #view .staff-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────── §2 P2 系统设置 ───────────────────────────
   覆盖：账号安全（改密）、通知、集成配置、参数开关。
   移动端要点：
     · 表单统一单列、输入框 ≥16px 字号（避免 iOS Safari 聚焦时自动放大页面 —— 这是
       "设了 viewport 仍会缩放"的经典原因）；
     · 密钥类字段（integration secrets）在窄屏需要能完整换行显示掩码，禁止溢出。 */
@media (max-width: 768px) {
  /* 🔴 用**排除式**而非 input[type="text"]：无 type 属性的 <input> 在 HTML 里默认就是 text，
     但属性选择器不会匹配它 —— 首版因此漏掉 #/scrm/integrations 的一批输入框
     （守卫抓到 fs=13.5 未生效）。 */
  #view input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
  #view select, #view textarea {
    font-size: 16px;                     /* 🔴 ≥16px：否则 iOS 聚焦自动放大 */
    min-height: 44px; width: 100%; box-sizing: border-box;
  }
  #view textarea { min-height: 88px; }
  #view label { display: block; margin-bottom: 6px; }
  /* 开关行：整行可点、说明文字不与开关争宽 */
  #view .switch-row, #view .switch-grid > * { min-height: 56px; align-items: center; }
  #view .switch-row small, #view .switch-grid small { white-space: normal; }
  /* 集成配置卡：单列 + 长值可断行 */
  #view .integ-card, #view .int-card, #view .cfg-card { width: 100%; }
  #view .secret, #view .masked, #view code { word-break: break-all; overflow-wrap: anywhere; }
  #view .form-row, #view .field { flex-direction: column; align-items: stretch; }
  #view .form-actions, #view .cfg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #view .form-actions .btn, #view .cfg-actions .btn, #view .btn-sm { min-height: 40px; }
  #view .btn { min-height: 44px; }
}

/* ─────────────────────────── §3 P3 数据看板 ───────────────────────────
   覆盖：仪表盘、分析报告、订单/配送分析（poa-*）。
   移动端要点：
     · KPI 卡 4 列 → 2 列（≤480 仍 2 列，避免单列导致首屏只见一张卡）；
     · 图表卡在窄屏全宽、限制最小高度，避免 canvas 高度塌陷或横滚；
     · poa-* 一族的网格需一并塌缩。 */
@media (max-width: 1024px) {
  .ui2 .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ui2 .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .ui2 .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ui2 .feat-grid, .ui2 .feat-card-grid { grid-template-columns: 1fr !important; }
  .ui2 .kpi-card { padding: 14px 16px; }
  .ui2 .kpi-card .k-value { font-size: 22px; }
  /* 图表：容器全宽 + 最小高度，canvas/svg 自适应 */
  .ui2 .chart-box, .ui2 .chart, #view .chart-wrap { width: 100% !important; min-height: 200px; }
  #view canvas { max-width: 100%; }
  /* 订单/配送分析（poa-*） */
  #view .poa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  #view .poa-filter-grid { grid-template-columns: 1fr 1fr !important; }
  #view .poa-card-body, #view .poa-dist-row { flex-wrap: wrap; }
  #view .poa-tab { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .ui2 .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #view .poa-kpis { grid-template-columns: 1fr 1fr !important; }
  #view .poa-filter-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────── §4 P4 内容审核 ───────────────────────────
   覆盖：敏感词命中、质检记录、批量处置、工单。
   移动端要点：
     · 审核类页面主体是「表格 + 多选」，手机改为**卡片流**更易逐条处置；
       但为不改 JS 渲染，这里只做「表格降级为可横滚 + 关键列优先」的可读性增强，
       批量操作按钮固定在窄屏全宽排列，避免误触「全部处置」这类危险操作。 */
@media (max-width: 768px) {
  #view .ticket-card { width: 100%; }
  #view .ticket-meta { flex-wrap: wrap; gap: 6px; }
  /* 批量操作条：整行铺开，危险操作与普通操作有明显间距 */
  #view .bulk-bar, #view .batch-bar, #view .table-actions {
    flex-wrap: wrap; gap: 8px; padding: 10px 0;
  }
  #view .bulk-bar > *, #view .batch-bar > * { flex: 1 1 auto; min-height: 40px; }
  /* 命中/质检的严重级别标记不换行 */
  #view .badge { white-space: nowrap; }
  /* 会话内容预览：允许换行，避免长会话把表格撑到极宽 */
  #view .cell-main, #view .cell-sub { white-space: normal; word-break: break-word; }
}

/* ─────────────────────────── §5 P5 其余模块 ───────────────────────────
   覆盖：套餐价格卡、资源管理的 8 张表格、发布/版本、杂项网格。 */
@media (max-width: 1024px) {
  .ui2 .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ui2 .price-grid { grid-template-columns: 1fr; }
  .ui2 .price-card { width: 100%; }
}
@media (max-width: 768px) {
  /* 资源管理长表单（8 个字段 + 富文本） */
  #view .res-form, #view .res-grid { grid-template-columns: 1fr !important; }
  /* 通用：任意 2 列以上的类定义网格在窄屏降为单列（兜底，覆盖未逐一列举的页面） */
  #view .grid2, #view .grid3, #view .grid4, #view .two-col, #view .three-col { grid-template-columns: 1fr !important; }
  /* 长文本/长 ID 永不溢出 */
  #view .mono, #view td.mono { word-break: break-all; }
}

/* §5.1 打印/超窄兜底：≤360px 进一步收紧，保证「任何元素都不横向溢出」 */
@media (max-width: 360px) {
  /* --adm-pad 已在 §0.8 覆盖为 10px；此处不再重复声明 padding */
  .ui2 .kpi-card { padding: 12px; }
  .ui2 .kpi-card .k-value { font-size: 20px; }
  #view .poa-kpis { grid-template-columns: 1fr !important; }
}