/*!
 * GEX 后台 · 手机/平板窄屏适配（用户 2026-09-18 提）
 * ---------------------------------------------------------------------------
 * 问题：手机打开后台菜单点不了、每页都看不全。
 *
 * 根因：gex-sidebar.css 把侧边栏写死成 88+272=360px 宽，正文写死让出 360（≤900px 时 288）。
 * 窄屏下 AdminLTE 本来会把侧栏收成"抽屉"（body.sidebar-collapse → margin-left:-260px，
 * 点左上角 ☰ 变 body.sidebar-open 滑出来），但它只知道 260 这个宽度：
 *   - 收起时只往左挪 260，360 宽的侧栏还露出 100px 盖在正文上；
 *   - 正文仍被推开 288px，375 宽的手机上只剩 87px，一个字一行。
 *
 * 做法：
 *   1. 991.98px 以下（与 AdminLTE 的抽屉断点一致）侧栏变成真正的抽屉，正文吃满全宽；
 *   2. 正文里的表格、表单、筛选、工具栏、弹窗、自定义页面的多列布局，统一按窄屏重排；
 *   3. 电脑端一条都不影响——本文件所有规则都在 @media 里；≥1280px 一条都不生效。
 *
 * 2026-09-19 补：992–1279（iPad 横屏、小笔记本）原来侧栏也占 360，正文只剩 600 来宽，
 * 加了 A、B 两段：表格改为卡片内左右滑、侧栏收窄到 276。
 *
 * 回滚：bootstrap.php 里摘掉加载这个文件的那一行（以及紧跟着的那段 Admin::script）。
 */

/* ===========================================================================
   A. 平板和手机共用（≤1279.98px，用户 2026-09-19 提：iPad 横屏 / 小笔记本也挤）
   992–1279 这一段侧栏还在左边（不变抽屉），但正文只剩 600 来宽，宽表格会把整页撑出
   横向滚动条。这里放的是"跟侧栏形态无关、只跟正文变窄有关"的规则。
   1280 及以上一条都不生效。
   =========================================================================== */
@media (max-width: 1279.98px) {

    /* 表格：左右滑动看全。dcat 为了让行内"⋮"下拉菜单不被裁掉，把 .table-responsive
       的 overflow 改成了 visible——结果窄屏下表格超出部分直接被切掉，谁也看不到。
       下拉菜单被裁的问题交给 gex-mobile.js（打开时改成 fixed 定位）。 */
    body.dcat-admin-body .content-body .table-responsive,
    body.dcat-admin-body .content-body .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* 工具栏那个也叫 .table-responsive，但里面是按钮和"导出"下拉，不能裁 */
    body.dcat-admin-body .content-body .custom-data-table-header .table-responsive {
        overflow: visible !important;
    }

    /* 表格单元格默认不折行、长文本放开：由 gex-mobile.js 给滚动容器打 .gxm-scroller、
       给长文本格子打 .gxm-wrap（原因见 JS 里的注释）。 */
    body.dcat-admin-body .gxm-scroll {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    body.dcat-admin-body .gxm-scroller table th,
    body.dcat-admin-body .gxm-scroller table td {
        white-space: nowrap;
    }

    body.dcat-admin-body .gxm-scroller table td.gxm-wrap {
        white-space: normal !important;
        min-width: 200px;
        max-width: 320px;
        overflow-wrap: anywhere;
    }

    body.dcat-admin-body .content-body .table-wrapper > table th,
    body.dcat-admin-body .content-body .table-wrapper > table td {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 页头 / 区块头 / 工具条：桌面是「标题 ……… 按钮」一行排开（flex + space-between），
       手机上标题被按钮挤成两三个字一行（Legacy Provider、产品与能力 页实测）。
       这类行一律允许换行，放不下时按钮自己掉到下一行。
       按类名约定匹配（xxx-head / xxx-header / xxx-hero / xxx-toolbar），弹窗标题栏除外——
       那里标题换行后，关闭按钮会孤零零掉到左下角。 */
    body.dcat-admin-body .content-body [class$="-head"]:not([class*="modal"]),
    body.dcat-admin-body .content-body [class*="-head "]:not([class*="modal"]),
    body.dcat-admin-body .content-body [class$="-header"]:not([class*="modal"]),
    body.dcat-admin-body .content-body [class*="-header "]:not([class*="modal"]),
    body.dcat-admin-body .content-body [class$="-hero"],
    body.dcat-admin-body .content-body [class*="-hero "],
    body.dcat-admin-body .content-body [class$="-toolbar"],
    body.dcat-admin-body .content-body [class*="-toolbar "],
    body.dcat-admin-body .content-body [class$="-actions"],
    body.dcat-admin-body .content-body [class*="-actions "] {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* 所有分页条（自定义页面自己套的 .pagination）：放不下就换行，别伸出屏幕 */
    body.dcat-admin-body .content-body .pagination {
        flex-wrap: wrap;
        row-gap: 6px;
        max-width: 100%;
    }

    body.dcat-admin-body .content-body [class*="pagination"] {
        max-width: 100%;
        min-width: 0;
    }

    /* 角色新建/编辑页的权限树、菜单树（jstree）：dcat 把它放在 .input-group 里，
       手机上 input-group 不换行，树的宽度撑出屏幕（375 宽实测到 393px）；
       平板上菜单管理页的编辑表单同样撑到 1092px（1024 宽实测） */
    body.dcat-admin-body .content-body .input-group > .jstree-wrapper {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
    }

}

/* ===========================================================================
   B. 只给平板（992–1279.98px）：侧栏收窄
   桌面是 88（图标栏）+ 272（面板）= 360。这里收成 76 + 200 = 276，正文多出 84px。
   gex-sidebar.css 里正文让位用的就是 calc(var(--gxn-rail) + var(--gxn-panel))，
   改这两个变量，正文、页头、页脚会一起跟着让位，不用再逐个改 margin。
   =========================================================================== */
@media (min-width: 992px) and (max-width: 1279.98px) {
    body.gex-proto-nav {
        --gxn-rail: 76px;
        --gxn-panel: 200px;
    }

    body.gex-proto-nav .side-nav-item > .side-nav-link {
        padding: 9px 4px 8px !important;
    }

    body.gex-proto-nav .side-nav-item > .side-nav-link p {
        max-width: 68px;
        white-space: normal;
        font-size: 11px;
        line-height: 1.25;
    }

    body.gex-proto-nav .sub-menu-item {
        padding: 0 6px 16px;
    }

    body.gex-proto-nav .sub-menu-item h4 {
        font-size: 18px !important;
        padding: 20px 10px 12px !important;
    }

    body.gex-proto-nav .sub-menu-item > .gxn-kicker {
        padding: 0 10px 12px;
    }

    /* 面板只有 200 宽：三级缩进收到跟分组标题对齐（桌面那 48px 是主题吃掉负边距的遗留），
       长名字允许折成两行 */
    body.gex-proto-nav .main-sidebar .sub-menu-item .nav-treeview.nav .nav-item > a.sub-link.nav-link,
    body.gex-proto-nav .main-sidebar .nav .sub-menu-item > .nav-item > a.sub-link.nav-link {
        padding-left: 12px !important;
        padding-right: 8px !important;
    }

    body.gex-proto-nav .sub-menu-item .nav-treeview .nav-item > a.sub-link p {
        white-space: normal;
        line-height: 1.35;
    }

    /* 正文两边的留白从 35px 收到 16px */
    body.dcat-admin-body .content-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* dcat 筛选面板桌面是一行四项（col-sm-3），正文 700 来宽时输入框被挤到 30px，
       一行两项 */
    body.dcat-admin-body .filter-box .filter-input {
        flex: 0 0 50%;
        max-width: 50%;
    }

    body.dcat-admin-body .filter-box .input-group > .form-control,
    body.dcat-admin-body .filter-box .input-group > .select2-container {
        min-width: 0;
    }
}

/* ===========================================================================
   C. 只给手机（≤991.98px）：侧栏变抽屉 + 其余手机排版
   =========================================================================== */
@media (max-width: 991.98px) {

    /* =======================================================================
       1. 侧栏 → 抽屉
       ======================================================================= */
    body.gex-proto-nav {
        --gxn-rail: 76px;
        /* 抽屉右边留一条缝，看得到后面的页面，知道点空白处能关掉 */
        --gxn-drawer: min(360px, calc(100vw - 48px));
        --gxn-panel: calc(var(--gxn-drawer) - var(--gxn-rail));
    }

    body.gex-proto-nav .main-sidebar,
    body.gex-proto-nav .main-sidebar .sidebar,
    body.gex-proto-nav .nav-sidebar {
        width: var(--gxn-drawer) !important;
    }

    body.gex-proto-nav .sub-menu {
        width: var(--gxn-panel) !important;
    }

    /* 收起：整块挪出屏幕（多挪 20px，把阴影也藏掉） */
    body.gex-proto-nav .main-sidebar {
        margin-left: calc(-1 * var(--gxn-drawer) - 20px) !important;
        z-index: 1050 !important;
    }

    body.gex-proto-nav.sidebar-open .main-sidebar {
        margin-left: 0 !important;
        box-shadow: 0 0 40px rgba(6, 24, 39, .35) !important;
    }

    /* 抽屉打开时后面那层半透明遮罩：点它关抽屉（AdminLTE 自带逻辑） */
    body.gex-proto-nav #sidebar-overlay {
        z-index: 1049 !important;
        background: rgba(6, 24, 39, .45);
    }

    /* 高度：iOS Safari 的 100vh 含地址栏，底部几项会被挡住，用 dvh 兜底 */
    body.gex-proto-nav .main-sidebar,
    body.gex-proto-nav .main-sidebar .sidebar,
    body.gex-proto-nav .side-scroll,
    body.gex-proto-nav .sub-menu {
        height: 100vh !important;
        height: 100dvh !important;
    }

    body.gex-proto-nav .side-scroll,
    body.gex-proto-nav .sub-menu {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* 一级图标栏：窄一点，文字允许两行，不再被省略号吃掉 */
    body.gex-proto-nav .side-nav-item > .side-nav-link {
        min-height: 58px;
        padding: 9px 4px 8px !important;
    }

    body.gex-proto-nav .side-nav-link,
    body.gex-proto-nav .sub-menu-item a.sub-link {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    body.gex-proto-nav .side-nav-item > .side-nav-link p {
        max-width: 68px;
        white-space: normal;
        font-size: 11px;
        line-height: 1.25;
    }

    body.gex-proto-nav .sub-menu-item {
        padding: 0 8px 24px;
    }

    body.gex-proto-nav .sub-menu-item h4 {
        font-size: 19px !important;
        padding: 20px 12px 14px !important;
    }

    body.gex-proto-nav .sub-menu-item > .gxn-kicker {
        padding: 0 12px 14px;
    }

    /* 三级：手指点的目标至少 44px */
    body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link {
        min-height: 44px;
    }

    body.gex-proto-nav .sub-menu-item .nav-treeview .nav-item > a.sub-link p {
        white-space: normal;
        line-height: 1.35;
    }

    /* gex-sidebar.css 想用 margin-left:-36px 抵掉 48px 缩进，但主题的 .nav{margin:0!important}
       把负边距吃掉了，实际缩进 48px。抽屉只有 280 来宽，这里直接把缩进收到跟分组标题对齐。 */
    body.gex-proto-nav .main-sidebar .sub-menu-item .nav-treeview.nav .nav-item > a.sub-link.nav-link {
        padding-left: 14px !important;
        padding-right: 10px !important;
    }

    /* 不在分组里的页面（区里直接挂的，比如「GEX One Dashboard」「小额速汇」）
       admin.css 给了 28px 缩进，跟分组里的页面对不齐 */
    body.gex-proto-nav .main-sidebar .nav .sub-menu-item > .nav-item > a.sub-link.nav-link {
        padding-left: 14px !important;
    }

    /* 正文、页脚、页头不再给侧栏让位 */
    body.gex-proto-nav .content-wrapper,
    body.gex-proto-nav .main-footer,
    body.gex-proto-nav .main-header {
        margin-left: 0 !important;
    }

    /* =======================================================================
       2. 页面骨架
       ======================================================================= */
    /* 兜底：万一还有漏网的宽元素，也别让整页左右晃。
       用 clip 不用 hidden——hidden 会把 body 变成独立滚动容器，
       固定顶栏和整页滚动都会错乱（实测滚动后顶栏跑到屏幕中间）。 */
    html,
    body.dcat-admin-body {
        overflow-x: clip;
    }

    body.dcat-admin-body .content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-width: 0;
    }

    /* 左右留 10px。admin.css 在 ≤991px 给了 14px，再加 bootstrap .row 的负边距，
       卡片实际离屏幕边 26px，375 宽的手机白白吃掉 52px。 */
    body.dcat-admin-body:not(.login-page) .content-body,
    body.dcat-admin-body:not(.login-page) .content-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.dcat-admin-body:not(.login-page) .content-body {
        padding-top: 8px !important;
    }

    body.dcat-admin-body .content-body > .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    body.dcat-admin-body .content-body > .row > [class*="col-"],
    body.dcat-admin-body .content-body > .row > [class*="col-"] > .row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* 页面里再套一层 .row（Visa 对账、汇付备案页）时，bootstrap 默认 -15px 的负边距
       会伸出屏幕左边 4px */
    body.dcat-admin-body .content-body > .row > [class*="col-"] > .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    /* 页标题 + 面包屑：桌面是左右浮动排一行，手机上标题会被挤成竖条 */
    body.dcat-admin-body .content-header {
        padding-top: 14px !important;
    }

    body.dcat-admin-body section.content-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 0 !important;
    }

    body.dcat-admin-body section.content-header > h1 {
        float: none !important;
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    body.dcat-admin-body section.content-header > h1 small {
        display: inline-block;
        font-size: 13px;
    }

    body.dcat-admin-body section.content-header .breadcrumb {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px;
        flex-wrap: wrap;
        background: transparent;
    }

    body.dcat-admin-body .content-header > div:first-child:empty,
    body.dcat-admin-body section.content-header > div:only-child {
        display: none;
    }

    /* 卡片内边距收一圈 */
    body.dcat-admin-body:not(.login-page) .content-body > .box,
    body.dcat-admin-body:not(.login-page) .content-body > .card,
    body.dcat-admin-body:not(.login-page) .content-body > .panel,
    body.dcat-admin-body:not(.login-page) .content-body > .grid-box,
    body.dcat-admin-body:not(.login-page) .content-body > .form-horizontal,
    body.dcat-admin-body:not(.login-page) .content-body > form,
    body.dcat-admin-body:not(.login-page) .content-body > .row > [class*="col-"] > .box,
    body.dcat-admin-body:not(.login-page) .content-body > .row > [class*="col-"] > .card,
    body.dcat-admin-body:not(.login-page) .content-body > .row > [class*="col-"] > .panel,
    body.dcat-admin-body:not(.login-page) .content-body > .row > [class*="col-"] > .grid-box,
    body.dcat-admin-body:not(.login-page) .content-body > .row > [class*="col-"] > .form-horizontal,
    body.dcat-admin-body:not(.login-page) .content-body > .row > [class*="col-"] > form {
        padding: 12px;
        margin-bottom: 12px;
    }

    body.dcat-admin-body .content-body .card-body,
    body.dcat-admin-body .content-body .box-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.dcat-admin-body .content-body .card-header,
    body.dcat-admin-body .content-body .box-header {
        padding-left: 12px;
        padding-right: 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* =======================================================================
       3. dcat 列表页（Grid）
       ======================================================================= */

    /* 工具栏：刷新 / 筛选 / 新增 / 导出 / 批量操作，放不下就换行 */
    body.dcat-admin-body .custom-data-table-header .top {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    body.dcat-admin-body .custom-data-table-header .top > * {
        margin: 0 !important;
        float: none !important;
    }

    body.dcat-admin-body .custom-data-table-header .top > .pull-right,
    body.dcat-admin-body .custom-data-table-header .top > .float-right {
        margin-left: auto !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

    body.dcat-admin-body .custom-data-table-header .top > .pull-right > *,
    body.dcat-admin-body .custom-data-table-header .top > .float-right > * {
        margin: 0 !important;
    }

    /* 快捷搜索框占满一行 */
    body.dcat-admin-body .custom-data-table-header .quick-search,
    body.dcat-admin-body .custom-data-table-header form.quick-search-form {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body.dcat-admin-body .custom-data-table-header .quick-search .input-group,
    body.dcat-admin-body .custom-data-table-header .quick-search input {
        width: 100% !important;
        max-width: none !important;
    }

    /* 筛选：每项一行，左边的字段名不被挤没 */
    body.dcat-admin-body .filter-box {
        padding: 0 !important;
    }

    body.dcat-admin-body .filter-box .card-body {
        padding: 12px !important;
    }

    body.dcat-admin-body .filter-box .filter-input {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body.dcat-admin-body .filter-box form .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.dcat-admin-body .filter-box .input-group {
        flex-wrap: nowrap;
    }

    body.dcat-admin-body .filter-box .input-group > .input-group-prepend .input-group-text,
    body.dcat-admin-body .filter-box .input-group > .input-group-append .input-group-text {
        max-width: 42vw;
        white-space: normal;
        text-align: left;
        line-height: 1.2;
    }

    body.dcat-admin-body .filter-box .input-group > .form-control,
    body.dcat-admin-body .filter-box .input-group > .select2-container {
        min-width: 0;
    }

    /* 分页：居中、能换行；每页条数选择器在 sm 以下本来是隐藏的，放出来 */
    body.dcat-admin-body .content-body .box-footer {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 8px !important;
    }

    body.dcat-admin-body .content-body .box-footer > * {
        float: none !important;
        margin: 0 !important;
    }

    body.dcat-admin-body .content-body .box-footer .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
        max-width: 100%;
    }

    body.dcat-admin-body .content-body .box-footer .per-pages-selector {
        display: inline-block !important;
    }

    /* 行内"⋮"下拉：按钮做大一点，好点 */
    body.dcat-admin-body .grid-dropdown-actions > a.dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
    }

    /* =======================================================================
       4. dcat 表单页（新增/编辑）与详情页（Show）
       ======================================================================= */
    body.dcat-admin-body .form-horizontal .form-group > .control-label,
    body.dcat-admin-body .form-horizontal .form-group > label[class*="col-"],
    body.dcat-admin-body .form-horizontal .show-field > .control-label,
    body.dcat-admin-body .content-body .form-field > label {
        text-align: left !important;
        padding-top: 0;
        margin-bottom: 4px;
        justify-content: flex-start !important;
    }

    body.dcat-admin-body .form-horizontal .form-group > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.dcat-admin-body .form-horizontal .form-group > .col-md-2:empty,
    body.dcat-admin-body .form-horizontal .form-group > .col-sm-2:empty {
        display: none;
    }

    /* 日期、金额这类带前后缀的输入框别被撑出屏幕 */
    body.dcat-admin-body .content-body .input-group {
        flex-wrap: nowrap;
        max-width: 100%;
    }

    body.dcat-admin-body .content-body .input-group > .form-control {
        min-width: 0;
    }

    body.dcat-admin-body .content-body .select2-container {
        max-width: 100% !important;
    }

    /* 表单底部 提交/重置/继续编辑 */
    body.dcat-admin-body .content-body .box-footer .btn-group,
    body.dcat-admin-body .content-body .form-footer .btn-group {
        float: none !important;
    }

    body.dcat-admin-body .content-body .box-footer .col-md-2:empty,
    body.dcat-admin-body .content-body .box-footer > .col-md-2 {
        display: none;
    }

    body.dcat-admin-body .content-body .box-footer > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 0;
    }

    body.dcat-admin-body .content-body .box-footer .pull-right,
    body.dcat-admin-body .content-body .box-footer .pull-left,
    body.dcat-admin-body .content-body .box-footer .float-right,
    body.dcat-admin-body .content-body .box-footer .float-left {
        float: none !important;
        margin: 0 !important;
    }

    /* 表单里的一对多子表格（hasMany / table 字段） */
    body.dcat-admin-body .content-body .has-many-table,
    body.dcat-admin-body .content-body .table-has-many {
        display: block;
        overflow-x: auto;
    }

    /* 详情页：字段名在上、值在下 */
    body.dcat-admin-body .content-body .show-field,
    body.dcat-admin-body .content-body .show-value {
        overflow-wrap: anywhere;
    }

    body.dcat-admin-body .content-body .box-body .form-group > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 详情页右上角 列表/编辑/删除 */
    body.dcat-admin-body .content-body .box-header .box-tools,
    body.dcat-admin-body .content-body .card-header .box-tools {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 !important;
    }

    /* 树形页（菜单管理、权限管理）：右侧"编辑/删除/隐藏"浮在文字后面，
       链接一折行就压在第二行字上。窄屏下让它们单独占一行、靠右。 */
    body.dcat-admin-body .content-body .dd-handle {
        height: auto !important;
        min-height: 38px;
        overflow-wrap: anywhere;
    }

    body.dcat-admin-body .content-body .dd-handle > .pull-right,
    body.dcat-admin-body .content-body .dd-handle > .float-right {
        float: none !important;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 4px;
    }

    body.dcat-admin-body .content-body .dd-handle > .pull-right a,
    body.dcat-admin-body .content-body .dd-handle > .float-right a {
        padding: 4px 2px;
    }

    /* =======================================================================
       5. 通用：图片、代码块、弹窗、Tab
       ======================================================================= */
    body.dcat-admin-body .content-body img {
        max-width: 100%;
        height: auto;
    }

    body.dcat-admin-body .content-body table img {
        max-width: none;
    }

    body.dcat-admin-body .content-body pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre;
    }

    body.dcat-admin-body .content-body .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body.dcat-admin-body .content-body .nav-tabs > .nav-item {
        flex: 0 0 auto;
    }

    body.dcat-admin-body .content-body .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Bootstrap 弹窗：两边留 8px，大弹窗不再按桌面宽度 */
    body.dcat-admin-body .modal-dialog {
        margin: 8px auto;
        max-width: calc(100vw - 16px) !important;
        width: auto !important;
    }

    body.dcat-admin-body .modal-body {
        overflow-x: auto;
    }

    body.dcat-admin-body .modal-footer {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.dcat-admin-body .modal-footer > * {
        margin: 0 !important;
    }

    /* layer 弹窗（dcat 的弹窗表单、确认框）：桌面按 px 写死宽高，手机上溢出屏幕 */
    body.dcat-admin-body .layui-layer.layui-layer-page,
    body.dcat-admin-body .layui-layer.layui-layer-iframe {
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    body.dcat-admin-body .layui-layer.layui-layer-page .layui-layer-content,
    body.dcat-admin-body .layui-layer.layui-layer-iframe iframe {
        width: 100% !important;
        overflow-x: auto;
    }

    body.dcat-admin-body .layui-layer.layui-layer-dialog {
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px;
        min-width: 0 !important;
    }

    body.dcat-admin-body .layui-layer .layui-layer-btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    body.dcat-admin-body .layui-layer .layui-layer-btn a {
        margin: 0 !important;
    }

    /* SweetAlert 确认框 */
    body.dcat-admin-body .swal2-popup {
        width: calc(100vw - 24px) !important;
        max-width: 480px;
        padding: 1.25em 1em !important;
    }

    /* 仪表盘小卡片：三个数字一行放不下时换行（dcat 自带的 justify-content-between 一行） */
    body.dcat-admin-body .content-body .card-body .d-flex.justify-content-between,
    body.dcat-admin-body .content-body .card-body .justify-content-between {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* 顶栏：☰ 做成醒目的按钮；用户名在小屏本来就藏了，只留头像 */
    body.dcat-admin-body .header-navbar .navbar-container {
        padding-left: 6px !important;
        padding-right: 10px !important;
    }

    body.dcat-admin-body .header-navbar .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border-radius: 10px;
        color: #152b3e !important;
    }

    body.dcat-admin-body .header-navbar .menu-toggle i {
        font-size: 20px;
    }

    body.dcat-admin-body .header-navbar .menu-toggle:active {
        background: #eaf3ff;
    }

    /* =======================================================================
       6. 自定义页面（V6 原型、财务/合规工作台等手写页面）的通用收口
       ======================================================================= */

    /* 页面大标题别占半屏 */
    body.dcat-admin-body .content-body h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    body.dcat-admin-body .content-body h2 {
        overflow-wrap: anywhere;
    }

    /* 长单号、邮箱、钱包地址之类没有空格的串，别把卡片撑破 */
    body.dcat-admin-body .content-body code,
    body.dcat-admin-body .content-body .text-break {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    /* 写死宽度的输入框、文件选择框（银行流水对账页的"Choose File"）别伸出卡片 */
    body.dcat-admin-body .content-body input:not([type="checkbox"]):not([type="radio"]),
    body.dcat-admin-body .content-body select,
    body.dcat-admin-body .content-body textarea {
        max-width: 100%;
    }

    body.dcat-admin-body .content-body input[type="file"] {
        width: 100%;
        min-width: 0;
    }

    /* 表单控件在手机上至少 16px 字号：小于 16px 时 iOS Safari 一点输入框就整页放大，
       放大后还不会自动缩回来，后台页面会被"卡"在放大状态。 */
    body.dcat-admin-body .content-body input:not([type="checkbox"]):not([type="radio"]),
    body.dcat-admin-body .content-body select,
    body.dcat-admin-body .content-body textarea,
    body.dcat-admin-body .modal input:not([type="checkbox"]):not([type="radio"]),
    body.dcat-admin-body .modal select,
    body.dcat-admin-body .modal textarea {
        font-size: 16px !important;
    }

    /* =======================================================================
       7. 统计卡片：两列
       各页面自己在 ≤900px 把统计卡片退成一列，手机上一张卡占满一行、高 90–140px，
       四张卡就是半屏多，真正要看的列表被推到第二屏以后。两列刚好放得下"标签 + 数字"。
       名单来自 2026-09-18 逐页巡检（一列排开、每张卡片内容很短的网格）。
       ======================================================================= */
    body.dcat-admin-body .content-body .todo-card-grid,
    body.dcat-admin-body .content-body .fx-dashboard-stats,
    body.dcat-admin-body .content-body .supp-grid-4,
    body.dcat-admin-body .content-body .gx-kpis,
    body.dcat-admin-body .content-body .visa-metrics,
    body.dcat-admin-body .content-body .customer-overview-card-grid,
    body.dcat-admin-body .content-body .finance-queue-grid,
    body.dcat-admin-body .content-body .compliance-kpi-grid,
    body.dcat-admin-body .content-body .fund-balance-card-grid,
    body.dcat-admin-body .content-body .gx .gx-grid.cols-4,
    body.dcat-admin-body .content-body .counterparty-bank-account-summary-grid,
    /* 订单详情顶部「统一状态」六格、「逐单 P&L」七格（写在行内样式里，只能按内容匹配） */
    body.dcat-admin-body .content-body .wf-status-header > div[style*="minmax(140px"],
    body.dcat-admin-body .content-body .wf-order-pnl > div[style*="minmax(150px"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* 待办卡片：图标 + 文字 + 大数字横排，半宽里放不下，改成数字在下 */
    body.dcat-admin-body .content-body .todo-card {
        flex-wrap: wrap;
        min-height: 0;
        padding: 12px;
        gap: 6px 10px;
    }

    body.dcat-admin-body .content-body .todo-card-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    body.dcat-admin-body .content-body .todo-toolbar > .todo-input {
        flex: 1 1 100%;
        min-width: 0;
    }

    body.dcat-admin-body .content-body .todo-card-count {
        margin-left: 0;
        flex-basis: 100%;
        font-size: 26px;
    }

    /* V6 KPI 卡片在半宽里收一号 */
    body.dcat-admin-body .content-body .gx .gx-kpi {
        padding: 12px !important;
    }

    body.dcat-admin-body .content-body .gx .gx-kpi-value {
        font-size: 26px !important;
    }

    /* =======================================================================
       8. 个别页面
       ======================================================================= */

    /* 详情页里的关联表（show-relation-container）、脚手架页的表单行：
       嵌套 .row 的负边距伸出屏幕左边 4–6px */
    body.dcat-admin-body .content-body .row.show-relation-container,
    body.dcat-admin-body .content-body #scaffold .form-group.row {
        margin-left: 0;
        margin-right: 0;
    }

    /* 客户详情（旧版 /admin/customer/{id}、/admin/all-customer/{id}）顶部：
       名字区在桌面是 flex:0 0 440px（宽 440）；窄屏下外层变竖排，这个 440 变成了高度，
       名字下面空出 400 多像素的白。四个状态格原来一行排四个，按钮一列竖排 114px 宽。 */
    body.dcat-admin-body .content-body .customer-hero {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px !important;
    }

    body.dcat-admin-body .content-body .customer-hero-main {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }

    body.dcat-admin-body .content-body .customer-hero-side {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.dcat-admin-body .content-body .customer-hero-summary {
        max-width: none !important;
        padding: 12px !important;
    }

    body.dcat-admin-body .content-body .customer-hero-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px !important;
    }

    body.dcat-admin-body .content-body .customer-hero-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    body.dcat-admin-body .content-body .customer-hero-actions > * {
        flex: 1 1 auto;
        width: auto !important;
    }

    /* 旧版人工换汇 新建 / 继续录单页（otc-exchange-orders/create、{单号}/edit）底部的吸底操作条：
       页面自己在 ≤991px 把它改成竖排——标题一行、状态+客户一行、两个按钮各占一行，
       手机上高 200px，录单时一直盖住四分之一屏幕（用户 2026-09-20 提）。
       收成两行：上面一行只留状态和客户名（「人工 FX 订单」页标题里已经有），下面两个按钮并排。 */
    body.dcat-admin-body .content-body .fx-footer-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        bottom: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        margin: 0 -6px;
        box-shadow: 0 -6px 18px rgba(15, 23, 42, .08) !important;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-meta {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-width: 0;
        font-size: 12px;
        line-height: 1.3;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-meta > span:first-child {
        display: none;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-meta > .fx-pill {
        flex: 0 0 auto;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    body.dcat-admin-body .content-body .fx-footer-bar #fx-footer-customer {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-actions {
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 8px !important;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-actions > .btn {
        min-height: 42px;
        margin: 0 !important;
        padding: 6px 10px;
        line-height: 1.2;
        white-space: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-actions > .fx-light-btn {
        flex: 0 1 40%;
        font-size: 12px;
    }

    body.dcat-admin-body .content-body .fx-footer-bar .fx-footer-actions > .fx-primary-btn {
        flex: 1 1 60%;
        font-size: 14px;
    }

    /* 同一页的页标题 28px、中英两行，手机上占掉半屏的第一眼 */
    body.dcat-admin-body .content-body .fx-create-page .fx-create-title {
        font-size: 20px;
    }

    /* 同一页的资料表（info-table）：页面自己在 ≤992px 把 tr/td 改成 display:block 竖排，
       但 table/tbody 还是表格，固定布局下每行只分到第一列那 81px，四个字一行。 */
    body.dcat-admin-body .content-body .gex-customer-detail .info-table,
    body.dcat-admin-body .content-body .gex-customer-detail .info-table > tbody,
    body.dcat-admin-body .content-body .gex-customer-detail .info-table > thead {
        display: block;
        width: 100% !important;
    }

    body.dcat-admin-body .content-body .gex-customer-detail .info-table > colgroup {
        display: none;
    }

    /* =======================================================================
       9. 筛选区默认收起（gex-mobile.js 的 collapseFilters，用户 2026-09-19 提）
       ======================================================================= */
    body.dcat-admin-body .content-body form.gxm-filter-collapsed {
        display: none !important;
    }

    body.dcat-admin-body .content-body .gxm-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        margin: 0 0 10px;
        padding: 10px 14px;
        border: 1px solid #d6e1ec;
        border-radius: 10px;
        background: #fff;
        color: #152b3e;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.dcat-admin-body .content-body .gxm-filter-toggle[aria-expanded="true"] {
        margin-bottom: 12px;
        background: #f4f8fc;
    }

    body.dcat-admin-body .content-body .gxm-filter-toggle .gxm-filter-label {
        flex: 1 1 auto;
    }

    body.dcat-admin-body .content-body .gxm-filter-toggle .gxm-filter-count {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 11px;
        background: #2379e7;
        color: #fff;
        font-size: 12px;
        line-height: 22px;
        text-align: center;
    }

    body.dcat-admin-body .content-body .gxm-filter-toggle .gxm-filter-caret {
        transition: transform .15s ease;
    }

    body.dcat-admin-body .content-body .gxm-filter-toggle[aria-expanded="true"] .gxm-filter-caret {
        transform: rotate(180deg);
    }
}

/* ===========================================================================
   D. 手机竖屏（≤767.98px）：列表表格卡片化（用户 2026-09-20 提）
   gex-mobile.js 给符合条件的表格打 data-gxm-card="1"，卡片模式时再加 .gxm-cards；
   每个格子带 data-gxm-label（表头文字），内容包在 .gxm-v 里。
   =========================================================================== */
@media (max-width: 767.98px) {

    /* 「卡片 / 表格」切换 */
    body.dcat-admin-body .content-body .gxm-view-toggle {
        display: inline-flex;
        gap: 0;
        margin: 4px 0 10px;
        padding: 3px;
        border: 1px solid #d6e1ec;
        border-radius: 10px;
        background: #f4f8fc;
    }

    body.dcat-admin-body .content-body .gxm-view-toggle button {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        padding: 4px 14px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #5b6f82;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.dcat-admin-body .content-body .gxm-view-toggle button[aria-pressed="true"] {
        background: #fff;
        color: #1769d2;
        box-shadow: 0 1px 3px rgba(21, 43, 62, .12);
    }

    /* 表格模式下 .gxm-v 等于不存在 */
    body.dcat-admin-body .content-body table:not(.gxm-cards) .gxm-v {
        display: contents;
    }

    /* 卡片模式：table / tbody / tr / td 全部变块 */
    body.dcat-admin-body .content-body table.gxm-cards,
    body.dcat-admin-body .content-body table.gxm-cards > tbody,
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
    }

    body.dcat-admin-body .content-body table.gxm-cards {
        table-layout: auto !important;
        border: 0 !important;
        background: transparent !important;
        margin: 0 !important;
    }

    body.dcat-admin-body .content-body table.gxm-cards > thead,
    body.dcat-admin-body .content-body table.gxm-cards > colgroup,
    body.dcat-admin-body .content-body table.gxm-cards > tfoot {
        display: none !important;
    }

    /* 卡片模式下不需要左右滑 */
    body.dcat-admin-body .content-body .table-responsive:has(> table.gxm-cards),
    body.dcat-admin-body .content-body .gxm-scroll:has(> table.gxm-cards),
    body.dcat-admin-body .content-body .gx-table-wrap:has(> table.gxm-cards) {
        overflow-x: visible !important;
    }

    /* 一行 = 一张卡片。用竖向 flex，好把标题格挪到最上面（序号/ID 列在它前面时） */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr {
        display: flex !important;
        flex-direction: column;
        position: relative;
        margin: 0 0 10px !important;
        padding: 6px 12px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 10px;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(21, 43, 62, .05);
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr:hover {
        background: #fff !important;
    }

    /* 一格 = 一行「字段名 | 值」 */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td {
        display: grid !important;
        grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        padding: 7px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f6 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left !important;
        font-size: 14px;
        line-height: 1.45;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td::before {
        content: attr(data-gxm-label);
        grid-column: 1;
        color: #7c8c9c;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        padding-top: 1px;
        overflow-wrap: anywhere;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td > .gxm-v {
        grid-column: 2;
        display: block;
        min-width: 0;
    }

    /* 值为空时给个 — ，免得看着像漏了 */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td > .gxm-v:empty::after {
        content: "—";
        color: #b5c0cb;
    }

    /* 第一列当卡片标题：不要字段名，整行加粗 */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-title {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 9px !important;
        padding-right: 32px !important;
        font-size: 15px;
        font-weight: 700;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-title::before {
        display: none;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-title {
        order: -1;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-title > .gxm-v {
        grid-column: 1;
    }

    /* 勾选框：卡片右上角 */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-check {
        position: absolute !important;
        top: 8px;
        right: 8px;
        padding: 4px !important;
        border: 0 !important;
        display: block !important;
        z-index: 1;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-check::before {
        display: none;
    }

    /* 标题在最上面、勾选框在右上角，标题右边让开（.gxm-card-title 已有 32px，这里再补一点给勾选框） */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-check ~ td.gxm-card-title {
        padding-right: 40px !important;
    }

    /* 操作列：卡片底部靠右，不要字段名 */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-actions {
        display: flex !important;
        justify-content: flex-end;
        padding: 8px 0 4px !important;
        border-bottom: 0 !important;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-actions::before {
        display: none;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr > td.gxm-card-actions > .gxm-v {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    /* 空列表那一行 */
    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr.gxm-card-empty {
        border-style: dashed !important;
        box-shadow: none;
        text-align: center;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr.gxm-card-empty > td {
        display: block !important;
        text-align: center !important;
        border: 0 !important;
    }

    body.dcat-admin-body .content-body table.gxm-cards > tbody > tr.gxm-card-empty > td::before {
        display: none;
    }
}