table th,table tr{text-align:center;}

/* ============================================
   移动端专业UI设计 - 现代化移动端界面
   ============================================ */

/* ========== 基础移动端优化 (≤768px) ========== */
@media (max-width: 768px) {
    /* 全局重置 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        font-size: 14px;
        line-height: 1.6;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* 页面容器 - 移动端改为block布局，避免table布局问题 */
    .page-container {
        display: block !important;
        padding: 0;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 侧边栏在移动端不占据布局空间 - 使用fixed定位 */
    .sidebar-menu {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1002 !important; /* 确保在遮罩层之上 */
        width: 280px;
        max-width: 85vw;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
        /* 关键：不占据布局空间，使用fixed定位 */
        display: block;
        background: #fff; /* 确保背景是白色 */
    }
    
    .sidebar-menu:not(.mobile-is-visible) {
        transform: translateX(-100%);
    }
    
    .sidebar-menu.mobile-is-visible {
        transform: translateX(0);
    }
    
    /* 确保菜单内容可见 */
    .sidebar-menu-inner {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
    }
    
    .sidebar-menu .main-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #fff;
    }
    
    .sidebar-menu .main-menu li {
        display: block !important;
        visibility: visible !important;
    }
    
    .sidebar-menu .main-menu a {
        display: block !important;
        visibility: visible !important;
        color: #333 !important;
        padding: 12px 20px;
    }
    
    /* 确保logo区域可见 */
    .sidebar-menu .logo-env {
        display: block !important;
        visibility: visible !important;
        background: #fff;
        padding: 15px;
        border-bottom: 1px solid #e8eaed;
    }
    
    /* 主内容区域 - 占满整个宽度 */
    .main-content {
        width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        margin-right: 0 !important;
        background: #f5f7fa;
        min-height: 100vh;
        display: block !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* 防止横向滚动 */
        box-sizing: border-box !important;
        position: relative;
        /* 确保不继承table-cell，占满整个宽度 */
    }
    
    /* 覆盖juquan-core.css中可能的负margin */
    .user-info-navbar {
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 确保main-content没有负margin导致内容被裁剪 */
    .main-content {
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 确保页面容器没有负margin */
    .page-container .main-content {
        margin: 0 !important;
    }
    
    /* ========== 顶部导航栏 - 现代化设计 ========== */
    .user-info-navbar {
        background: #fff !important; /* 确保白色背景 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 6px 15px !important; /* 左右对称的padding，确保内容不靠边 */
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 1px solid #e8eaed;
        min-height: 44px !important; /* 进一步降低高度 */
        max-height: 44px !important; /* 限制最大高度 */
        margin: 0 !important; /* 移除所有margin */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important; /* 改为visible确保按钮可见 */
        box-sizing: border-box !important;
        display: flex !important; /* 使用flex布局 */
        justify-content: space-between;
        align-items: center;
    }
    
    .user-info-navbar .navbar {
        min-height: 44px !important;
        max-height: 44px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    
    .user-info-navbar .user-info-menu {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        height: 100%;
        flex-shrink: 0;
        overflow: visible;
        box-sizing: border-box;
    }
    
    /* 覆盖所有li元素的高度 */
    .user-info-navbar .user-info-menu > li {
        min-height: auto !important;
        max-height: 32px !important;
        height: auto !important;
        line-height: 1.2 !important;
        margin: 0 2px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* 确保链接和按钮不超出 */
    .user-info-navbar .user-info-menu > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .user-info-navbar .left-links {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 100%;
        flex-shrink: 0;
        overflow: visible;
        flex: 0 0 auto;
        min-width: 0; /* 允许收缩 */
        padding-left: 0 !important; /* 确保从左侧开始 */
        margin-left: 0 !important; /* 移除左侧margin */
    }
    
    .user-info-navbar .right-links {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 100%;
        flex-shrink: 0;
        overflow: visible;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
        min-width: 0; /* 允许收缩 */
        background: #fff !important; /* 确保右侧区域白色背景 */
        padding-right: 20px!important;
        margin-right: 0 !important; /* 移除右侧margin，让padding控制间距 */
    }
    
    /* 确保用户信息区域有白色背景 */
    .user-info-navbar .user-profile,
    .user-info-navbar .user-profile > a,
    .user-info-navbar .search-form {
        background: #fff !important;
    }
    
    /* 移动端菜单按钮 - 显示在导航栏左侧 */
    .mobile-menu-btn-wrapper {
        display: block !important;
        min-height: auto !important;
        max-height: 32px !important;
    }
    
    .user-info-navbar .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 6px !important; /* 增加padding确保完全可见 */
        color: #333;
        font-size: 18px;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.2s;
        text-decoration: none;
        height: 32px;
        min-width: 32px; /* 确保最小宽度 */
        width: 32px;
        line-height: 1;
        margin: 0 !important; /* 移除margin */
        margin-left: 0 !important; /* 确保没有左侧margin */
        overflow: visible !important; /* 确保可见 */
        position: relative;
        left: 0 !important; /* 确保从左侧开始 */
    }
    
    .mobile-menu-btn-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .user-info-navbar .mobile-menu-btn:hover,
    .user-info-navbar .mobile-menu-btn:active {
        background: #f0f0f0;
    }
    
    .user-info-navbar .mobile-menu-btn i {
        display: block;
        line-height: 1;
    }
    
    /* 隐藏桌面端搜索框 */
    .user-info-navbar .search-form {
        display: none;
    }
    
    /* 用户头像和下拉菜单优化 */
    .user-info-navbar .user-profile {
        display: flex;
        align-items: center;
        min-height: auto !important;
        max-height: 32px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important; /* 确保头像完整显示 */
    }
    
    .user-info-navbar .user-profile > a {
        display: flex !important;
        align-items: center;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    .user-info-navbar .user-profile img {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50%;
        flex-shrink: 0; /* 防止头像被压缩 */
        display: block !important;
        overflow: visible !important;
    }
    
    .user-info-navbar .user-profile span {
        margin-left: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #333;
        line-height: 1.2;
        white-space: nowrap;
        overflow: visible;
    }
    
    /* 通知图标优化 */
    .user-info-navbar .dropdown {
        min-height: auto !important;
        max-height: 32px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .user-info-navbar .dropdown > a {
        padding: 4px 6px !important;
        color: #666;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        width: 32px;
        line-height: 1;
    }
    
    .user-info-navbar .dropdown.hover-line > a {
        padding: 4px 6px !important;
    }
    
    /* 移动端菜单遮罩层 */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: none;
        backdrop-filter: blur(2px);
    }
    
    /* ========== 页面标题和面包屑 ========== */
    .page-title {
        background: #fff;
        padding: 15px;
        margin-bottom: 0;
        border-bottom: 1px solid #e8eaed;
    }
    
    .breadcrumb-env {
        margin-bottom: 0;
    }
    
    .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    
    .breadcrumb > li {
        color: #666;
    }
    
    .breadcrumb > li.active {
        color: #333;
        font-weight: 500;
    }
    
    .breadcrumb > li + li:before {
        padding: 0 8px;
        color: #999;
    }
    
    /* ========== 面板 - 卡片式设计 ========== */
    .panel {
        margin-bottom: 12px;
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        background: #fff;
        overflow: hidden;
    }
    
    .panel-heading {
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px;
        border-radius: 12px 12px 0 0;
        overflow: visible !important; /* 确保按钮不被切掉 */
    }
    
    .panel-heading .btn-toolbar {
        overflow: visible !important;
        margin: 0 !important;
    }
    
    .panel-body {
        padding: 15px;
    }
    
    /* ========== 按钮 - 现代化设计 ========== */
    .btn-toolbar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .btn-group {
        width: 100%;
        margin: 0;
    }
    
    .btn-group .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 8px;
        border: none;
        transition: all 0.2s;
        margin: 0;
    }
    
    .btn-primary {
        background: #5cb85c !important; /* 统一使用绿色，保持页面颜色一致 */
        color: #fff !important;
        box-shadow: 0 2px 4px rgba(92, 184, 92, 0.3);
        border-color: #4cae4c !important;
    }
    
    .btn-primary:hover {
        background: #449d44 !important;
        border-color: #398439 !important;
    }
    
    .btn-primary:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(92, 184, 92, 0.3);
        background: #449d44 !important;
    }
    
    .btn-default {
        background: #fff;
        color: #333;
        border: 1px solid #e0e0e0;
    }
    
    .btn-default:active {
        background: #f5f5f5;
    }
    
    .btn-group.pull-right {
        float: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 确保按钮组在 panel-heading 中正确显示 */
    .panel-heading .btn-group,
    .panel-heading .btn-toolbar .btn-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    .panel-heading .btn-group .btn {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
    }
    
    .panel-heading .btn-group .btn:last-child {
        margin-bottom: 0 !important;
    }
    
    /* ========== 搜索表单 - 现代化设计 ========== */
    .form-inline {
        display: block;
        background: #fff;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    .form-inline > span {
        display: block;
        margin: 0 0 15px 0 !important;
        width: 100%;
    }
    
    .form-inline > span:last-child {
        margin-bottom: 0 !important;
    }
    
    .form-inline .control-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 13px;
        color: #333;
    }
    
    .form-inline .form-control {
        width: 100%;
        padding: 12px 15px;
        font-size: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        transition: all 0.2s;
        background: #fff;
        min-height: 44px !important; /* 确保有足够的高度显示文字 */
        height: auto !important; /* 允许高度自适应 */
        line-height: 1.5 !important; /* 设置合适的行高 */
    }
    
    .form-inline .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        outline: none;
    }
    
    .form-inline select.form-control {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important; /* 确保有足够的高度显示文字 */
        height: auto !important; /* 允许高度自适应，覆盖 Bootstrap 的固定高度 */
        padding: 12px 40px 12px 15px !important; /* 上 右 下 左，为下拉箭头留出足够空间 */
        text-overflow: ellipsis;
        white-space: normal !important; /* 允许文字换行 */
        overflow: visible !important; /* 确保文字完整显示 */
        line-height: 1.5 !important; /* 设置合适的行高 */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-sizing: border-box !important;
    }
    
    /* 确保下拉选项文字完整显示 */
    .form-inline select.form-control option {
        padding: 8px 12px;
        white-space: normal;
        word-wrap: break-word;
        min-height: 40px;
        line-height: 1.5;
    }
    
    /* 修复状态下拉框显示问题 - 确保文字完整显示 */
    select.form-control[name="status"] {
        min-width: 100% !important;
        white-space: normal !important;
    }
    
    select.form-control[name="status"] option {
        padding: 10px 15px;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .form-inline .btn-primary {
        width: 100%;
        margin-top: 5px;
    }
    
    /* ========== 表格横向滚动容器 ========== */
    .table-scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        position: relative;
        margin-bottom: 15px;
    }
    
    .table-scroll-wrapper table {
        min-width: 100%;
        width: auto;
        margin-bottom: 0;
    }
    
    /* 确保表格单元格内容不换行 */
    .table-scroll-wrapper table th,
    .table-scroll-wrapper table td {
        white-space: nowrap;
    }
    
    /* 移动端横向滚动提示 */
    .table-scroll-wrapper::after {
        content: '';
        display: none;
    }
    
    @media screen and (max-width: 768px) {
        .table-scroll-wrapper {
            margin: 0 -15px;
            padding: 0 15px;
        }
        
        .table-scroll-wrapper::after {
            content: '←左右滑动查看更多→';
            display: block;
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.4);
            color: white;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            white-space: nowrap;
            opacity: 0.8;
            pointer-events: none;
            z-index: 10;
            animation: fadeInOut 2s ease-in-out infinite;
        }
        
        @keyframes fadeInOut {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 0.4; }
        }
    }
    
    /* ========== 表格 - 卡片式列表设计 ========== */
    .table-responsive {
        border: none;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }
    
    /* 移动端表格改为卡片式显示 - 但排除 DataTables 初始化的表格 */
    /* DataTables 需要标准的 table 结构才能正常工作 */
    .table:not(.dataTable) {
        display: block;
        width: 100%;
        border: none;
    }
    
    /* DataTables 初始化的表格保持 table 结构，但优化显示 */
    .table-scroll-wrapper .table.dataTable {
        display: table !important;
        width: auto !important;
        min-width: 100% !important;
        border-collapse: collapse;
        table-layout: auto !important;
    }
    
    /* 确保 DataTables 在横向滚动容器中单元格不换行 */
    .table-scroll-wrapper .table.dataTable thead th,
    .table-scroll-wrapper .table.dataTable tbody td {
        white-space: nowrap;
    }
    
    .table.dataTable {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse;
    }
    
    .table.dataTable thead {
        display: table-header-group !important;
    }
    
    .table.dataTable tbody {
        display: table-row-group !important;
    }
    
    .table.dataTable tbody tr {
        display: table-row !important;
        background: #fff;
        border-bottom: 1px solid #e8eaed;
        padding: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    
    .table.dataTable tbody td {
        display: table-cell !important;
        padding: 12px 8px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: center !important;
        vertical-align: middle;
    }
    
    .table.dataTable tbody td:before {
        display: none !important;
    }
    
    /* 非 DataTables 表格使用卡片式显示 */
    .table:not(.dataTable) thead {
        display: none;
    }
    
    .table:not(.dataTable) tbody {
        display: block;
    }
    
    .table:not(.dataTable) tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e8eaed;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
        transition: all 0.2s;
    }
    
    .table:not(.dataTable) tbody tr:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }
    
    .table:not(.dataTable) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: left !important;
    }
    
    .table:not(.dataTable) tbody td:last-child {
        border-bottom: none;
    }
    
    .table:not(.dataTable) tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        font-size: 13px;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    /* 操作按钮在移动端优化 */
    .table:not(.dataTable) tbody td .btn {
        padding: 8px 16px;
        font-size: 13px;
        margin: 2px;
        border-radius: 6px;
    }
    
    /* 复选框优化 */
    .table:not(.dataTable) tbody td:first-child {
        justify-content: flex-start;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .table:not(.dataTable) tbody td:first-child:before {
        display: none;
    }
    
    /* 操作列优化 */
    .table:not(.dataTable) tbody td:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 15px;
    }
    
    .table:not(.dataTable) tbody td:last-child:before {
        content: '操作';
        font-weight: 600;
        color: #666;
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .table:not(.dataTable) tbody td:last-child .btn {
        width: 100%;
        margin: 0;
    }
    
    /* ========== 模态框 - 全屏现代化设计 ========== */
    .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        border-radius: 0;
        border: none;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: #f5f7fa;
    }
    
    .modal-header {
        background: #fff;
        padding: 20px;
        border-bottom: 1px solid #e8eaed;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .modal-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }
    
    .modal-header .close {
        font-size: 28px;
        opacity: 0.6;
        padding: 0;
        margin: 0;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    
    .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        -webkit-overflow-scrolling: touch;
        background: #fff;
    }
    
    .modal-footer {
        background: #fff;
        padding: 15px 20px;
        border-top: 1px solid #e8eaed;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-footer .btn {
        width: 100%;
        padding: 12px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 8px;
        margin: 0;
    }
    
    /* 模态框中的表单 */
    .modal-body .form-group {
        margin-bottom: 20px;
    }
    
    .modal-body .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }
    
    .modal-body .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 15px;
    }
    
    .modal-body .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    
    .modal-body .col-md-4,
    .modal-body .col-md-6,
    .modal-body .col-md-8,
    .modal-body .col-md-12 {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* ========== 首页欢迎页面 - 黑白灰配色 ========== */
    .jumbotron {
        background: #f5f5f5;
        color: #333;
        padding: 40px 20px;
        margin: 0 !important;
        border-radius: 0;
        text-align: center;
        min-height: calc(100vh - 44px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #e0e0e0;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .jumbotron h1 {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
    }
    
    .jumbotron p {
        font-size: 16px;
        color: #666;
        margin: 0;
    }
    
    /* ========== 页脚 ========== */
    .main-footer {
        background: #fff;
        padding: 20px 15px;
        font-size: 12px;
        text-align: center;
        color: #666;
        border-top: 1px solid #e8eaed;
        margin-top: 20px;
    }
    
    .go-up {
        display: none;
    }
    
    /* ========== 数据表格分页 ========== */
    /* 分页容器居中显示 */
    .dataTables_paginate,
    .dataTables_wrapper .dataTables_paginate,
    #example-3_paginate {
        text-align: center !important;
        margin: 20px auto 0 !important;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* 分页列表居中 */
    .dataTables_paginate .pagination,
    #example-3_paginate .pagination {
        display: inline-flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0 auto !important;
        padding: 0;
        list-style: none;
    }
    
    /* 分页按钮样式 */
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_paginate .pagination > li > a,
    .dataTables_paginate .pagination > li > span {
        padding: 8px 12px;
        margin: 0 2px;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        display: inline-block;
        min-width: 36px;
        text-align: center;
    }
    
    /* 分页信息居中 */
    .dataTables_wrapper .dataTables_info,
    #example-3_info {
        text-align: center !important;
        margin-top: 15px;
        color: #666;
        font-size: 13px;
        width: 100%;
    }
    
    /* 分页行布局优化 - 移动端改为垂直布局 */
    .row > .col-xs-6:has(.dataTables_paginate),
    .row > .col-xs-6:has(#example-3_paginate) {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 兼容性：使用类选择器 */
    .row .col-xs-6:last-child {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 分页信息也居中 */
    .row .col-xs-6:first-child {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px;
    }
    
    /* 分页省略号样式 */
    .dataTables_paginate .pagination > li.disabled > span {
        border: none;
        background: transparent;
        color: #999;
        cursor: default;
        padding: 8px 4px;
    }
    
    /* 分页按钮悬停效果 */
    .dataTables_paginate .pagination > li > a:hover,
    .dataTables_paginate .pagination > li > span:hover {
        background: #f5f5f5;
        border-color: #5cb85c;
    }
    
    .dataTables_paginate .pagination > li.active > a,
    .dataTables_paginate .pagination > li.active > span {
        background: #5cb85c !important; /* 统一使用绿色，与搜索按钮保持一致 */
        color: #fff !important;
        border-color: #5cb85c !important;
    }
    
    .dataTables_paginate .pagination > li.disabled > a,
    .dataTables_paginate .pagination > li.disabled > span {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

/* ========== 小屏幕手机优化 (≤480px) ========== */
@media (max-width: 480px) {
    .main-content {
        padding: 0;
    }
    
    .user-info-navbar {
        padding: 5px 8px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
    
    .user-info-navbar .navbar {
        min-height: 40px !important;
        max-height: 40px !important;
    }
    
    .user-info-navbar .user-info-menu > li {
        max-height: 30px !important;
    }
    
    .user-info-navbar .mobile-menu-btn,
    .user-info-navbar .dropdown > a {
        height: 30px !important;
        width: 30px !important;
    }
    
    .user-info-navbar .user-profile img {
        width: 24px;
        height: 24px;
    }
    
    .user-info-navbar .user-profile span {
        display: none;
    }
    
    .page-title {
        padding: 12px 15px;
    }
    
    .breadcrumb {
        font-size: 12px;
    }
    
    .panel-heading {
        padding: 12px;
    }
    
    .panel-body {
        padding: 12px;
    }
    
    .form-inline {
        padding: 12px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .jumbotron {
        padding: 30px 15px;
    }
    
    .jumbotron h1 {
        font-size: 24px;
    }
    
    .jumbotron p {
        font-size: 14px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-footer {
        padding: 12px 15px;
    }
}

/* ========== 中等屏幕优化 (平板, 769px - 992px) ========== */
@media (min-width: 769px) and (max-width: 992px) {
    .main-content {
        padding: 20px;
    }
    
    .modal-dialog.modal-lg {
        width: 90%;
        max-width: 90%;
        margin: 30px auto;
        height: auto;
    }
    
    .modal-content {
        height: auto;
        max-height: 90vh;
        border-radius: 12px;
    }
    
    .form-inline > span {
        display: inline-block;
        margin: 0 10px 10px 0 !important;
        width: auto;
        min-width: 200px;
    }
    
    /* 平板端表格正常显示 */
    .table {
        display: table;
    }
    
    .table thead {
        display: table-header-group;
    }
    
    .table tbody {
        display: table-row-group;
    }
    
    .table tbody tr {
        display: table-row;
        padding: 0;
        border: none;
        border-bottom: 1px solid #e8eaed;
        border-radius: 0;
        box-shadow: none;
    }
    
    .table tbody td {
        display: table-cell;
        padding: 12px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: center !important;
    }
    
    .table tbody td:before {
        display: none;
    }
}

/* ========== 触摸设备优化 ========== */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    a, button {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    }
    
    .table tbody tr {
        cursor: pointer;
    }
}

/* ========== 横屏优化 ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-dialog {
        height: 100vh;
    }
    
    .modal-body {
        max-height: calc(100vh - 140px);
    }
    
    .jumbotron {
        min-height: calc(100vh - 60px);
    }
}

/* ========== Footer 底部内容居中对齐 ========== */
/* 确保在所有设备上 footer 内容都居中对齐 */
footer.main-footer .footer-text,
.main-footer .footer-text {
    text-align: center !important;
    width: 100%;
    margin: 0 auto;
}

footer.main-footer .footer-inner,
.main-footer .footer-inner {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 桌面端也确保居中对齐 */
@media (min-width: 769px) {
    footer.main-footer .footer-text,
    .main-footer .footer-text {
        text-align: center !important;
    }
    
    footer.main-footer .footer-inner,
    .main-footer .footer-inner {
        text-align: center !important;
    }
}