/* =====================================================================
 * Responsive adaptation for mobile + desktop
 * Auto-injected into all .aspx pages by ResponsiveModule (IHttpModule).
 * Goal: make FineUIPro pages adapt to narrow screens without modifying
 *       individual .aspx files. Desktop layout remains unchanged.
 *
 * Note: gl_main.aspx left-panel mobile behavior is handled by JS
 *       (collapseLeftPanel/expandLeftPanel), not CSS tree selectors.
 *
 * IMPORTANT: Do NOT use global html/body/form width or overflow rules,
 * as they break FineUIPro Region layout and IFrame rendering!
 * ===================================================================== */

@media screen and (max-width: 768px) {

    /* --- Form elements: full width on mobile ---
       ★★ 第 92 轮**回退**：这一段曾被改成 `.f-form .f-form-item`（限定作用域），
         结果让**不在 .f-form 内**的表单区（如 gl_caidan.aspx 的查询条件：
         一级菜单/二级菜单/查询条件 —— 那个页面是 f:Panel 直接放表单）
         **失去全宽**，布局变窄 ⇒ 原本正常的页面被改坏。
       ⇒ 已恢复为**全局匹配**（下方原始写法）。
       ⚠ 教训：不要为了修某个局部问题而收窄全局规则的作用域 ——
         收窄必然影响所有"不在新作用域内"的页面，属于隐性回归。 */
    .f-form-item, .f-form-field-wrap,
    .x-form-item, .x-form-field-wrap {
        width: 100% !important;
    }
    .x-form-text, .f-form-text,
        input[type="text"], textarea, select {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

    /* ★★★★★★★ 2026-10-08 第 150 轮：**第 147 轮那段"表单一行一个"的 CSS 已删除**。
       删除原因：它瞄错了结构 —— 当时以为表单项是 FormRow 表格里的 `<td>`，
       实际 FineUI 把每个字段包在 `<div class="f-layout-column-item">` 里、
       靠**内联 `left` + 计算宽度**横向排开（精确说明见 css/mobile.css 第 65~73 行），
       所以那组 `> td` 规则**根本没命中**（用户反馈"还没有成功"）。

       ★★★ 最终方案（2026-10-08，用户拍板）：**不用 CSS，直接改页面** ——
       用脚本把"一行塞多个控件"的 `<f:FormRow>` 拆成"**每个输入框/下拉框独占一行**"，
       按钮保持合并成一行。共修改 **44 个 aspx / 189 个 FormRow**；
       **PC + 手机同时生效**，且**不依赖 `:has()`、不依赖选择器是否命中**，最稳。
       （脚本：`_split_formrow.py`；结构等价性校验：`_verify_split.py` 全部通过；
         原文件备份在 `d:\zhgl\_backup_formrow_split\`。）
       ⇒ 因此本项目**不再需要**任何"让表单字段独占一行"的 CSS 干预
         （第 150 / 151 轮那两段 CSS 均已撤除）。
       ⚠ 教训：**改 CSS 前先确认"选择器到底命中了什么"**；
         **结构性需求（一行变多行）优先改页面**，CSS 只做表现层微调。
       ================================================================= */
    /* --- Toolbar: wrap buttons on mobile ---
       ★★★★★★★ 2026-10-07 第 116 轮：**必须排除分页栏！**
       原写法 `.f-toolbar { white-space: normal }` 是**分页栏竖排的真凶**：
         · FineUI 让工具栏项横向排列靠的是 `white-space:nowrap` + 负 margin 排版；
         · 改成 `normal` 后，配合 FineUI 给 `.f-btn` 设的 `display:block`，
           每个按钮退化成"独占一行的块级元素" ⇒ **分页栏竖排**；
         · `.f-toolbar .f-btn{margin:2px}` 还覆盖了 FineUI 的负 margin 排版。
       真机诊断证据（r115，px_xiangmuxinxi.aspx）：
         `<a> .f-btn ... 331x36 disp=block` × 4 个（分页按钮），
         容器内宽仅 331px ⇒ 4×36+间距 = 209px ⇒ 正是分页栏高度。
       ⇒ 分页栏（`.f-panel-toolbar-bottomct` 内）**强制恢复 nowrap**，
         并把它内部的按钮还原为 `inline-block`（不设 display，用 revert 保持原值）。
       ⚠ 其余工具栏（表单区按钮排）保留折行行为，不受影响。 */
    /* ★★★★★★★ 2026-10-07 第 133 轮：**用 `:not()` 精确排除"分页栏内的工具栏"**
       ────────────────────────────────────────────────────────────────
       新证据（用户提供 Chrome 截图）：**Chrome 里也竖排**！
       而 Chrome 用的正是 `com.google.android.webview 138.0.7204.179`
       —— **与 App 完全相同的内核**；而百度浏览器（自带内核）里是**横排**。
       ⇒ 因此真正的差异是 **内核 A（com.google.android.webview 138，竖排）
         vs 内核 B（百度自带内核，横排）**，
         而**不是**"浏览器 vs App"。
       ⇒ 即：**分页栏竖排是 `com.google.android.webview 138` 这个内核的渲染行为**。

       ⇒ 本轮的验证目标：**确认下列哪条规则是该内核下竖排的成因**。
         头号嫌疑 = 下面这条 `.f-toolbar{white-space:normal}`：
         它**同时命中分页栏内部的 `.f-toolbar`**（分页栏层级：
         `.f-panel-toolbar-bottomct > .f-toolbar > .f-panel-bodyct > .f-panel-body`），
         把 FineUI 依赖的 `white-space:nowrap` 改成 `normal`
         ⇒ 分页项被允许换行 ⇒ 逐行竖排。
         ⚠ 该内核可能另有实现差异，故本轮**同时保留一条最小例外**（见下）。
       ────────────────────────────────────────────────────────────────
       ⚠ `:not(.f-px-pager-toolbar)` 是"类名黑名单"写法：分页栏内部的 `.f-toolbar`
         在服务端**并没有**这个类名，所以此处**改用"后代锚点"写法更可靠** ——
         即用 `:not()` 排除**含 `.f-panel-toolbar-bottomct` 祖先**的工具栏。
         由于 CSS 无"祖先否定选择器"，实际只能：
         ① 先整体设 normal；② 再用**更具体的选择器**把分页栏内工具栏改回 nowrap
            （写在后面 + 选择器更长 ⇒ 优先级更高，见下方"分页栏恢复"规则）。 */
    .x-toolbar, .f-toolbar {
        white-space: normal !important;
    }
    .x-toolbar .x-btn, .f-toolbar .f-btn {
        margin: 2px !important;
    }
    /* ===== 分页栏：这里只做"不换行"这一件事（**刻意不改 display / flex / width**）=====
       ★ 2026-10-08 第 146 轮：把第 116 / 132 / 133 轮**三条重叠规则合并**为本段。
       ① 分页栏链路上的容器强制 `nowrap`
          —— 否则会被下方 `.f-toolbar { white-space: normal }` 误伤，
             分页项被允许换行 ⇒ 逐行竖排；
       ② 分页栏内的项与按钮文字一律不换行。
       ⚠ 这里**刻意不设 `display`**：第 91 轮踩过"设 display 让 Hidden=true 的按钮凭空出现"的坑。 */
    .f-panel-toolbar-bottomct,
    .f-panel-toolbar-bottomct .f-toolbar,
    .f-panel-toolbar-bottomct .f-panel-body,
    .f-panel-toolbar-bottomct .f-panel-bodyct {
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    .f-panel-toolbar-bottomct .f-toolbar-item,
    .f-panel-toolbar-bottomct a.f-btn,
    .f-panel-toolbar-bottomct .f-grid-pager {
        white-space: nowrap !important;
    }
    /* =================================================================
       ★★★★★★★★★★★★★ 2026-10-08 第 145 轮：**分页栏竖排的【纯 CSS 终解】**
       =================================================================
       r144 真机数据（App / px_xiangmuxinxi.aspx）给出了最后两块拼图：
         · `★ 按钮 position(计算值): absolute`      ← 按钮被**绝对定位**（来自样式表）
         · 行内 style = `display: inline-block; left: 0px; right: auto;
                         top: 41.7143px; width: 100% !important;
                         box-sizing: border-box !important;`
         · 4 个按钮 top = 41.7 / 83.4 / 125.1 / 166.9  ⇒ **每个独占一行 ⇒ 竖排**
       ⇒ 症结：FineUI 把每个分页按钮做成
         `position:absolute` + `top` 递增 + `width:100%`（"放不下就逐行堆叠"的降级布局）。

       ★★★ 为什么此前 20 多轮"改 CSS 全都无效"——原因在这里：
         行内的 **`width: 100% !important`** 无法被任何外部选择器覆盖
         （行内 `!important` 的优先级高于样式表的 `!important`）。

       ★★★ 但它并非无解，因为：
         ① **行内样式里只有 `width` 带 `!important`** ——
            `display` / `left` / `top` / `box-sizing` 都是**普通行内**，
            `position` 甚至**不在行内**（来自 FineUI 样式表）
            ⇒ 这几项 **CSS 的 `!important` 完全可以覆盖**；
         ② **`max-width` 与 `width` 是两个不同的属性** ——
            `width: 100% !important` 也要受 `max-width` 约束
            （只有在 `min-width` 更大时才会被顶开，故同时把 `min-width` 归零）
            ⇒ **用 `max-width` 就能"卡住"被撑成满宽的按钮**。

       ⇒ 于是**纯 CSS 即可解决**：
         · `position: static` 让它脱离绝对定位、回到正常文档流；
         · `top/left/right: auto` 清掉 `top` 递增的偏移；
         · `max-width: 60px` 把宽度卡回"图标按钮"的尺寸
           （4 × (60 + 8px 外边距) ≈ 272px < 容器 331px ⇒ **能排进同一行**）；
         · 配合上面的 `white-space: nowrap` ⇒ **一行横排**。
       ⚠ **不需要任何 JS 补丁** ⇒ 不再与 FineUI 的 `doLayout()` 互相覆盖
         ⇒ **不抖动、可正常点击**（r143 的"抖动/点不动"正是 JS 硬改造成的）。
       ⚠ 只作用于分页栏（`.f-panel-toolbar-bottomct` 之内）；
         **不改 `display`**（避免第 91 轮"Hidden 按钮凭空出现"的事故）；
         不碰页面顶部/表单区的其它工具栏。
       ================================================================= */
    .f-panel-toolbar-bottomct .f-grid-pager {
        /* ① 脱离 FineUI 的绝对定位（`position` 不在行内 ⇒ 可覆盖） */
        position: static !important;
        /* ② `top` / `left` 是普通行内 ⇒ `!important` 可直接覆盖 */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        /* ③ ★ 关键：`max-width` 能约束 `width`，即使后者是行内 `!important` */
        max-width: 60px !important;
        min-width: 0 !important;
        /* ④ 不浮动、不参与"逐行堆叠" */
        float: none !important;
        margin: 2px 4px !important;
    }
    /* =================================================================
       ★★★★★★★★★ 2026-10-07 第 132 轮：**分页栏干预 CSS 全部撤除（回归框架默认）**
       =================================================================
       撤除原因（30 余轮排查的最终反省）：
         第 116 / 119 / 124 轮我陆续加了 **100 多行**"分页栏专用" CSS
         （强设 `display:flex`、`width`、`flex`、`white-space`…）。
         但第 127 轮真机诊断揭示：
           **FineUI 的工具栏/分页栏是靠"绝对定位 + 内联 `top`/`left` 坐标"摆放项的**
           （分页按钮行内 style 帶 `top:41.7/83.4/125.1/166.8px` —— 正是竖排坐标）。
         ⇒ 我加的 flex 规则与 FineUI 的定位体系**互相打架**：
             · 强设 `display:flex` ⇒ 摧毁"块级自动撑满"的宽度来源（`.f-panel-body` 宽塌成 0，第 124 轮）；
             · `flex:0 0 auto` + `min-width:0` ⇒ 让 FineUI 的定位计算失去依据；
             · 结果：**越修越坏**（宽度对了位置又错，清 `top` 又导致按钮消失，第 128 轮）。
         ⇒ **关键事实证明"不该由 CSS 插手"**：
             **同一份 CSS 在手机浏览器里渲染完全正常（分页栏横排）**，
             只有 App WebView 里竖排 ⇒ 说明 CSS 本身没问题，
             问题在"渲染环境 × 框架定位方式"的组合。
         ⇒ 决策：**撤除全部分页栏干预 CSS，回归框架默认行为**。
            只保留下面这一条**最小的**例外（第 116 轮引入，用于不被上面
            `.f-toolbar{white-space:normal}` 误伤），它只改 `white-space`、不改布局机制。
       ⚠ 教训：**"分页栏/工具栏"这类由框架用"绝对定位 + 内联坐标"排版的组件，
         不要用 CSS 去改它的 display/flex/width** —— 会破坏框架的定位基准。
       ================================================================= */
    /* ★ 2026-10-08 第 146 轮：
       本条"唯一保留的分页栏规则"与**本段开头**那条的分页栏规则**选择器完全相同**
       ⇒ 纯属重复，已删除（合并到上面统一维护）。
       ⚠ 同时更正上方第 132 轮注释里的一句话：
         它写"撤除全部分页栏干预 CSS" —— 该结论已被**第 145 轮修正**。
         第 145 轮找到了**唯一安全的切入点**（见上方 `.f-grid-pager` 那条：
         只把框架写成"绝对定位 + 满宽"的按钮拉回正常流，用 `max-width` 卡宽度），
         它是**声明式**的、不与 `doLayout()` 竞争 ⇒ 不抖动（用户已确认修复成功）。
       ⚠ 但第 132 轮的教训**仍然成立**：分页栏/工具栏这类由框架用
         "绝对定位 + 内联坐标"排版的组件，**不要改它的 display / flex / width**。 */

    /* ===== ★ 第 93/95 轮：分页栏内按钮**间距**修正（最小改动）=====
       现象（真机截图）：分页栏已能横排，但
         ① 相邻按钮图标**叠在一起**（「»」与「刷新」重叠）；
         ② 最左侧的「«」**被挤到工具栏边框外面**。
       ⚠ 只调间距/内边距，**绝不设 display**——
          设display 会让 aspx 里 Hidden="true" 的按钮凭空出现（第 91 轮踩过）。
       ⚠ 选择器限定在 `.f-panel-toolbar-bottomct`（真机诊断证实的真实类名），
          不影响页面顶部工具栏的按钮间距。
       ★ 第 95 轮关键修复：FineUI 的按钮/文本项常是**负 margin 靠内边距补偿**，
         叠加 `margin:2px` 后总偏移为负 ⇒ 视觉上"贴到框外"。
         ⇒ 统一给分页栏内的项设 **margin: 2px 4px** 并**清掉负边距**。 */
    .f-panel-toolbar-bottomct .f-btn,
    .f-panel-toolbar-bottomct .f-text,
    .f-panel-toolbar-bottomct .f-icon,
    .f-panel-toolbar-bottomct .f-state-default,
    .f-panel-toolbar-bottomct .f-field,
    .f-panel-toolbar-bottomct .f-field-wrap,
    .f-panel-toolbar-bottomct .f-toolbar-item {
        margin: 2px 4px !important;
        /* 负margin 会让元素视觉上溢出容器，这里强制归零 */
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
    .f-panel-toolbar-bottomct .f-btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-width: 0 !important;
    }
    /* 分页栏容器本身留一点内边距，避免首尾按钮贴边/溢出 */
    .f-panel-toolbar-bottomct,
    .f-panel-toolbar-bottomct .f-toolbar,
    .f-panel-toolbar-bottomct .f-panel-bodyct {
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    /* --- Grid: horizontal scroll on mobile --- */
    .x-grid, .f-grid {
        overflow-x: auto !important;
    }

    /* --- Window/Dialog: fullscreen on mobile --- */
    .x-window, .f-window {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    /* =================================================================
     * 2026-10-05：顶部 / 底部占位区域精简
     * 背景：手机上一个「物资申请」页面，顶部（logo + 系统名 + 头像）约占
     *       90px、底部（版本 + Copyright + 在线人数）约占 90px，
     *       合计近 1/5 屏幕高度被非操作区占用，业务内容可视区严重缩小。
     * 目标：顶部只留必要元素、底部整条隐藏。
     * ================================================================= */

    /* --- 顶部：紧凑化 --- */
    .topregion {
        /* 区域高度由内容决定，收紧内边距 */
        padding: 0 !important;
    }
    .topregion .f-mainheader {
        padding: 2px 4px !important;
    }
    /* 系统名称：手机上隐藏（顶栏已由页面标题体现，重复占位） */
    .topregion .f-mainheader .logo {
        display: none !important;
    }
    /* logo 图片同步隐藏（与文字一起省掉一整格） */
    .topregion .f-mainheader table td:first-child img {
        display: none !important;
    }
    /* 顶部功能按钮：只留图标，去掉文字（原本已隐藏 span，再收紧尺寸） */
    .topregion .icontopaction,
    .topregion .userpicaction {
        min-width: 34px !important;
        height: 34px !important;
        padding: 2px !important;
        margin: 0 1px !important;
    }
    .icontopaction span {
        display: none !important;
    }

    /* --- 底部：整个隐藏（版本/Copyright/在线人数 在手机上无操作价值） --- */
    .bottomregion,
    #bottomPanel,
    table.bottomtable {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    /* =================================================================
     * 2026-10-01 追加：手机端"输入体验"优化（全局生效）
     * 目标：控件便于触摸、聚焦时系统不自动放大、表单纵向排布、键盘不遮挡
     * 原则：所有规则限定在具体类名/元素下，不使用 html/body/form 全局规则
     * ================================================================= */

    /* --- 1. 触摸友好的输入控件：高度 >=44px，字号 >=16px ---
     *     字号 16px 是 iOS Safari 阻止「聚焦自动放大」的阈值 */
    .f-form-text, .f-triggerbox, .f-combobox, .f-numberbox,
    .f-datepicker, .f-timespinner, .f-textareafield,
    input[type="text"], input[type="password"], input[type="number"],
    input[type="tel"], input[type="email"], input[type="date"],
    textarea, select {
        min-height: 44px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }
    /* 多行文本框不强制 44px（本身更高），仅统一字号 */
    textarea, .f-textareafield textarea {
        min-height: 88px !important;
        font-size: 16px !important;
    }
    /* 只读展示型字段保持紧凑，避免占用过多纵向空间 */
    .f-form-text[readonly] {
        min-height: 34px !important;
        background-color: #f7f7f7 !important;
    }

    /* --- 2. 表单标签：窄屏改为「上标签 / 下控件」左对齐结构 ---
     *     桌面端 Table 布局的右对齐长标签在手机上会挤压控件宽度 */
    .f-field-fieldlabel-cell, .f-field-fieldlabel,
    .f-form-fieldlabel-cell, .f-form-fieldlabel {
        text-align: left !important;
        padding-bottom: 2px !important;
        vertical-align: bottom !important;
    }
    .f-field-fieldlabel-text, .f-form-fieldlabel-text {
        font-size: 14px !important;
        font-weight: normal !important;
        color: #5a5a5a !important;
    }
    /* 表单行内边距压缩，为控件争取更多横向空间 */
    .f-form-row > td, .f-form-row .f-form-field-cell {
        padding: 5px 3px !important;
    }
    /* 必填红星与标签同行更醒目 */
    .f-field-required-star, .f-required-star {
        font-size: 14px !important;
    }

    /* --- 3. Grid 单元格触摸高度（表格数据行同样需要好点） --- */
    .f-grid-cell, .x-grid-cell {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
    /* Grid 内的操作链接/按钮加大命中区域 */
    .f-grid-cell .f-btn, .f-grid-cell a {
        min-height: 32px !important;
        display: inline-block !important;
        line-height: 32px !important;
    }

    /* --- 4. 弹窗底部工具栏吸底：保存/提交按钮常驻可视区 ---
     *     键盘弹出时配合 mobile.js 的 visualViewport 修正一起工作 */
    .f-window .f-toolbar-docked-bottom,
    .px-win-mobile .f-toolbar-docked-bottom,
    .px-win-mobile .f-window-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: #f5f5f5 !important;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08) !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* 吸底工具栏内按钮加大，主操作更易命中 */
    .px-win-mobile .f-toolbar-docked-bottom .f-btn,
    .px-win-mobile .f-window-footer .f-btn {
        min-height: 44px !important;
        min-width: 84px !important;
        font-size: 15px !important;
        margin: 4px !important;
    }

    /* --- 5. 分页区 / 分页工具条：窄屏折行避免溢出 ---
       ★ 第 90 轮：分页栏的"压缩"已改由服务端属性处理（见 App_Code/PageBase.cs
         的 PagingType.Arrow / ShowPagingMessage / ShowPageSizeSelector 等），
         **CSS 不要再去硬压分页栏**：
         - 第 89 轮试过 flex-wrap:nowrap，结果把分页栏逼成**竖排**，更糟；
         - 本段曾用 .f-grid-pager 这个**未经验证的 class 名**，实际是否存在未知。
       ⇒ 下面只保留"允许折行"这一条最保守的行为（避免横向溢出），
         不再改 flex-direction / width / display。 */
    /* ★★★★★★★ 2026-10-07 第 116 轮：**必须排除分页栏！**
       原写法 `.f-panel-body > .f-toolbar { white-space: normal }` 是
       分页栏竖排的**第二处真凶** —— 分页栏的 toolbar 正是 `.f-panel-body` 的直接子元素
       （层级：.f-panel-toolbar-bottomct > .f-panel-bodyct > .f-panel-body > .f-toolbar），
       改成 normal 后每个分页按钮独占一行。
       ⇒ 用 `:not()` 排除分页栏内部的 toolbar，只保留普通工具栏的折行行为。
       ⚠ `:not()` 里只写简单选择器（不带后代），保证旧内核兼容。 */
    .f-panel-body > .f-toolbar:not(.f-px-pager-toolbar) {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
    /* 兜底（不依赖 :not 支持度）：分页栏内的 toolbar 强制恢复 nowrap，且写在后面优先 */
    .f-panel-toolbar-bottomct .f-toolbar {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    /* --- 6. 普通按钮（弹窗内/工具栏）触摸尺寸 --- */
    .px-win-mobile .f-btn, .px-grid-mobile ~ .f-toolbar .f-btn {
        min-height: 40px !important;
        font-size: 15px !important;
    }

    /* --- 7. 下拉/日期选择弹出层：限制宽度不超出屏幕 --- */
    .f-menu, .f-datepicker-panel, .f-boundlist, .f-triggerbox-panel {
        max-width: calc(100vw - 8px) !important;
        box-sizing: border-box !important;
    }

    /* --- 8. 详情类只读面板：字段纵向排列更易读 --- */
    .px-win-mobile .f-field-readonly {
        text-align: left !important;
    }

}