/* 【本次新增】移动端全局样式 - 集中管理所有 .mobile-mode 下的优化 */
/* 版本: 1.0 - 2026-08-28 */

/* ========== 1. 基础容器与间距优化 ========== */
.mobile-mode .container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 8px !important;
}

.mobile-mode.container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

/* ========== 2. 卡片组件压缩 ========== */
.mobile-mode .card {
    margin-bottom: 8px;
    border-radius: 6px;
}

.mobile-mode .card-header {
    padding: 8px 12px;
    font-size: 14px;
}

.mobile-mode .card-body {
    padding: 10px 12px;
}

.mobile-mode .card-footer {
    padding: 8px 12px;
}

.mobile-mode .card-header h4,
.mobile-mode .card-header h3,
.mobile-mode .card-header h2,
.mobile-mode .card-header h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

/* ========== 3. 表格优化 ========== */
.mobile-mode .table {
    font-size: 11px;
    margin-bottom: 8px;
}

.mobile-mode .table th,
.mobile-mode .table td {
    padding: 4px 6px;
    vertical-align: middle;
    white-space: nowrap;
}

.mobile-mode .table-sm th,
.mobile-mode .table-sm td {
    padding: 3px 5px;
    font-size: 11px;
}

.mobile-mode .table thead th {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 6px;
    background-color: #f8f9fa;
}

.mobile-mode .table-responsive {
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== 4. 表单控件优化 ========== */
.mobile-mode .form-control {
    font-size: 14px;
    padding: 6px 10px;
    height: auto;
    line-height: 1.4;
}

.mobile-mode .form-control-sm {
    font-size: 13px;
    padding: 4px 8px;
}

.mobile-mode .form-select {
    font-size: 14px;
    padding: 6px 10px;
    height: auto;
}

.mobile-mode .form-label {
    font-size: 13px;
    margin-bottom: 3px;
    font-weight: 500;
}

.mobile-mode .form-group,
.mobile-mode .mb-3 {
    margin-bottom: 8px !important;
}

/* 移动端表单堆叠：col-md-* 在移动端全宽 */
.mobile-mode .col-md-2,
.mobile-mode .col-md-3,
.mobile-mode .col-md-4,
.mobile-mode .col-md-6,
.mobile-mode .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 6px;
}

/* ========== 5. 按钮优化 ========== */
.mobile-mode .btn {
    font-size: 13px;
    padding: 6px 12px;
    line-height: 1.4;
}

.mobile-mode .btn-sm {
    font-size: 12px;
    padding: 4px 8px;
}

.mobile-mode .btn-lg {
    font-size: 15px;
    padding: 8px 16px;
}

.mobile-mode .btn-group .btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* 移动端按钮全宽 */
.mobile-mode .btn-block,
.mobile-mode .mobile-btn-full {
    display: block;
    width: 100%;
    margin-bottom: 6px;
}

/* ========== 6. 标题字号适配 ========== */
.mobile-mode h1 { font-size: 18px; }
.mobile-mode h2 { font-size: 16px; }
.mobile-mode h3 { font-size: 15px; }
.mobile-mode h4 { font-size: 14px; }
.mobile-mode h5 { font-size: 13px; }
.mobile-mode h6 { font-size: 12px; }

.mobile-mode .display-4 {
    font-size: 20px;
    font-weight: 500;
}

/* ========== 7. 导航栏移动端优化 ========== */
.mobile-mode .navbar {
    padding: 4px 8px;
}

.mobile-mode .navbar-brand {
    font-size: 15px;
    padding: 0;
}

.mobile-mode .navbar-toggler {
    padding: 4px 8px;
    font-size: 18px;
}

.mobile-mode .navbar-collapse {
    margin-top: 8px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 8px;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-mode .navbar-nav {
    flex-direction: column;
    gap: 2px;
}

.mobile-mode .nav-item {
    margin-bottom: 0;
    width: 100%;
}

.mobile-mode .nav-link {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
}

.mobile-mode .nav-link:hover {
    background-color: #f8f9fa;
}

.mobile-mode .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin-top: 4px;
    background-color: #f8f9fa;
    border: none;
    border-radius: 4px;
    padding: 4px 0;
    box-shadow: none;
}

.mobile-mode .dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 3px;
}

/* 导航栏顶部信息行 */
.mobile-mode .navbar .d-flex.justify-content-between {
    width: 100%;
    gap: 4px;
    flex-wrap: nowrap;
}

.mobile-mode #device-toggle,
.mobile-mode .logout-link {
    font-size: 13px;
    padding: 4px 8px;
    text-align: left;
}

/* 【本次新增】移动端隐藏欢迎信息，节省空间 */
.mobile-mode .nav-item .nav-link:has(+ .dropdown-menu)::before {
    /* 保留下拉箭头样式 */
}

.mobile-mode .navbar-nav .nav-item span.nav-link {
    padding: 4px 8px;
    font-size: 12px;
    color: #6c757d;
}

/* 用户切换下拉菜单在移动端优化 */
.mobile-mode #userSwitchDropdown::after {
    /* 移除桌面端箭头，移动端不需要 */
    display: none;
}

/* 移动端登录后的用户信息行 */
.mobile-mode .navbar-nav > .nav-item > .nav-link {
    padding: 6px 10px;
    font-size: 13px;
}

/* ========== 8. Flash/Alert 消息压缩 ========== */
.mobile-mode .custom-flash-msg {
    padding: 10px 30px 10px 12px !important;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.mobile-mode .alert {
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ========== 9. 徽章/Badge 优化 ========== */
.mobile-mode .badge {
    font-size: 11px;
    padding: 3px 7px;
    font-weight: 500;
}

/* ========== 10. 行间距优化 ========== */
.mobile-mode .row {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 4px;
    margin-left: -4px;
    margin-right: -4px;
}

.mobile-mode .row > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
}

/* ========== 11. 列表组优化 ========== */
.mobile-mode .list-group-item {
    padding: 8px 12px;
    font-size: 13px;
}

/* ========== 12. 移动端卡片列表视图（通用） ========== */
/* 【本次修改】基础规则：卡片列表默认隐藏，pc-only默认显示 */
.mobile-card-list {
    display: none;
}

.pc-only {
    display: block;
}

/* 【本次修改】mobile-mode 下：无论屏幕宽度，都切换显示模式 */
.mobile-mode .mobile-card-list {
    display: block;
}

.mobile-mode .pc-only {
    display: none !important;
}

/* 【本次新增】mobile-only 通用类 */
.mobile-only {
    display: none;
}

.mobile-mode .mobile-only {
    display: block !important;
}

/* 移动端卡片样式 */
.mobile-mode .mobile-card-list .card {
    margin-bottom: 8px;
    border-left: 3px solid #0d6efd;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mobile-mode .mobile-card-list .card-header {
    padding: 8px 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
}

.mobile-mode .mobile-card-list .card-body {
    padding: 10px;
}

.mobile-mode .mobile-card-list .card-footer {
    padding: 6px 10px;
    font-size: 13px;
}

.mobile-mode .mobile-card-list .info-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px dashed #eee;
    font-size: 12px;
}

.mobile-mode .mobile-card-list .info-row:last-child {
    border-bottom: none;
}

.mobile-mode .mobile-card-list .info-label {
    color: #6c757d;
    flex-shrink: 0;
    margin-right: 8px;
}

.mobile-mode .mobile-card-list .info-value {
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

/* 响应式媒体查询 - 在小屏幕上进一步压缩 */
@media (max-width: 767.98px) {
    .mobile-mode .mobile-card-list .card {
        margin-bottom: 6px;
    }
    .mobile-mode .mobile-card-list .card-header {
        padding: 5px 8px;
    }
    .mobile-mode .mobile-card-list .card-body {
        padding: 6px 8px;
    }
}

/* ========== 13. Tab 导航优化 ========== */
.mobile-mode .nav-tabs {
    font-size: 12px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.mobile-mode .nav-tabs .nav-link {
    padding: 6px 10px;
    font-size: 12px;
}

/* ========== 14. 分页优化 ========== */
.mobile-mode .pagination {
    font-size: 12px;
    flex-wrap: wrap;
}

.mobile-mode .pagination .page-link {
    padding: 4px 8px;
    font-size: 12px;
}

/* ========== 15. 模态框优化 ========== */
.mobile-mode .modal-dialog {
    margin: 8px;
    max-width: calc(100% - 16px);
}

.mobile-mode .modal-content {
    border-radius: 8px;
}

.mobile-mode .modal-header {
    padding: 10px 12px;
}

.mobile-mode .modal-body {
    padding: 12px;
}

.mobile-mode .modal-footer {
    padding: 10px 12px;
}

/* ========== 16. 自定义滚动条（移动端隐藏） ========== */
.mobile-mode ::-webkit-scrollbar {
    display: none;
}

.mobile-mode {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========== 17. 图片优化 ========== */
.mobile-mode img {
    max-width: 100%;
    height: auto;
}

/* ========== 18. Jumbotron 优化 ========== */
.mobile-mode .jumbotron {
    padding: 16px 12px;
    margin-bottom: 12px;
}

.mobile-mode .jumbotron .display-4 {
    font-size: 18px;
}

.mobile-mode .jumbotron .lead {
    font-size: 13px;
}

/* ========== 19. 工具栏/操作栏优化 ========== */
.mobile-mode .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
}

.mobile-mode .d-flex.justify-content-between .btn,
.mobile-mode .d-flex.justify-content-between a {
    width: 100%;
}

.mobile-mode .mb-3.d-flex {
    flex-wrap: wrap;
    gap: 6px;
}

/* ========== 20. 搜索/筛选表单优化 ========== */
.mobile-mode .card.mb-4 .card-body {
    padding: 10px;
}

.mobile-mode .card.mb-4 form .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 6px;
}

/* ========== 21. 数据汇总卡片优化 ========== */
.mobile-mode .bg-light.p-3.rounded {
    padding: 8px 10px !important;
}

.mobile-mode .bg-light.p-3.rounded .col-md-2,
.mobile-mode .bg-light.p-3.rounded .col-md-3,
.mobile-mode .bg-light.p-3.rounded .col-md-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.mobile-mode .bg-light.p-3.rounded input[readonly] {
    font-size: 13px;
    padding: 4px 8px;
}

/* ========== 22. 操作按钮区域优化 ========== */
.mobile-mode .d-flex.justify-content-between.mt-4 {
    flex-direction: column;
}

.mobile-mode .d-flex.justify-content-between.mt-4 .btn {
    width: 100%;
    margin-bottom: 6px;
}

/* ========== 23. 标签页紧凑 ========== */
.mobile-mode .nav.nav-tabs.mb-3 {
    margin-bottom: 8px;
    border-bottom-width: 1px;
}

/* ========== 24. 隐藏次要信息（移动端） ========== */
.mobile-mode .hide-on-mobile {
    display: none !important;
}

/* ========== 25. 身份证号等长文本截断 ========== */
.mobile-mode .truncate-text {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 26. 表格固定列（关键信息始终可见） ========== */
.mobile-mode .table-sticky-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

.mobile-mode .table-sticky-col-right {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 1;
    box-shadow: -2px 0 4px rgba(0,0,0,0.1);
}

/* ========== 27. 【本次新增】表单分组压缩 ========== */
.mobile-mode .form-section,
.mobile-mode .form-group,
.mobile-mode .mb-3,
.mobile-mode .mb-4 {
    margin-bottom: 10px !important;
}

/* 表单分组卡片 */
.mobile-mode .form-section-card {
    padding: 10px;
    margin-bottom: 10px;
}

.mobile-mode .form-section-card .card-header {
    padding: 6px 10px;
    font-size: 14px;
}

.mobile-mode .form-section-card .card-body {
    padding: 10px;
}

/* ========== 29. 【本次新增】行表单紧凑化 ========== */
.mobile-mode .row.g-3 > [class*="col-"] {
    padding: 4px;
}

.mobile-mode .row.g-3 {
    --bs-gutter-x: 4px;
    --bs-gutter-y: 4px;
}

/* ========== 30. 【本次新增】表格移动端优化 ========== */
.mobile-mode .table-responsive {
    border-radius: 6px;
    margin-bottom: 8px;
}

.mobile-mode .table.table-sm {
    font-size: 13px;
}

.mobile-mode .table.table-sm th,
.mobile-mode .table.table-sm td {
    padding: 4px 6px;
    white-space: nowrap;
}

/* ========== 31. 【本次新增】Badge紧凑化 ========== */
.mobile-mode .badge {
    font-size: 11px;
    padding: 3px 6px;
}

/* ========== 32. 【本次新增】按钮紧凑化 ========== */
.mobile-mode .btn-sm {
    font-size: 12px;
    padding: 4px 8px;
}

.mobile-mode .btn {
    padding: 5px 12px;
    font-size: 13px;
}

/* ========== 33. 【本次新增】隐藏表格列在移动端（通过CSS类控制） ========== */
.mobile-mode .hide-on-mobile-col {
    display: none !important;
}

.mobile-mode table.hide-cols-mobile th:nth-child(n),
.mobile-mode table.hide-cols-mobile td:nth-child(n) {
    /* 可通过CSS类隐藏不需要的列 */
}

/* ========== 34. 【本次新增】移动端信息密度优化 ========== */
.mobile-mode .text-muted.small {
    font-size: 11px;
}

.mobile-mode .card-header h4,
.mobile-mode .card-header h5 {
    font-size: 14px;
    margin-bottom: 0;
}

/* ========== 35. 【本次新增】导航链接紧凑化 ========== */
.mobile-mode .btn-group .btn {
    padding: 4px 10px;
    font-size: 12px;
}

/* ========== 36. 【本次新增】移动端全选/批量操作紧凑 ========== */
.mobile-mode .form-check {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.mobile-mode .form-check-input {
    width: 14px;
    height: 14px;
}

/* ========== 37. 【本次新增】移动端隐藏登录页等大背景图 ========== */
.mobile-mode .login-page .jumbotron {
    padding: 12px !important;
}

/* ========== 38. 【本次新增】表单项标签行内显示 ========== */
.mobile-mode label.form-label {
    font-size: 13px;
    margin-bottom: 3px;
}

.mobile-mode .input-group-text {
    font-size: 12px;
    padding: 4px 8px;
}

/* ========== 39. 【本次新增】移动端表格容器隐藏滚动条但可滚动 ========== */
.mobile-mode .table-responsive::-webkit-scrollbar {
    display: none;
}

.mobile-mode .table-responsive {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========== 40. 【本次新增】移动端分组合并展示 ========== */
.mobile-mode .accordion-item {
    border-radius: 6px;
    margin-bottom: 4px;
    overflow: hidden;
}

.mobile-mode .accordion-button {
    padding: 8px 12px;
    font-size: 14px;
}

.mobile-mode .accordion-body {
    padding: 10px;
}