/* ============================================================
   2026-11-02 · 手机端适配 批1 · 手机样式层（最后加载）
   ------------------------------------------------------------
   分层策略：
     - 不修改 admin.css；不改动 ui-refresh.css（样式层叠加覆盖）
     - 所有手机规则包在 @media (max-width: 767px) / (max-width: 480px)
     - ≥768px 只做「手机专属元素不出现」的兜底，桌面视觉与部署前一致
     - 颜色 / 圆角 / 缓动全部复用 ui-refresh.css 的 --ux-* 变量，不新增色值
   覆盖范围（批1）：抽屉侧栏 / 顶栏压缩 / 内容区 / 输入框防缩放 / 表单单列 /
                    保存栏安全区 / 底部抽屉弹窗 / toast / 44px 触控尺寸
   覆盖范围（批2）：长表格横滚 + 首列固定 / ≥6 列只读表卡片化 / 分页三段式 /
                    筛选 chip 横滑行 / save-bar 键盘避让（--kb）
   说明：表格卡片化需要列名，纯 CSS 取不到表头文本，故由 js/mobile-tables.js
         在手机断点内给 td 补 data-label 并加 .mt-card；桌面断点不包装、不加类。
   ============================================================ */

/* ---------- ≥768px 兜底：手机专属元素一律不显示（保护桌面端） ---------- */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-mask { display: none !important; }
}

/* ============================================================
   手机断点：≤767px
   ============================================================ */
@media (max-width: 767px) {

  /* ---------- 1. 主框架：单列，侧栏改为抽屉 ---------- */
  .app-view { display: block; min-height: 100vh; }
  .main { width: 100%; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 400;
    width: min(84vw, 300px);
    max-width: min(84vw, 300px);
    height: 100%;
    max-height: none;
    align-self: auto;
    transform: translateX(-100%);
    transition: transform .24s var(--ux-ease-out, ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 28px rgba(0, 0, 0, .18);
  }

  /* 抽屉内：logo / 菜单 / 底栏纵向排列，菜单不再横向滚动 */
  .sidebar .logo { height: 60px; padding: 0 16px; flex: 0 0 auto; }
  .sidebar .menu {
    display: block;
    flex: 1 1 auto;
    max-height: none;
    padding: 6px 12px 18px;
    overflow: visible;
  }
  .sidebar .menu-group { display: flex; padding: 16px 4px 6px; }
  .sidebar .menu-item {
    min-height: 48px;
    padding: 0 10px;
    margin: 0 0 2px;
    font-size: 15px;
    white-space: nowrap;
  }
  .sidebar .side-foot { display: flex; flex: 0 0 auto; }
  .sidebar .side-foot .logout-btn { width: 44px; height: 44px; }

  /* ---------- 2. 遮罩层 .nav-mask ---------- */
  .nav-mask {
    position: fixed;
    inset: 0;
    z-index: 390;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body.nav-open .nav-mask { opacity: 1; visibility: visible; }
  .nav-mask[hidden] { display: none; }

  /* ---------- 3. 顶栏压缩（56px + 汉堡 44px） ---------- */
  .topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 8px;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    z-index: 300;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    margin: 0 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ux-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:active { background: var(--ux-bg); }
  .nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ux-soft-primary); }
  .nav-toggle svg { width: 24px; height: 24px; display: block; }

  #page-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 环境 / 平台模式徽章在手机上不展示（真实环境信息仍可在桌面端查看） */
  #env-badges { display: none !important; }

  /* admin.css ≤700 把 .topbar-right 设成 width:100%，手机上会顶出屏幕 44px，
     这里改回内容宽度并右对齐（否则标题被挤成 0 宽） */
  .topbar-right {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2px;
  }

  /* 铃铛 / 主题：44×44 方形触控区 */
  .topbar-bell { width: 44px; height: 44px; border-radius: 10px; }
  .topbar .tb-ico { width: 22px; height: 22px; }

  /* 头像保留，姓名与角色收起 */
  .topbar-user { gap: 0; }
  .topbar-user .tu-avatar { width: 36px; height: 36px; font-size: 15px; }
  .topbar-user .tu-name,
  .topbar-user .tu-role { display: none; }

  /* 搜索：默认收为 44×44 图标按钮，聚焦后展开覆盖顶栏，便于直接输入 */
  .topbar-search {
    display: flex;
    align-items: center;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 auto;
    background: transparent;
    border-radius: 10px;
  }
  .topbar-search .ts-icon {
    position: absolute;
    inset: 0;
    margin: 0;
    justify-content: center;
    pointer-events: none;
  }
  .topbar-search #global-search {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    font-size: 16px; /* 防 iOS 聚焦放大 */
  }
  .topbar-search:focus-within {
    position: absolute;
    left: 56px;
    right: 8px;
    top: 6px;
    width: auto;
    height: 44px;
    padding: 0 10px;
    background: var(--ux-paper);
    border: 1px solid var(--ux-input-border);
    box-shadow: var(--ux-shadow-card);
    z-index: 320;
  }
  .topbar-search:focus-within .ts-icon {
    position: static;
    margin: 0 8px 0 0;
    pointer-events: auto;
  }
  .topbar-search:focus-within #global-search {
    position: static;
    width: auto;
    height: auto;
    flex: 1 1 auto;
    min-width: 0;
    opacity: 1;
  }
  .topbar-search .search-panel {
    top: 44px;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: 60vh;
  }
  .notif-panel,
  .search-panel {
    width: min(320px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }

  /* ---------- 4. 内容区：12px 留白，取消最大宽度，横向溢出留在容器内 ---------- */
  .content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 12px;
    overflow-x: auto;
  }

  /* ---------- 5. 输入框字号 16px（iOS 聚焦不再整页放大） ---------- */
  /* admin.css 里存在 .ef input / .form-row input / #xx 之类更高特异性的 13-14px 规则，
     为保证「聚焦不缩放」这条硬要求，这里在手机断点内用 !important 统一压到 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .inp { font-size: 16px !important; }
  .topbar-search input { font-size: 16px !important; }

  /* ---------- 6. 表单：单列，label 置顶 ---------- */
  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 14px;
  }
  .form-row > label { width: auto; flex: none; }
  .form-row input,
  .form-row select,
  .form-row textarea,
  .form-row .inp { width: 100%; box-sizing: border-box; }
  .form-actions { margin-left: 0; }

  /* ---------- 7. 底部保存栏：安全区留白 + --kb 键盘避让 ---------- */
  .content .save-bar,
  .ui-page .save-bar {
    bottom: var(--kb, 0px);
    margin-top: 4px;
    /* 键盘高度只抬升 sticky 定位（bottom），不再重复加进内边距，避免双重留白 */
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ---------- 8. 弹窗：底部抽屉形态 ---------- */
  .modal-mask {
    align-items: flex-end;
    padding: 0;
  }
  .modal,
  .modal.wide {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-head { padding: 10px 12px 10px 16px; min-height: 56px; }
  .modal-body { padding: 16px; }
  .modal-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 24px;
    flex: 0 0 auto;
  }
  .confirm-dialog .modal-body { padding: 24px 18px 20px; }

  /* ---------- 9. toast：底部居中 + 安全区 ---------- */
  .toast {
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    margin: 0 auto;
    width: max-content;
    max-width: calc(100vw - 32px);
    text-align: center;
  }

  /* ---------- 10. 可点元素 ≥44px ---------- */
  .abtn { min-height: 44px; padding: 10px 16px; }
  .abtn.sm,
  .abtn.small { min-height: 44px; padding: 0 12px; }
  .pager .abtn,
  .pager a,
  .pager button,
  .kb-pager .abtn { min-height: 44px; min-width: 44px; }
}

/* ============================================================
   细节微调：≤480px
   ============================================================ */
@media (max-width: 480px) {
  .topbar { padding: 0 6px; gap: 2px; }
  .topbar-user .tu-avatar { width: 32px; height: 32px; }
  .content { padding: 10px; }
  .sidebar { width: min(88vw, 300px); max-width: min(88vw, 300px); }
}

/* ============================================================
   批2（2026-11-02）
   1. 长表格：容器内横滚 + 首列固定（右侧分隔阴影）
   2. ≥6 列只读表：卡片化（js/mobile-tables.js 判定并加 .mt-card / data-label）
   3. 分页：上一页 / 第 N/M 页 / 下一页 三段式，按钮 ≥44px
   4. 筛选：横向滑动 chip 行（seg 分页签 / filter-row / toolbar / kb-toolbar）
   5. 保存栏：--kb 由 app.js 的 visualViewport 监听写入，样式侧只消费变量
   ============================================================ */
@media (max-width: 767px) {

  /* ---------- 1. 表格容器：可横滚，列不再被压窄 ---------- */
  .table-wrap,
  .mt-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* 让表格按内容宽度铺开（覆盖 admin.css ≤700 的 min-width:620px 固定值），
     容器够宽时仍撑满一屏 */
  .table-wrap > .tbl {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
  .table-wrap > .tbl th,
  .table-wrap > .tbl td { white-space: nowrap; }
  .table-wrap > .tbl td.l { white-space: nowrap; }

  /* 首列 sticky：横向滚动时第一列不跑，用右侧阴影跟滚动内容分开
     卡片化（.mt-card）时首列不再是表格列，排除掉，避免卡片内出现白块/阴影 */
  .table-wrap > .tbl:not(.mt-card) th:first-child,
  .table-wrap > .tbl:not(.mt-card) td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card, #fff);
    box-shadow: 8px 0 10px -8px rgba(15, 40, 30, .28);
  }
  .table-wrap > .tbl:not(.mt-card) thead th:first-child {
    z-index: 4;
    background: var(--bg, #f6f8f7);
  }
  html[data-theme="dark"] .table-wrap > .tbl:not(.mt-card) td:first-child { background: #16221d; }
  html[data-theme="dark"] .table-wrap > .tbl:not(.mt-card) thead th:first-child { background: #1c2823; }

  /* ---------- 2. 只读长表卡片化（≥6 列，行内无可编辑控件） ---------- */
  .tbl.mt-card {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
  }
  .tbl.mt-card > thead { display: none; }
  .tbl.mt-card > tbody { display: block; }
  .tbl.mt-card > tbody > tr {
    display: block;
    position: relative;
    margin: 0 0 10px;
    padding: 4px 14px;
    border: 1px solid var(--ux-divider, var(--line, #e3ebe7));
    border-radius: 14px;
    background: var(--ux-paper, var(--card, #fff));
    box-shadow: 0 1px 6px rgba(22, 58, 45, .05);
  }
  .tbl.mt-card > tbody > tr:hover { background: var(--ux-paper, var(--card, #fff)); }
  .tbl.mt-card > tbody > tr > td {
    display: block;
    width: auto !important;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px dashed var(--ux-divider, var(--line, #e3ebe7));
    font-size: 14px;
    line-height: 1.5;
    white-space: normal !important;
    word-break: break-word;
    text-align: left;
  }
  .tbl.mt-card > tbody > tr > td:last-child { border-bottom: 0; }
  .tbl.mt-card > tbody > tr > td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ux-text-2, var(--ink-3, #7c8f88));
    white-space: nowrap;
  }
  /* 无表头 / 空单元格不占位 */
  .tbl.mt-card > tbody > tr > td.mt-td-empty,
  .tbl.mt-card > tbody > tr > td:not([data-label])::before { display: none; }
  .tbl.mt-card > tbody > tr > td.mt-td-empty { display: none; }
  /* loading / 空态行（colspan）保持整行提示 */
  .tbl.mt-card > tbody > tr.mt-row-span {
    display: block;
    padding: 18px 8px;
    text-align: center;
    color: var(--ux-text-3, var(--ink-3, #7c8f88));
  }
  .tbl.mt-card > tbody > tr.mt-row-span > td {
    display: block;
    border: 0;
    padding: 0;
    text-align: center;
  }
  .tbl.mt-card > tbody > tr.mt-row-span > td::before { display: none; }

  html[data-theme="dark"] .tbl.mt-card > tbody > tr {
    background: #16221d;
    border-color: #303d38;
  }

  /* ---------- 3. 分页三段式 ---------- */
  .pager,
  .kb-pager,
  .tk-pager {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    box-sizing: border-box;
  }
  .pager > .abtn,
  .pager > button,
  .pager > a,
  .kb-pager > .abtn,
  .kb-pager > button,
  .tk-pager > .abtn,
  .tk-pager > button {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
  .pager > span,
  .pager > .dim,
  .kb-pager > span,
  .kb-pager > .dim,
  .tk-pager > span,
  #aiu-pager > span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 内嵌在卡片里的分页（配置中心用量明细） */
  #aiu-pager {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #aiu-pager > .abtn { flex: 0 0 auto; min-height: 44px; padding: 0 14px; }

  /* ---------- 4. 筛选：可横滑 chip 行 ---------- */
  .filter-row,
  .toolbar,
  .kb-toolbar {
    flex-wrap: nowrap !important; /* 部分页面把 flex-wrap:wrap 写在行内样式上 */
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  .filter-row > *,
  .toolbar > *,
  .kb-toolbar > * { flex: 0 0 auto; }
  /* 横滑行内的「撑开占位」元素收为零宽，避免把 chip 挤到屏幕外 */
  .filter-row > span[style*="flex:1"],
  .toolbar > span[style*="flex:1"] { flex: 0 0 0; width: 0; overflow: hidden; }

  /* 下拉 / 输入在手机上呈现为胶囊 chip：选中值即 chip 文本，选中态一目了然 */
  .filter-row > select,
  .filter-row > input,
  .filter-row > .inp,
  .toolbar > select,
  .toolbar > input,
  .toolbar > .inp,
  .kb-toolbar > select,
  .kb-toolbar > input {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--ux-input-border, var(--line));
    background: var(--ux-soft-primary, var(--green-light, #eaf6f1));
    color: var(--ux-primary, var(--green));
    font-weight: 600;
    font-size: 14px;
    box-sizing: border-box;
  }
  .filter-row > input::placeholder,
  .toolbar > input::placeholder { color: var(--ux-text-3, var(--ink-3)); font-weight: 400; }
  .kb-toolbar > .kb-kw { width: auto; }

  /* 分段页签（全部/今日/7天内…）：可横滑，选中态实心 */
  .filter-bar > .seg,
  .filter-row > .seg,
  .toolbar > .seg,
  .lead-viewbar .seg {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 999px;
  }
  .seg > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .seg > a.on {
    background: var(--ux-primary, var(--green));
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ux-primary, var(--green));
  }
  .chip { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; }

  /* ---------- 5. 键盘弹起时，聚焦控件别被保存栏压住 ---------- */
  .content input,
  .content select,
  .content textarea { scroll-margin-bottom: 96px; }
  /* --kb 由 app.js 的 visualViewport 监听写入（真实键盘高度，无魔法数） */
}