/* ============================================================
   EISS H5 移动适配基线 v1.0.0 · 用户端 view/api
   ------------------------------------------------------------
   - 引入位置：各 api 页 </head> 前（api-theme / saas-theme 之后）
   - 仅窄屏（≤768 / ≤480）生效，不影响桌面端布局
     （★ 2026-10-04 起另含「桌面端隐藏移动专属元素」的兜底，见下方第一块）
   - 复用 saas-design-tokens.css 设计令牌，不另起炉灶、不改紫主色
   - 与 api-theme.css 的壳级适配互补：这里补「逐页内联写死像素」的通用降级
   - 回滚：删除 <link> 一行即完全还原
   ============================================================ */

/* ============================================================
   ★★ 桌面端隐藏「移动端专用」元素（2026-10-04 修复 · 涛老板报障）
   ------------------------------------------------------------
   这两个元素由 JS **无条件**注入/渲染，而样式只在 ≤768px 段定义
   ⇒ 桌面端没有 display:none，退回元素默认值**漏出来**：

     ① `#navToggle` —— api-sidebar.js 的 installMobileDrawer() 把它 prepend 到
        `.top-nav` 的**第一个**位置。桌面端无隐藏规则 ⇒ 走 <button> 默认 display:block
        ⇒ 与 `.top-nav{justify-content:space-between}` 原有 2 个子元素凑成 **3 个**
        ⇒ 布局从「两端对齐」变成「三等分（左/中/右）」
        ⇒ **logo 与企业名被推到页面中间**。
        （这正是 2026-10-04 涛老板看到的「上面的系统名称和企业名位置变了」。
          那段 JS 注释自称"PC 端零影响"，但缺了这条 CSS 就不成立 —— 注释与实现不符。）
     ② `.nav-mine` —— 侧栏底部「我的」（2026-10-03 §28 加）。桌面端不需要：
        顶栏已有「手机号 / 退出」两个账号操作，而「我的」是移动端入口（底栏 tab）。

   ⛔ nav-mine 必须带 !important：本文件窄屏段有
      `.sidebar .menu-item{display:flex!important}`，普通声明压不过它。
   ⛔ #navToggle **不能**加 !important：否则窄屏段的 display:inline-flex 也压不过它，
      汉堡按钮在手机上会一起消失。
         回退：整块删除即完全还原。
   ============================================================ */
#navToggle { display: none; }
/* #navMask（抽屉遮罩）—— ★ 2026-10-04 排查第 3 处：它**只在窄屏段定义**且**那段里连 display 都没写**
   ⇒ 桌面端没有任何声明 ⇒ 走 `<div>` 默认 `display:block`。
   当前之所以没露出来，仅仅因为它**内部无内容**（real 高度 0）——**纯属巧合、极其脆弱**：
   它带 `z-index:290`，一旦将来给它加个图标/占位/高度，桌面端立刻出现一层**全屏遮罩**挡住整页。
   ⇒ 一律显式隐藏（不信"没内容"这种巧合）。 */
#navMask { display: none; }
.sidebar .nav-bottom .nav-mine { display: none !important; }

@media (max-width: 768px) {
    /* 窄屏恢复：汉堡按钮（抽屉入口）+ 抽屉遮罩 + 侧栏「我的」（抽屉内个人入口）。
       同特异性下「后出现者胜」，本块在下方隐藏规则之后 ⇒ 窄屏生效。 */
    #navToggle { display: inline-flex; }
    #navMask { display: block; }
    .sidebar .nav-bottom .nav-mine { display: flex !important; }
}

/* ---------- 触控目标 ≥44px（通用按钮/标签类，沿用令牌类） ---------- */
@media (max-width: 768px) {
    .btn, .btn-primary, .btn-outline, .btn-recharge, .btn-download, .btn-refresh,
    .btn-danger, .btn-cancel-process, .btn-delete, .btn-immediate-delete,
    .tab-btn, .status-tabs .tab-btn, .mtab, .menu-item, .page-btn, .ui-btn,
    .row-more-btn, .col-actions button, .topbar-kf, .balance-capsule,
    .sidebar .nav-bottom button, .btn-copy, .hero-recharge,
    .action-btns .btn, .action-btns button {
        min-height: 44px;
        box-sizing: border-box;
    }
    /* 顶栏徽章内的次级标签（「手机号」「退出」）**不适用**上面这条 44px 导航标准 ——
       2026-10-03 实机反馈：它俩被一并撑到 44px，而父级 .ubadge 移动端只有 30px
       ⇒ 上下各溢出 7px，看起来「特别大、和整条顶栏不协调」。
       按父级比例给 24px（= WCAG 2.2 SC 2.5.8 的 AA 下限，仍可舒适点按）。 */
    .top-nav .user-info .ub-out {
        min-height: 24px;
        display: inline-flex;
        align-items: center;
    }
    /* 工具栏纵排铺满，搜索/筛选输入框占满宽度 */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .left, .toolbar .right { flex-wrap: wrap; width: 100%; }
    .toolbar input[type=text],
    .mem-toolbar input[type=text] { width: 100%; min-width: 0; }
    .mem-toolbar select { max-width: 100%; }

    /* 表格在手机下收窄最小宽度，配 .table-wrap 横滚 + 首列吸附（各页 sticky 类已处理） */
    .table-wrap table,
    .rc-wrap table,
    .admin-block table,
    .board-recent table,
    .card > table { min-width: 520px; }

    /* 双列网格在手机下并单列，避免拥挤 */
    .filter-grid { grid-template-columns: 1fr; }
    .md-grid { grid-template-columns: 1fr; }

    /* 抽屉 / 命令面板近全屏（沿用 ui-drawer / ui-cmd 结构） */
    .ui-drawer { max-width: 100vw !important; width: 100vw !important; }
    .ui-drawer-mask { padding: 0 !important; }
    .modal-box, .modal-box.wide { width: auto !important; max-width: 100vw !important; }

    /* 防止常驻 DOM 的隐藏抽屉（transform:translateX(100%)）把文档撑出横向滚动。
       clip 不创建滚动容器，不破坏 sticky 顶栏/侧栏，也不影响表格内部横滚。 */
    html, body { overflow-x: clip; }

    /* ---------- H5 v3.0：侧栏改抽屉（内容优先，菜单收进抽屉；替代旧「顶部横滑胶囊」——
       侧栏 v0.3.0 分组后该布局已散架，竖排大块菜单顶开内容） ---------- */
    #navToggle {
        display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
        gap: 4px; width: 40px; height: 40px; margin-right: 8px;
        background: transparent; border: none; cursor: pointer; padding: 0; flex: none;
    }
    #navToggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text-1, #333); }
    .sidebar {
        position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important;
        width: 82vw !important; max-width: 320px; height: 100vh; height: 100dvh;
        margin: 0 !important; z-index: 300; background: #fff;
        display: block !important;
        transform: translateX(-102%); transition: transform .25s ease;
        box-shadow: 6px 0 24px rgba(17,20,45,.18);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    body.nav-open .sidebar { transform: translateX(0); }
    /* 抽屉内菜单恢复纵向列表行（覆盖旧横滑胶囊样式） */
    .sidebar .nav-scroll { display: block !important; overflow: visible !important; padding: 6px 8px; }
    .sidebar .nav-group { margin-bottom: 6px; }
    .sidebar .nav-group-title { padding: 10px 8px 4px; }
    .sidebar .menu-item, .sidebar .menu-sub {
        display: flex !important; align-items: center; width: 100%;
        border-radius: 10px !important; background: transparent !important;
        padding: 12px 10px !important; white-space: normal; min-height: 44px; box-sizing: border-box;
    }
    .sidebar .menu-item.active, .sidebar .menu-sub.active {
        background: var(--bg-hover, #f2f2f8) !important; color: var(--brand, #5b6cf9) !important;
    }
    .sidebar .nav-bottom {
        position: sticky; bottom: 0; background: #fff;
        border-top: 1px solid var(--divider, #eceafb); padding: 8px;
        display: flex !important; align-items: center; gap: 8px;
    }
    #navMask {
        position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 290;
        background: rgba(17,20,45,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    body.nav-open #navMask { opacity: 1; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) {
        .sidebar, #navMask { transition: none; }
    }
}

/* ---------- 安全区（刘海 / Home 指示条） ----------
   仅设备支持时生效；只改横/底方向，不影响纵向堆叠（避免与 sticky 顶栏错位） */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .top-nav {
            padding-left: calc(12px + env(safe-area-inset-left));
            padding-right: calc(12px + env(safe-area-inset-right));
            padding-bottom: calc(0px + env(safe-area-inset-bottom));
        }
        .sidebar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
        .main-content {
            padding-left: calc(12px + env(safe-area-inset-left));
            padding-right: calc(12px + env(safe-area-inset-right));
            padding-bottom: calc(14px + env(safe-area-inset-bottom));
        }
    }
}

/* ---------- 超小屏（≤480）再压缩，标题不拥挤 ---------- */
@media (max-width: 480px) {
    .main-content { padding: 12px 10px; }
    .card { padding: 14px 12px; }
    .page-header h4,
    .main-content h1, .main-content h3, .main-content h4 { font-size: 18px; }
    .crm-stats, .board-stats { grid-template-columns: repeat(2, 1fr); }

    /* 顶栏手机竖屏收缩：隐藏企业名副标 +「Hi 姓名」，保证「退出」按钮始终可达（全部功能可用）。
       头像首字（.ub-dot）已足以识别用户；企业名可于个人/企业管理页查看，多企业切换为低频操作。
       平板（≤768 但 >480）宽度充足，仍完整展示，不在此处隐藏。 */
    .top-nav .logo .logo-divider,
    .top-nav .logo .logo-slogan { display: none; }
    .top-nav .user-info { flex-shrink: 1; min-width: 0; }
    .top-nav .user-info .ub-name { display: none; }
    /* ≤360 顶栏仍略宽（头像+手机号+退出伸到 380）：进一步收紧，保证「退出」始终完整可见可点 */
    .top-nav { padding: 0 10px; }
    .top-nav .logo { font-size: 15px; gap: 6px; }
    .top-nav .user-info { gap: 5px; }
    .ubadge { padding: 0 8px; }
    .ub-out { padding: 2px 6px; font-size: 11px; }
}
/* ---------- 极窄屏（≤360）顶栏：隐藏「手机号」链接，仅留头像+退出，彻底消除 20px 溢出 ---------- */
@media (max-width: 360px) {
    .top-nav .user-info .ub-out#apiPhoneChangeLink { display: none; }
}

/* ============================================================
   H5 v3.0：移动端数据大屏优化（仅 ≤768px，绝不改动 screen-board.css 桌面呈现）
   - 大屏是电视墙形态，手机上改为「满宽堆叠 + 触控友好」的移动原生看板
   - 全部收在 #adminScreen 作用域内；桌面端（>768px）完全不受影响
   ============================================================ */
@media (max-width: 768px) {
    /* 去掉电视墙的 22px 留白，改紧凑安全边距，铺满更干净（原 .screen-wrap padding:22px） */
    #adminScreen { padding: 8px 10px 14px !important; box-sizing: border-box; }

    /* 移动端进「数据大屏」页签时：顶栏之下只留沉浸式大屏，隐藏常驻的「席位订阅只读卡」#subCard。
       否则它在顶栏下、大屏上占 300+px，把大屏顶出一大段空白（桌面端 #adminScreen 是 .card 内面板，
       本规则收在 ≤768px 且依赖 .page-header.screen-hidden，桌面端不命中，零影响）。 */
    .page-header.screen-hidden ~ #adminBody #subCard { display: none !important; }

    /* 顶栏控制按钮放大到可点（原 32×32，低于触控下限） */
    #adminScreen .sh-btn { width: 40px !important; height: 40px !important; min-width: 40px; padding: 0; box-sizing: border-box; }

    /* 子筛选 tab / 按钮统一触控高度（原 .rk-tabs .sf-tab 仅 27px、.sf-btn 30px） */
    #adminScreen .rk-tabs .sf-tab,
    #adminScreen .screen-filter .sf-tab { min-height: 40px; padding: 8px 14px; box-sizing: border-box; }
    #adminScreen .sf-btn,
    #adminScreen .alert-toggle { min-height: 40px; box-sizing: border-box; }

    /* 排行走马灯行高够点（原 24px，太矮不好点） */
    #adminScreen .tk-row { min-height: 40px; height: auto; align-items: center; padding-top: 7px; padding-bottom: 7px; box-sizing: border-box; }

    /* 排行榜表：超出宽度时「表内横滑」而非裁切/撑破页面（长企业名 nowrap 撑爆宽度） */
    #adminScreen .rank-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 告警带横滑：补 momentum + 隐藏滚动条，移动更顺 */
    #adminScreen .alert-rail { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #adminScreen .alert-rail::-webkit-scrollbar { display: none; }
}

/* ---------- 极窄屏（≤320）大屏微调：控件再收紧，杜绝横向溢出 ---------- */
@media (max-width: 360px) {
    #adminScreen { padding: 6px 8px 12px !important; }
    #adminScreen .sh-btn { width: 38px !important; height: 38px !important; min-width: 38px; }
}

/* ============================================================
   v4.1 · B1 基础能力（2026-10-03，用户端 APP 化第 1 批）
   ------------------------------------------------------------
   本节解决「网页感」的三个来源，与后台 P1 同套路（做法已验证）：
     ① 触摸点按没有即时反馈（原全站仅 2 处 :active）
     ② 触摸后 :hover 状态残留（api-theme.css 有 28 处 :hover，其中
        .btn-primary:hover 有 translateY(-1px)、.card:hover 换阴影、
        tbody tr:hover 高亮行 ⇒ 手机上点过就「粘住」，像坏了）
     ③ iOS 系统点击高亮蓝框，与自绘 :active 反馈重叠
   ⛔ 全部收在 ≤768px / (hover:none) 内，桌面端零影响。
   ============================================================ */

/* ---------- ① 触摸点按反馈（:active） ---------- */
@media (max-width: 768px) {
    /* 去掉系统点击高亮，统一交给自绘 :active */
    .btn, .btn-primary, .btn-outline, .btn-danger, .btn-recharge, .btn-download,
    .btn-text, .btn-refresh, .btn-cancel-process, .btn-delete, .btn-immediate-delete,
    a, button, .menu-item, .menu-sub, .tab-btn, .mtab, .card, .quick-link,
    .list-card, .hero-recharge, .status-tabs .tab-btn,
    .sidebar .nav-bottom button, .balance-capsule, .topbar-kf, .ub-out {
        -webkit-tap-highlight-color: transparent;
    }

    /* 主操作类：按下轻微下沉 + 降透明度（APP 手感的核心） */
    .btn, .btn-primary, .btn-outline, .btn-danger, .btn-recharge, .btn-download,
    .btn-text, .btn-refresh, .btn-cancel-process, .btn-delete, .btn-immediate-delete,
    .menu-item, .menu-sub, .tab-btn, .mtab, .status-tabs .tab-btn,
    .sidebar .nav-bottom button, .balance-capsule, .topbar-kf, .ub-out,
    .hero-recharge, .quick-link, .row-more-btn, .col-actions button {
        transition: transform .06s ease, opacity .06s ease, background-color .06s ease;
    }
    .btn:active, .btn-primary:active, .btn-outline:active, .btn-danger:active,
    .btn-recharge:active, .btn-download:active, .btn-text:active, .btn-refresh:active,
    .btn-cancel-process:active, .btn-delete:active, .btn-immediate-delete:active,
    .menu-item:active, .menu-sub:active, .tab-btn:active, .mtab:active,
    .status-tabs .tab-btn:active, .sidebar .nav-bottom button:active,
    .balance-capsule:active, .topbar-kf:active, .ub-out:active,
    .hero-recharge:active, .quick-link:active, .row-more-btn:active,
    .col-actions button:active {
        opacity: .72;
        transform: scale(.985);
    }

    /* 卡片/列表项：整体按下给柔和底色，替代触摸后粘住的 :hover 高亮 */
    .card:active, .list-card:active, .quick-link:active {
        background-color: var(--bg-hover, #f2f2f8);
        transition: background-color .06s ease;
    }
}

/* ---------- ② 触摸设备 hover 粘滞复位 ---------- */
@media (hover: none) {
    /* 位移类：触摸下无意义，且点过会「浮起不落」 */
    .btn-primary:hover, .btn-recharge:hover,
    .card:hover, .list-card:hover, .quick-link:hover, .kpi-card:hover,
    .hero-recharge:hover, .balance-capsule:hover {
        transform: none;
    }
    /* 换阴影/边框类：复位为常态，避免「一直亮着」 */
    .card:hover, .list-card:hover { box-shadow: var(--shadow, none); }
    .btn-outline:hover { border-color: var(--divider, #e5e7eb); color: var(--text-2, #4E5969); }
    /* 表格行 hover 高亮：触摸后会残留整行高亮 */
    .task-table tbody tr:hover,
    .recharge-table tbody tr:hover { background: transparent; }
}

/* ---------- ③ safe-area 收口（配合本批 viewport-fit=cover） ----------
   ★ 本节修的是一处**既存 bug**（与后台 P0 同类）：
     文件上文的 safe-area 段（`@supports (padding: env(...))`）给 .top-nav / .main-content
     写了 padding-left/right/bottom = calc(Npx + env(...))；
     但**紧随其后的 ≤480 段**用简写 `padding`（`.top-nav{padding:0 10px}`、
     `.main-content{padding:12px 10px}`）把三个方向一并覆盖 ⇒
     **≤480 时 safe-area 全部失效**（刘海机型左右被压、Home 条压住底部）。
     这与后台 `admin-theme-override.css` 的 `padding:16px 12px !important` 压掉
     safe-area 是同一类问题：**简写 padding 会连带覆盖安全区声明**。
   ⇒ 修法：在本文件**最末**（晚于所有简写规则）用 calc 版还原各断点。
     env() 不支持时整条失效，回落到上面已有的普通 padding，无副作用。 */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 768px) {
        .top-nav {
            padding-left: calc(12px + env(safe-area-inset-left));
            padding-right: calc(12px + env(safe-area-inset-right));
        }
    }
    /* ≤480：覆盖 `.top-nav{padding:0 10px}` 与 `.main-content{padding:12px 10px}` */
    @media (max-width: 480px) {
        .top-nav {
            padding-left: calc(10px + env(safe-area-inset-left));
            padding-right: calc(10px + env(safe-area-inset-right));
        }
        .main-content {
            padding-left: calc(10px + env(safe-area-inset-left));
            padding-right: calc(10px + env(safe-area-inset-right));
            padding-bottom: calc(14px + env(safe-area-inset-bottom));
        }
    }
    @media (max-width: 768px) {
        /* 登录页整体容器（login.html 用 .login-page / .stage 结构） */
        .login-page .stage {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
        }
        /* 聊天页输入区（contact.html 已有底部单条，这里补左右方向） */
        .wx-chat-input {
            padding-left: calc(12px + env(safe-area-inset-left));
            padding-right: calc(12px + env(safe-area-inset-right));
        }
    }
}

/* ============================================================
   iOS 输入框 16px 防护（v4.7 · 2026-10-03 · 设计文档 §26）
   ------------------------------------------------------------
   问题：iOS Safari 的长期规则 —— 文本输入框 computed font-size < 16px 时，
         **聚焦会强制放大整个页面**（且不会自动缩回，需手动捏合）。
         本项目用户端 viewport 未设 maximum-scale，拦不住该行为。
   实测（390×844，改前）：9 页共 57 个文本输入框，**100% 低于 16px**（12~14px，
         字号来自各页内联 CSS）。
   对照：后台 `admin-responsive.css:213` 早有
         `.form-control { font-size: 16px; }`（注明「16px 避免 iOS 聚焦缩放」）
         —— 本段是「后台已做、用户端漏了」的对称补齐。

   ⚠️ 两点关键设计（勿随意改动）：
   ① **必须带 !important**：各页内联 `<style>` 用 `#searchKeyword` 一类 **id 选择器**
      （特异性高于本段的标签选择器），且所有页的内联 `<style>` 都位于 `<link>` **之前**
      ⇒ 不带 `!important` 会被内联规则静默压掉（同「后台 P0 拆雷」根因，见 §16）。
   ② **刻意不含 `<select>`**：iOS 上 select 点击弹**原生滚轮选择器**，**不触发页面缩放**
      （该规则只作用于文本类输入）；且 `org_admin.html:222` 的 `.st-select`（成员状态胶囊）
      是刻意 11px 的小控件，设 16px 会把绿色胶囊撑大、破坏成员卡片视觉；它自带
      `font-size:11px !important` 且特异性更高，即便写了也压不住。

   回退：删除本段 + 撤销各页 `?v=` ⇒ 完全还原（纯附加规则，不改造既有选择器）。
   ============================================================ */
@media (max-width: 768px) {
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    textarea {
        font-size: 16px !important;
    }
}