/* ============================================================
   YiSha Admin Web - H5 Mobile Layout Styles
   主框架布局适配：侧边栏、顶部导航、内容区
   ============================================================ */

/* ---------- 主框架布局 ---------- */
@media (max-width: 768px) {
    /* 主容器 */
    #wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /* 侧边栏抽屉 */
    .navbar-static-side,
    .navbar-default.navbar-static-side {
        position: fixed !important;
        left: -260px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 1050 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #2f4050 !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
        transform: translateZ(0); /* 硬件加速 */
    }

    /* 侧边栏打开状态 */
    body.drawer-open .navbar-static-side,
    body.drawer-open .navbar-default.navbar-static-side {
        left: 0 !important;
    }

    /* 修复侧边栏滚动问题 */
    .navbar-static-side .slimScrollDiv {
        overflow: visible !important;
        height: auto !important;
    }

    .navbar-static-side .sidebar-collapse {
        overflow: visible !important;
        height: auto !important;
    }

    /* 侧边栏菜单 */
    .navbar-static-side #side-menu {
        padding-bottom: 20px;
    }

    /* 侧边栏用户信息区域 */
    .navbar-static-side .nav-header {
        padding: 0 15px;
        height: 50px;
        min-height: 50px;
        display: flex;
        align-items: center;
    }

    .navbar-static-side .nav-header .profile-element {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .navbar-static-side .nav-header .image-left {
        flex-shrink: 0;
        line-height: 0;
    }

    .navbar-static-side .nav-header .image-left img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: block;
        margin: 0;
        padding: 0;
    }

    .navbar-static-side .nav-header .image-right {
        flex: 1;
        min-width: 0;
        line-height: 1;
        text-align: right;
        padding-right: 10px;
    }

    .navbar-static-side .nav-header .image-right .block {
        display: block;
        color: #ffffff;
        font-size: 14px;
        line-height: 1.5;
        margin: 0 !important;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-static-side .nav-header .image-right .text-xs {
        font-size: 12px;
        color: #ffffff;
        line-height: 1.5;
        margin: 0 !important;
        padding: 0;
    }

    /* 移动端强制显示菜单文字和图标（覆盖 PC 端 mini-navbar 的隐藏样式） */
    body.mini-navbar .navbar-static-side .nav-label,
    body.mini-navbar .navbar-static-side .navbar-default .nav li a span {
        display: block !important;
    }

    /* 覆盖 Bootstrap 默认的链接 focus 样式，防止点击菜单时出现下划线 */
    .navbar-static-side #side-menu > li > a:hover,
    .navbar-static-side #side-menu > li > a:focus,
    .navbar-static-side #side-menu > li > a:active {
        text-decoration: none;
        color: #a7b1c2;
    }

    .navbar-static-side #side-menu > li.active > a:hover,
    .navbar-static-side #side-menu > li.active > a:focus,
    .navbar-static-side #side-menu > li.active > a:active {
        text-decoration: none;
        color: #ffffff;
    }

    .navbar-static-side #side-menu > li > a {
        padding: 14px 10px !important;
        font-size: 15px !important;
        color: #a7b1c2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        text-decoration: none !important;
        border: none !important;
        border-bottom: none !important;
    }

    .navbar-static-side #side-menu > li {
        border: none !important;
        border-bottom: none !important;
    }

    .navbar-static-side #side-menu > li > a > i:first-child {
        margin-right: 10px;
    }

    /* 移除 PC 端 mini-navbar hover 时的虚线下边框 */
    .fixed-sidebar.mini-navbar .navbar-static-side .nav li:hover > a > span.nav-label,
    body.mini-navbar .navbar-static-side .nav li:hover > a > span.nav-label,
    .navbar-static-side .nav li:hover > a > span.nav-label,
    .navbar-static-side .nav li.active > a > span.nav-label {
        border-bottom: none !important;
    }

    .navbar-static-side #side-menu > li > a .nav-label {
        flex: 1;
        text-align: left;
        text-decoration: none !important;
    }

    /* 强制移除所有子元素的下划线 */
    .navbar-static-side #side-menu > li > a,
    .navbar-static-side #side-menu > li > a:hover,
    .navbar-static-side #side-menu > li > a:focus,
    .navbar-static-side #side-menu > li > a:active,
    .navbar-static-side #side-menu > li > a *,
    .navbar-static-side #side-menu > li > a > span,
    .navbar-static-side #side-menu > li > a > .nav-label {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        -webkit-text-decoration: none !important;
    }

    /* 箭头图标靠右，由 metisMenu 控制旋转 */
    .navbar-static-side #side-menu > li > a .fa.arrow {
        margin-left: auto;
    }

    /* 激活状态的一级菜单 */
    .navbar-static-side #side-menu > li.active {
        border: none !important;
        border-left: none !important;
        border-bottom: none !important;
        background: #293846 !important;
    }

    .navbar-static-side #side-menu > li > a:hover,
    .navbar-static-side #side-menu > li.active > a {
        background: #293846 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        text-decoration: none !important;
        padding: 14px 10px !important;
        border: none !important;
        border-bottom: none !important;
    }

    /* 确保激活状态下图标和文字布局不变 */
    .navbar-static-side #side-menu > li.active > a > i:first-child,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a > i:first-child {
        margin-right: 10px !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-align: left !important;
    }

    .navbar-static-side #side-menu > li.active > a .nav-label,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a .nav-label {
        flex: 1 !important;
        text-align: left !important;
        display: block !important;
        text-decoration: none !important;
    }

    /* 强制移除激活状态下所有子元素的下划线 */
    .navbar-static-side #side-menu > li.active > a,
    .navbar-static-side #side-menu > li.active > a:hover,
    .navbar-static-side #side-menu > li.active > a:focus,
    .navbar-static-side #side-menu > li.active > a:active,
    .navbar-static-side #side-menu > li.active > a *,
    .navbar-static-side #side-menu > li.active > a > span,
    .navbar-static-side #side-menu > li.active > a > .nav-label,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a:hover,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a:focus,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a:active,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a *,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a > span,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a > .nav-label {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        -webkit-text-decoration: none !important;
    }

    .navbar-static-side #side-menu > li.active > a .fa.arrow,
    body.mini-navbar .navbar-static-side #side-menu > li.active > a .fa.arrow {
        margin-left: auto !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 子菜单静态展开 */
    .navbar-static-side #side-menu .nav-second-level,
    .navbar-static-side #side-menu .nav-third-level {
        position: static !important;
        width: 100% !important;
        background: #293846 !important;
        border: none !important;
        box-shadow: none !important;
        display: none; /* 默认隐藏 */
    }

    /* 展开状态的子菜单 */
    .navbar-static-side #side-menu > li.active > .nav-second-level {
        display: block !important;
    }

    .navbar-static-side #side-menu .nav-second-level > li.active > .nav-third-level {
        display: block !important;
    }

    .navbar-static-side #side-menu .nav-second-level li a,
    .navbar-static-side #side-menu .nav-third-level li a {
        padding: 10px 10px 10px 40px;
        font-size: 14px;
        color: #a7b1c2;
    }

    .navbar-static-side #side-menu .nav-third-level li a {
        padding-left: 50px;
    }

    /* 遮罩层 */
    .mobile-drawer-mask {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        transition: opacity 0.3s ease;
    }

    body.drawer-open .mobile-drawer-mask {
        display: block;
    }

    /* 主内容区 */
    #page-wrapper {
        margin: 0 !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: var(--mobile-bg);
    }

    /* 顶部导航栏 */
    .navbar-static-top {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        height: var(--mobile-header-height);
        margin: 0 !important;
        border: none !important;
        background: #3c8dbc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }

    /* 汉堡菜单按钮 - 靠左 */
    .navbar-static-top .navbar-minimalize {
        color: #ffffff;
        font-size: 20px;
        padding: 0 15px;
        margin: 0;
        background: transparent;
        border: none;
        height: var(--mobile-header-height);
        display: flex;
        align-items: center;
        justify-content: center;
        order: -1; /* 确保在最左边 */
    }

    /* 顶部导航右侧 - 靠右 */
    .navbar-static-top .navbar-top-links {
        margin: 0;
        margin-left: auto; /* 推到最右边 */
        height: var(--mobile-header-height);
        display: flex;
        align-items: center;
        gap: 0;
    }

    .navbar-static-top .navbar-top-links > li {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
    }

    .navbar-static-top .navbar-top-links > li > a {
        color: #ffffff;
        padding: 0 15px !important; /* 覆盖原始的 padding: 15px 10px */
        height: 100% !important;
        min-height: 0 !important; /* 覆盖原始的 min-height: 50px */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px; /* 头像和文字之间的间距 */
        line-height: 1 !important; /* 重置行高 */
    }

    /* 用户头像 */
    .navbar-static-top .user-image {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        margin: 0 !important; /* 移除所有margin */
        padding: 0 !important; /* 移除所有padding */
        display: block !important;
        flex-shrink: 0;
        vertical-align: middle !important; /* 确保垂直居中 */
    }

    /* 用户名文字 */
    .navbar-static-top .hidden-xs {
        line-height: 1 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 用户下拉菜单 */
    .navbar-static-top .dropdown-menu {
        position: absolute;
        right: 0;
        top: 100%;
        min-width: 160px;
        margin-top: 2px;
        border-radius: 0 0 var(--mobile-radius) var(--mobile-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .navbar-static-top .dropdown-menu > li > a {
        padding: 12px 16px;
        font-size: 14px;
        min-height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
    }

    /* 标签页区域（移动端隐藏） */
    .content-tabs {
        display: none !important;
    }

    /* 内容主区域 */
    #content-main {
        flex: 1 1 auto;
        margin-top: var(--mobile-header-height);
        padding: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #content-main .YiSha_iframe {
        width: 100%;
        height: calc(100vh - var(--mobile-header-height));
        border: none;
    }
}

/* ---------- 列表页容器 ---------- */
@media (max-width: 768px) {
    .container-div {
        padding: var(--mobile-spacing-md);
    }

    .gray-bg {
        background: var(--mobile-bg) !important;
    }
}

/* ---------- 搜索区域 ---------- */
@media (max-width: 768px) {
    .search-collapse {
        margin-bottom: var(--mobile-spacing-md);
    }

    /* 搜索按钮容器 - 始终显示，在搜索输入框下方 */
    .mobile-search-buttons {
        display: flex !important;
        gap: 8px !important;
        margin-top: var(--mobile-spacing-sm) !important;
    }

    .mobile-search-buttons .btn {
        flex: 1 !important;
        min-height: var(--mobile-touch-target) !important;
        font-size: 16px !important;
        padding: 10px 16px !important;
    }

    /* 搜索折叠按钮 - 在按钮容器中 */
    .mobile-search-toggle {
        flex: 1 !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: var(--mobile-touch-target);
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--mobile-card-bg);
        border: 1px solid var(--mobile-border);
        border-radius: var(--mobile-radius-sm);
        color: var(--mobile-text);
        cursor: pointer;
    }

    .mobile-search-toggle:active {
        background: var(--mobile-bg);
    }

    .mobile-search-toggle i {
        font-size: 16px;
    }

    /* 搜索输入框折叠状态 - 使用!important覆盖yisha.min.css中的样式 */
    #searchDiv .select-list.mobile-search-collapsed {
        display: none !important;
    }

    /* 搜索表单 */
    .search-collapse .select-list {
        background: var(--mobile-card-bg);
        border-radius: var(--mobile-radius);
        padding: var(--mobile-spacing-md);
        box-shadow: var(--mobile-shadow);
    }

    .search-collapse.collapsed .select-list {
        display: none;
    }

    .search-collapse .select-list ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--mobile-spacing-md) !important;
    }

    .search-collapse .select-list ul li {
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important;
    }

    .search-collapse .select-list ul li:last-child {
        margin-bottom: 0;
    }

    /* 搜索表单标签 */
    .search-collapse .select-list ul li label {
        font-size: 14px;
        font-weight: 600;
        color: var(--mobile-text);
        margin-bottom: 6px;
        display: block;
    }

    /* 搜索表单输入框 */
    .search-collapse .select-list ul li input,
    .search-collapse .select-list ul li select {
        width: 100%;
        min-height: var(--mobile-touch-target);
        font-size: 16px;
        padding: 10px 12px;
        border: 1px solid var(--mobile-border);
        border-radius: var(--mobile-radius-sm);
    }

    /* 搜索按钮 */
    .search-collapse .select-list ul li .btn {
        width: 100%;
        margin-top: var(--mobile-spacing-sm);
    }

    /* ===== 统一搜索区域适配（支持 .form-group.vertical-align-top 结构） ===== */

    /* 搜索区域容器 */
    #searchDiv.search-collapse {
        width: 100% !important;
    }

    /* 搜索表单容器 - 强制垂直布局 */
    .search-collapse .select-list.form-inline {
        display: block !important;
        width: 100% !important;
    }

    /* 表单组 - 水平排列（label 和输入框同行） */
    .search-collapse .select-list .form-group.vertical-align-top {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: var(--mobile-spacing-md) !important;
        margin-right: 0 !important;
        vertical-align: top !important;
    }

    .search-collapse .select-list .form-group.vertical-align-top:last-child {
        margin-bottom: 0 !important;
    }

    /* 表单标签 - 与输入框同行显示 */
    .search-collapse .select-list .form-group.vertical-align-top label {
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: 120px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--mobile-text) !important;
        margin-bottom: 0 !important;
        margin-right: 8px !important;
        text-align: left !important;
        padding: 0 !important;
        float: none !important;
    }

    /* 输入框和下拉框 - 占据剩余空间 */
    .search-collapse .select-list .form-group.vertical-align-top input,
    .search-collapse .select-list .form-group.vertical-align-top select,
    .search-collapse .select-list .form-group.vertical-align-top .input-group {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: var(--mobile-touch-target) !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--mobile-border) !important;
        border-radius: var(--mobile-radius-sm) !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* 下拉框特殊处理 */
    .search-collapse .select-list .form-group.vertical-align-top select {
        appearance: auto !important;
        -webkit-appearance: menulist !important;
        background-color: #fff !important;
    }

    /* bootstrap-select 下拉框适配 */
    .search-collapse .select-list .form-group.vertical-align-top .bootstrap-select {
        width: 100% !important;
    }

    .search-collapse .select-list .form-group.vertical-align-top .bootstrap-select .btn {
        width: 100% !important;
        min-height: var(--mobile-touch-target) !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    /* 日期选择器适配 */
    .search-collapse .select-list .form-group.vertical-align-top .layer-date,
    .search-collapse .select-list .form-group.vertical-align-top .laydate-input {
        width: 100% !important;
        min-height: var(--mobile-touch-target) !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    /* 搜索按钮 - 全宽显示 */
    .search-collapse .select-list .form-group.vertical-align-top .btn {
        width: 100% !important;
        min-height: var(--mobile-touch-target) !important;
        font-size: 16px !important;
        padding: 10px 16px !important;
    }

    /* 处理没有 ul 包裹的表单组 - 水平排列 */
    .search-collapse .select-list > .form-group.vertical-align-top {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: var(--mobile-spacing-md) !important;
    }

    .search-collapse .select-list > .form-group.vertical-align-top:last-child {
        margin-bottom: 0 !important;
    }

    .search-collapse .select-list > .form-group.vertical-align-top label {
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: 120px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        margin-right: 8px !important;
    }

    .search-collapse .select-list > .form-group.vertical-align-top input,
    .search-collapse .select-list > .form-group.vertical-align-top select {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: var(--mobile-touch-target) !important;
        font-size: 16px !important;
    }

    /* 处理内联样式的情况 */
    .search-collapse .select-list.p-sm {
        padding: var(--mobile-spacing-md) !important;
    }

    /* 搜索按钮组容器 - 水平排列 */
    .search-collapse .select-list .form-group.vertical-align-top:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .search-collapse .select-list .form-group.vertical-align-top:last-child label {
        display: none !important;
    }

    .search-collapse .select-list .form-group.vertical-align-top:last-child .btn {
        flex: 1 !important;
        min-width: 80px !important;
        margin-top: 0 !important;
    }
}

/* ---------- 工具栏 ---------- */
@media (max-width: 768px) {
    .btn-group-sm,
    #toolbar {
        display: flex !important;
        flex-wrap: wrap;
        gap: var(--mobile-spacing-sm);
        margin-bottom: var(--mobile-spacing-md);
    }

    .btn-group-sm .btn,
    #toolbar .btn {
        flex: 1;
        min-width: 0;
        min-height: var(--mobile-touch-target);
        padding: 10px 12px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
    }

    /* 按钮图标 */
    .btn-group-sm .btn i,
    #toolbar .btn i {
        font-size: 16px;
    }

    /* 隐藏部分按钮文字，只显示图标 */
    .btn-group-sm .btn .btn-text,
    #toolbar .btn .btn-text {
        display: none;
    }

    /* 更多操作下拉菜单 */
    .mobile-more-actions {
        position: relative;
    }

    .mobile-more-actions .dropdown-menu {
        position: absolute;
        right: 0;
        top: 100%;
        min-width: 120px;
        margin-top: 4px;
        background: var(--mobile-card-bg);
        border: 1px solid var(--mobile-border);
        border-radius: var(--mobile-radius);
        box-shadow: var(--mobile-shadow-lg);
        z-index: 1000;
    }

    .mobile-more-actions .dropdown-menu > li > a {
        padding: 12px 16px;
        font-size: 14px;
        color: var(--mobile-text);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-more-actions .dropdown-menu > li > a:hover {
        background: var(--mobile-bg);
    }
}

/* ---------- 表格容器 ---------- */
@media (max-width: 768px) {
    .select-table {
        margin-bottom: var(--mobile-spacing-md);
    }

    /* Bootstrap Table 容器 */
    .fixed-table-container {
        border: none !important;
        border-radius: var(--mobile-radius);
        overflow: hidden;
    }

    /* 表格工具栏 */
    .fixed-table-toolbar {
        background: var(--mobile-card-bg);
        padding: var(--mobile-spacing-sm);
        border-bottom: 1px solid var(--mobile-border);
    }

    /* 表格分页 */
    .fixed-table-pagination {
        background: var(--mobile-card-bg);
        padding: var(--mobile-spacing-md);
        border-top: 1px solid var(--mobile-border);
    }

    .fixed-table-pagination .pagination {
        margin: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .fixed-table-pagination .pagination > li > a {
        min-width: var(--mobile-touch-target);
        min-height: var(--mobile-touch-target);
        padding: 10px 12px;
        font-size: 14px;
        border-radius: var(--mobile-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 1;
    }

    /* 确保分页按钮可点击 */
    .fixed-table-pagination .pagination > li {
        pointer-events: auto;
    }

    .fixed-table-pagination .pagination > li.disabled > a {
        pointer-events: none;
        opacity: 0.5;
    }

    /* 首页欢迎页面特殊处理 */
    .wrapper-content .ibox {
        margin-bottom: var(--mobile-spacing-md);
    }

    .wrapper-content .ibox-content {
        overflow: visible !important;
        min-height: auto !important;
        height: auto !important;
    }

    .wrapper-content .fixed-table-container {
        overflow-x: auto;
    }

    /* 首页统计卡片响应式 - 两列布局 */
    .wrapper-content > .col-sm-12 > .row > .col-sm-12 > .col-sm-2 {
        width: 50% !important;
        float: left !important;
        padding: 0 5px !important;
        margin-bottom: 10px !important;
    }

    .wrapper-content > .col-sm-12 > .row > .col-sm-12 > .col-sm-2 .ibox {
        margin: 0 !important;
    }

    /* 首页交易地区区域 - 完全重构 */
    .wrapper-content .row .ibox-title h5 {
        font-size: 16px;
        font-weight: 600;
    }

    /* 交易地区容器 */
    .wrapper-content .row .ibox-content > .row {
        margin: 0 !important;
    }

    .wrapper-content .row .ibox-content > .row > .col-sm-12 {
        padding: 0 !important;
        width: 100% !important;
    }

    /* 表格区域 - 100%宽度，垂直排列 - 强制覆盖内联样式 */
    .wrapper-content .row .ibox-content .col-sm-6.table-striped,
    .wrapper-content .ibox-content .row .col-sm-12 .col-sm-6.table-striped {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: var(--mobile-spacing-lg);
    }

    .wrapper-content .row .ibox-content .col-sm-6.table-striped .ibox {
        margin: 0 !important;
        height: auto !important;
    }

    /* 地图区域 - 100%宽度 - 强制覆盖内联样式 */
    .wrapper-content .row .ibox-content .col-sm-6:not(.table-striped),
    .wrapper-content .ibox-content .row .col-sm-12 .col-sm-6:not(.table-striped) {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: var(--mobile-spacing-lg);
    }

    .wrapper-content .row .ibox-content .col-sm-6:not(.table-striped) .ibox {
        margin: 0 !important;
        height: auto !important;
    }

    /* 地图容器 - 强制覆盖内联样式 */
    .wrapper-content #world-map,
    .wrapper-content .ibox-content #world-map {
        width: 100% !important;
        max-width: 100% !important;
        height: 350px !important;
        margin: 0 auto !important;
    }

    /* 首页欢迎页面专用类 */
    .welcome-table-container {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin-bottom: var(--mobile-spacing-lg);
    }

    .welcome-map-container {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: var(--mobile-spacing-lg);
    }

    .welcome-map {
        width: 100% !important;
        min-width: 300px !important;
        height: 350px !important;
        margin: 0 auto !important;
    }
}

/* PC 端保持原样式 */
@media (min-width: 769px) {
    .welcome-table-container {
        height: 530px;
    }

    .welcome-map {
        height: 530px;
        width: 500px;
        margin: auto;
    }
}

    /* Bootstrap Table 在首页的特殊处理 */
    .wrapper-content #gridTable {
        width: 100% !important;
    }

    .wrapper-content .fixed-table-container {
        border: none !important;
    }

    /* 首页交易地区表格 - 简洁卡片式布局（针对Bootstrap Table的card-view模式） */
    @media (max-width: 768px) {
        /* 隐藏工具栏按钮（刷新、切换视图、列选择） */
        .wrapper-content .welcome-table-container .fixed-table-toolbar .columns-right {
            display: none !important;
        }

        /* 卡片容器样式 - 更紧凑 */
        .wrapper-content #gridTable tbody tr {
            margin-bottom: 6px;
        }

        .wrapper-content #gridTable .card-views {
            display: block;
            background: var(--mobile-card-bg);
            border-radius: var(--mobile-radius);
            padding: 8px 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
            position: relative;
            min-height: 45px;
        }

        /* 操作按钮区域 - 支持触摸滑动 */
        /* 最后一个 card-view（通常是操作列）支持横向滑动 */
        .wrapper-content #gridTable .card-views > .card-view:last-child {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* 操作按钮容器 card-view-value 支持滑动 */
        .wrapper-content #gridTable .card-views .card-view:last-child .card-view-value {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            white-space: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch;
            text-align: left !important;
            padding: 4px 0 !important;
            box-sizing: border-box !important;
        }

        /* 操作按钮不换行 */
        .wrapper-content #gridTable .card-view-value .btn {
            flex-shrink: 0;
            white-space: nowrap;
            margin-right: 4px;
        }

        /* 隐藏复选框 */
        .wrapper-content #gridTable .card-views > .card-view:first-child {
            display: none !important;
        }

        /* 隐藏日期字段 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(2) {
            display: none !important;
        }

        /* 省份 - 左上角大字显示 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(3) {
            position: absolute;
            top: 8px;
            left: 10px;
            width: auto;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(3) .card-view-title {
            display: none;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(3) .card-view-value {
            font-size: 15px;
            font-weight: 600;
            color: var(--mobile-text);
        }

        /* 订单数 - 右上角显示 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(9) {
            position: absolute;
            top: 8px;
            right: 10px;
            width: auto;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(9) .card-view-title {
            display: none;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(9) .card-view-value .label {
            font-size: 12px;
            padding: 3px 7px;
        }

        /* 订单总额 - 左下角 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(4) {
            position: absolute;
            bottom: 8px;
            left: 10px;
            width: auto;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(4) .card-view-title {
            font-size: 10px;
            color: var(--mobile-text-secondary);
            margin-right: 3px;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(4) .card-view-value .label {
            font-size: 11px;
            padding: 2px 5px;
        }

        /* 收款总额 - 中下位置 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(5) {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: auto;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(5) .card-view-title {
            font-size: 10px;
            color: var(--mobile-text-secondary);
            margin-right: 3px;
        }

        .wrapper-content #gridTable .card-views > .card-view:nth-child(5) .card-view-value .label {
            font-size: 11px;
            padding: 2px 5px;
        }

        /* 隐藏支付验车师 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(6) {
            display: none !important;
        }

        /* 隐藏订单余额 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(7) {
            display: none !important;
        }

        /* 隐藏订单余额 */
        .wrapper-content #gridTable .card-views > .card-view:nth-child(8) {
            display: none !important;
        }

        /* 通用card-view样式 */
        .wrapper-content #gridTable .card-view {
            display: inline-flex;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .wrapper-content #gridTable .card-view-title {
            display: inline;
        }

        .wrapper-content #gridTable .card-view-value {
            display: inline;
        }

        /* 分页控件优化 - 参考APP端极简风格 */
        .wrapper-content .fixed-table-pagination {
            padding: 10px 0 !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch;
        }

        /* 隐藏左侧的分页详情和每页显示选择器 */
        .wrapper-content .fixed-table-pagination .pull-left {
            display: none !important;
        }

        /* 分页按钮容器 */
        .wrapper-content .fixed-table-pagination .pull-right {
            width: 100% !important;
            float: none !important;
            display: block !important;
            text-align: center !important;
        }

        /* 分页按钮列表 - 强制单行 */
        .wrapper-content .fixed-table-pagination .pagination {
            margin: 0 !important;
            padding: 0 !important;
            display: inline-flex !important;
            flex-wrap: nowrap !important;
            gap: 4px !important;
            white-space: nowrap !important;
            vertical-align: middle !important;
        }

        /* 分页按钮项 - 强制不换行 */
        .wrapper-content .fixed-table-pagination .pagination > li,
        .wrapper-content .fixed-table-pagination .pagination > li.page-item,
        .wrapper-content .fixed-table-pagination .pagination > li.page-pre,
        .wrapper-content .fixed-table-pagination .pagination > li.page-next,
        .wrapper-content .fixed-table-pagination .pagination > li.page-last-separator,
        .wrapper-content .fixed-table-pagination .pagination > li.active {
            margin: 0 !important;
            padding: 0 !important;
            flex-shrink: 0 !important;
            display: inline-block !important;
            float: none !important;
            list-style: none !important;
        }

        /* 分页按钮样式 - APP风格 */
        .wrapper-content .fixed-table-pagination .pagination > li > a,
        .wrapper-content .fixed-table-pagination .pagination > li > a.page-link {
            padding: 0 !important;
            margin: 0 !important;
            width: 34px !important;
            height: 34px !important;
            line-height: 34px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 13px !important;
            border-radius: 6px !important;
            border: 1px solid #ddd !important;
            background: #fff !important;
            float: none !important;
            text-align: center !important;
        }

        /* 当前页高亮 */
        .wrapper-content .fixed-table-pagination .pagination > li.active > a,
        .wrapper-content .fixed-table-pagination .pagination > li.active > a.page-link {
            background: #1ab394 !important;
            border-color: #1ab394 !important;
            color: #fff !important;
        }

        /* 禁用状态 */
        .wrapper-content .fixed-table-pagination .pagination > li.disabled > a,
        .wrapper-content .fixed-table-pagination .pagination > li.disabled > a.page-link {
            opacity: 0.4 !important;
        }

        /* 省略号样式 */
        .wrapper-content .fixed-table-pagination .pagination > li.page-last-separator > a {
            border: none !important;
            background: transparent !important;
        }
    }

        height: auto !important;
    }

    .wrapper-content .fixed-table-body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ---------- 表单容器 ---------- */
@media (max-width: 768px) {
    .wrapper {
        padding: var(--mobile-spacing-md);
    }

    .form-horizontal {
        background: var(--mobile-card-bg);
        border-radius: var(--mobile-radius);
        padding: var(--mobile-spacing-md);
        box-shadow: var(--mobile-shadow);
    }

    /* 表单组垂直布局 */
    .form-horizontal .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--mobile-spacing-lg);
    }

    .form-horizontal .form-group:last-child {
        margin-bottom: 0;
    }

    /* 表单标签 */
    .form-horizontal .control-label {
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        font-size: 14px;
        font-weight: 600;
        color: var(--mobile-text);
        width: 100% !important;
        margin: 0;
    }

    /* 表单输入容器 */
    .form-horizontal .form-group > div[class*="col-"] {
        width: 100% !important;
        padding: 0 !important;
        float: none !important;
    }

    /* 表单按钮组 */
    .form-horizontal .form-group .btn-group {
        display: flex;
        gap: var(--mobile-spacing-sm);
    }

    .form-horizontal .form-group .btn-group .btn {
        flex: 1;
    }

    /* 表单底部按钮 */
    .form-horizontal .footer-center,
    .form-horizontal .text-center {
        margin-top: var(--mobile-spacing-lg);
        padding-top: var(--mobile-spacing-lg);
        border-top: 1px solid var(--mobile-border);
        display: flex;
        gap: var(--mobile-spacing-sm);
    }

    .form-horizontal .footer-center .btn,
    .form-horizontal .text-center .btn {
        flex: 1;
    }
}

/* ---------- 表单内图片网格（grid-square）适配 ---------- */
@media (max-width: 768px) {
    /* 图片容器 - 移除固定高度和溢出裁剪 */
    .bodyLine {
        height: auto !important;
        min-height: 80px !important;
        overflow: visible !important;
    }

    /* 图片网格容器和子容器 - flex横向排列换行 */
    #mainImgDiv,
    #mainImgBase {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* 单个图片格子 */
    .grid-square {
        flex: 0 0 auto !important;
        width: 70px !important;
        height: 70px !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        border: 1px solid var(--mobile-border) !important;
        position: relative !important;
    }

    .grid-square img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 上传触发区域 - 覆盖img-sm和box-a尺寸，保持PC原有十字绘制方式 */
    .uploadImg {
        float: none !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        border-width: 2px !important;
        border-style: dashed !important;
        border-color: #1890ff !important;
        border-radius: 6px !important;
        position: relative !important;
        cursor: pointer !important;
        background-color: #f0f7ff !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* 横线 - 沿用PC端的border-top + margin定位方式（兼容移动WebView） */
    .uploadImg::before {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 40px !important;
        height: 2px !important;
        margin-left: -20px !important;
        margin-top: -1px !important;
        border-top: 2px solid #1890ff !important;
        background: none !important;
    }

    /* 竖线 - 沿用PC端的border-left + margin定位方式 */
    .uploadImg::after {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        height: 40px !important;
        width: 2px !important;
        margin-top: -20px !important;
        margin-left: -1px !important;
        border-left: 2px solid #1890ff !important;
        background: none !important;
    }

    /* 表单行按钮 - 移动端水平排列 */
    .form-group .btn-group {
        display: flex !important;
        gap: 4px !important;
    }

    .form-group .btn-group .btn {
        flex: 1 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
        min-height: 40px !important;
        height: auto !important;
    }

    /* 非form-horizontal表单中的按钮 - 移动端全宽 */
    .panel-body .form-group > .col-sm-2 .btn {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }

    /* 非form-horizontal表单的col-sm-*竖向堆叠时保持行间距 */
    .panel-body .form-group > [class*="col-sm-"] {
        margin-bottom: 8px !important;
    }

    /* 控制标签 - 移动端左对齐（非form-horizontal场景） */
    .panel-body > .form-group > .control-label {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important;
    }
}

/* ---------- Tab 导航 ---------- */
@media (max-width: 768px) {
    .nav-tabs {
        display: flex;
        border-bottom: 2px solid var(--mobile-border);
        margin-bottom: var(--mobile-spacing-md);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .nav-tabs > li {
        flex-shrink: 0;
    }

    .nav-tabs > li > a {
        padding: 12px 16px;
        font-size: 14px;
        color: var(--mobile-text-secondary);
        border: none;
        border-bottom: 2px solid transparent;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li > a:hover {
        background: transparent;
        color: var(--mobile-primary);
        border-bottom-color: var(--mobile-primary);
    }

    .tab-content {
        padding: 0;
    }

    .tab-pane {
        padding: var(--mobile-spacing-md);
        background: var(--mobile-card-bg);
        border-radius: var(--mobile-radius);
        box-shadow: var(--mobile-shadow);
    }
}

/* ---------- 面板 ---------- */
@media (max-width: 768px) {
    .panel {
        border: none;
        border-radius: var(--mobile-radius);
        box-shadow: var(--mobile-shadow);
        margin-bottom: var(--mobile-spacing-md);
    }

    .panel-heading {
        padding: var(--mobile-spacing-md);
        font-size: 16px;
        font-weight: 600;
        background: var(--mobile-card-bg);
        border-bottom: 1px solid var(--mobile-border);
        border-radius: var(--mobile-radius) var(--mobile-radius) 0 0;
    }

    .panel-body {
        padding: var(--mobile-spacing-md);
        background: var(--mobile-card-bg);
    }

    .panel-footer {
        padding: var(--mobile-spacing-md);
        background: var(--mobile-bg);
        border-top: 1px solid var(--mobile-border);
        border-radius: 0 0 var(--mobile-radius) var(--mobile-radius);
    }
}

/* ---------- 模态框/对话框 ---------- */
@media (max-width: 768px) {
    .modal-dialog {
        width: 95%;
        margin: 10px auto;
    }

    .modal-content {
        border-radius: var(--mobile-radius);
    }

    .modal-header {
        padding: var(--mobile-spacing-md);
        border-bottom: 1px solid var(--mobile-border);
    }

    .modal-title {
        font-size: 16px;
        font-weight: 600;
    }

    .modal-body {
        padding: var(--mobile-spacing-md);
        max-height: 60vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: var(--mobile-spacing-md);
        border-top: 1px solid var(--mobile-border);
        display: flex;
        gap: var(--mobile-spacing-sm);
    }

    .modal-footer .btn {
        flex: 1;
    }
}

/* ---------- Layer 弹窗适配 ---------- */
@media (max-width: 768px) {
    /* Layer 弹窗标题栏 */
    .layui-layer-title {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 110px 0 15px !important;
        font-size: 16px !important;
        background-color: #F8F8F8 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Layer 弹窗按钮容器 - 右上角触摸友好设计 */
    .layui-layer-setwin {
        position: absolute !important;
        right: 8px !important;
        top: 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 40px !important;
        padding: 0 !important;
        z-index: 10 !important;
        gap: 8px !important;
    }

    /* Layer 按钮基础样式 - 大尺寸触摸友好 */
    .layui-layer-setwin a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        border-radius: 50% !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
        transition: background-color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* 按钮按下效果 */
    .layui-layer-setwin a:active {
        background-color: rgba(0, 0, 0, 0.15) !important;
    }

    /* 关闭按钮 - 使用 X 图标 */
    .layui-layer-setwin .layui-layer-close {
        background-color: rgba(220, 53, 69, 0.1) !important;
        background-image: none !important;
        position: relative !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* 关闭按钮 X 图标（CSS 绘制） */
    .layui-layer-setwin .layui-layer-close::before,
    .layui-layer-setwin .layui-layer-close::after {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 2px !important;
        background-color: #dc3545 !important;
        border-radius: 1px !important;
    }

    .layui-layer-setwin .layui-layer-close::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .layui-layer-setwin .layui-layer-close::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    /* 关闭按钮按下效果 */
    .layui-layer-setwin .layui-layer-close:active {
        background-color: rgba(220, 53, 69, 0.25) !important;
    }

    /* 最大化按钮 - 使用图标 */
    .layui-layer-setwin .layui-layer-max {
        background-image: none !important;
        position: relative !important;
    }

    /* 最大化按钮图标（CSS 绘制方框） */
    .layui-layer-setwin .layui-layer-max::before {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 14px !important;
        height: 14px !important;
        border: 2px solid #666 !important;
        border-radius: 2px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 已最大化状态（还原图标） */
    .layui-layer-setwin .layui-layer-maxmin::before {
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
    }

    .layui-layer-setwin .layui-layer-maxmin::after {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(50% - 4px) !important;
        width: 10px !important;
        height: 10px !important;
        border: 2px solid #666 !important;
        border-radius: 2px !important;
        transform: translate(-50%, -50%) !important;
        background-color: #F8F8F8 !important;
    }

    /* 隐藏最小化按钮（移动端不需要） */
    .layui-layer-setwin .layui-layer-min {
        display: none !important;
    }

    /* Layer 弹窗底部按钮栏 */
    .layui-layer-btn {
        padding: 10px 15px !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .layui-layer-btn a {
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 20px !important;
        font-size: 16px !important;
        border-radius: 22px !important;
        flex: none !important;
        min-width: 80px !important;
    }

    /* 确认按钮样式增强 */
    .layui-layer-btn .layui-layer-btn0 {
        background-color: #2196F3 !important;
        border-color: #2196F3 !important;
        color: #fff !important;
    }

    /* 取消按钮样式 */
    .layui-layer-btn .layui-layer-btn1 {
        background-color: #fff !important;
        border-color: #ddd !important;
        color: #666 !important;
    }
}