/**
 * mobile.css — 全局移动端响应式适配
 * 断点：768px（≤768px 为移动端）
 * 适配原则：移动优先 + 渐进增强
 */

/* ======================================================
   0. 弹窗全局兜底（所有视口）— 防止弹窗宽度超出视口导致只显示右半边
   ====================================================== */
.layui-layer {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
.layui-layer-page,
.layui-layer-dialog {
  max-width: calc(100vw - 20px) !important;
}

/* ======================================================
   1. 基础容器 + 全局触摸反馈消除
   ====================================================== */
@media (max-width: 768px) {
  /* 全面消除移动端点击蓝色高亮遮挡文字（WebKit/Blink） */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 消除 focus 时外发光轮廓 */
  a:focus, button:focus, li:focus, input:focus, select:focus, textarea:focus,
  .layui-tab-title li:focus, .layui-nav-item a:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body {
    margin: 6px !important;
  }

  .layuimini-container {
    border-radius: 0 !important;
  }

  .layuimini-main {
    margin: 6px 6px 6px 6px !important;
  }
}

/* ======================================================
   2. 搜索表单
   ====================================================== */
@media (max-width: 768px) {
  .layuimini-container .table-search-fieldset {
    padding: 8px 10px 4px 10px !important;
    margin: 0 0 8px 0 !important;
  }

  .table-search-fieldset > div,
  .table-search-fieldset > form > .layui-form-item {
    margin: 0 !important;
  }

  /* inline 表单项改为块级堆叠 */
  .layui-form-item .layui-inline {
    display: block !important;
    margin: 6px 0 !important;
  }

  /* 标签宽度统一 */
  .layui-form-label {
    width: 88px !important;
    padding: 9px 6px !important;
    font-size: 13px !important;
  }

  .layui-input-inline {
    width: calc(100% - 96px) !important;
    margin-left: 96px !important;
  }

  /* 按钮行 */
  .layui-form-item .layui-inline:last-child {
    margin-top: 10px !important;
    text-align: left !important;
    margin-left: 88px !important;
  }

  .layui-form-item .layui-btn {
    padding: 0 12px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 12px !important;
    margin: 0 4px 4px 0 !important;
  }

  /* 表单 pane 模式 */
  .layui-form-pane .layui-form-label {
    width: 80px !important;
    font-size: 12px !important;
  }

  .layui-form-pane .layui-input-block {
    margin-left: 88px !important;
  }
}

/* ======================================================
   3. 数据表格
   ====================================================== */
@media (max-width: 768px) {
  /* 表格外层横向滚动 */
  .layui-table-view,
  .layuimini-main > .layui-card > .layui-card-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 防止过度压缩 */
  .layui-table {
    min-width: 540px !important;
  }

  /* 单元格紧凑化 */
  .layui-table td,
  .layui-table th {
    padding: 7px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* 工具栏 */
  .layui-table-tool {
    padding: 6px 8px !important;
  }

  /* 操作列按钮 */
  .layui-table-cell .layui-btn {
    padding: 0 7px !important;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 12px !important;
    margin: 1px 2px !important;
  }

  /* 分页 */
  .layui-table-page {
    padding: 4px 8px !important;
  }

  .layui-laypage-btn,
  .layui-laypage a,
  .layui-laypage span {
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
  }
}

/* ======================================================
   4. Layui 弹窗（全局兜底）
   ====================================================== */
@media (max-width: 768px) {
  .layui-layer {
    max-width: 96vw !important;
    min-width: unset !important;
  }

  .layui-layer-page {
    width: 95vw !important;
    left: 2.5vw !important;
    box-sizing: border-box !important;
  }

  .layui-layer-title {
    font-size: 14px !important;
    padding: 0 40px 0 14px !important;
  }

  /* content 自适应高度，仅在超出视口时内部滚动（不再被 72vh 过度压缩） */
  .layui-layer-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .layui-layer-btn {
    padding: 8px 10px !important;
  }

  .layui-layer-btn a {
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

/* ======================================================
   5. 首页 KPI 卡片（welcome.html）
   ====================================================== */
@media (max-width: 768px) {
  .sub-nav {
    padding: 0 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .sub-nav-item {
    padding: 12px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .page-content {
    padding: 10px 8px !important;
  }

  .kpi-row {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .kpi-card {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    padding: 14px 12px !important;
    min-height: 100px !important;
    border-radius: 12px !important;
  }

  .kpi-card .kpi-icon {
    font-size: 22px !important;
    top: 10px !important;
    right: 10px !important;
  }

  .kpi-card .kpi-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  .kpi-card .kpi-main {
    font-size: 22px !important;
  }

  .kpi-card .kpi-sub {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  .kpi-card .kpi-change {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  .kpi-card .kpi-levels { font-size: 12px !important; }
  .kpi-card .kpi-levels .lv-row { line-height: 24px !important; padding: 1px 4px !important; }

  /* 图表容器高度适配 */
  #chartCollege,
  .chart-box [id*="Chart"],
  .chart-box [id*="chart"] {
    height: 240px !important;
  }

  .chart-box {
    padding: 12px 8px !important;
    margin-bottom: 12px !important;
  }
}

/* ======================================================
   6. 个人中心（profile.html）
   ====================================================== */
@media (max-width: 768px) {
  .profile-wrap {
    max-width: 100% !important;
  }

  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 16px !important;
    gap: 12px !important;
  }

  .profile-header .info .name {
    font-size: 18px !important;
  }

  .profile-header .info {
    font-size: 13px !important;
  }

  .profile-card {
    padding: 14px 14px !important;
  }

  .kv-row .kv-label {
    width: 80px !important;
    font-size: 12px !important;
  }

  .kv-row .kv-value {
    font-size: 13px !important;
  }
}

/* ======================================================
   7. 订单导航页签（orderManage.html）
   ====================================================== */
@media (max-width: 768px) {
  .order-nav {
    gap: 6px !important;
    margin-bottom: 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
  }

  .order-nav .nav-item {
    min-width: 76px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0 !important;
  }
}

/* ======================================================
   8. 树形组织图（companyTree / clubTree / departmentTree）
   ====================================================== */
@media (max-width: 768px) {
  /* 树形容器横向滚动 */
  .tree-container,
  .org-tree-wrap,
  [id*="treeChart"],
  [id*="orgChart"] {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px !important;
  }

  /* 节点卡片缩小 */
  .org-node,
  .tree-node,
  .org-chart-node {
    width: 130px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* 头像缩小 */
  .org-node .avatar,
  .tree-node .avatar,
  .org-chart-node img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
  }

  /* 名字 */
  .org-node .name,
  .tree-node .name {
    font-size: 12px !important;
  }

  /* 职位/部门 */
  .org-node .pos,
  .tree-node .pos {
    font-size: 10px !important;
  }
}

/* ======================================================
   9. 会员列表卡片（agentList.html）
   ====================================================== */
@media (max-width: 768px) {
  .member-groups {
    padding: 2px 4px 16px !important;
  }

  .member-club {
    margin-bottom: 14px !important;
  }

  .member-club-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    gap: 4px !important;
  }

  .member-club-head .club-title {
    font-size: 14px !important;
  }

  .member-club-head .club-meta {
    font-size: 11px !important;
  }

  .member-club-body {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .member-club-body th,
  .member-club-body td {
    padding: 7px 6px !important;
    font-size: 12px !important;
  }
}

/* ======================================================
   10. 通知 / 消息中心
   ====================================================== */
@media (max-width: 768px) {
  .message-item,
  .notification-item {
    padding: 10px 12px !important;
  }

  .message-item-title,
  .notification-title {
    font-size: 13px !important;
  }

  .message-item-content,
  .notification-content {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .message-item-meta,
  .notification-meta,
  .msg-time {
    font-size: 11px !important;
  }

  /* 通知发送表单 */
  .notification-form .layui-form-label {
    width: 80px !important;
  }

  .notification-form .layui-input-block {
    margin-left: 88px !important;
  }
}

/* ======================================================
   11. 审批流程页面
   ====================================================== */
@media (max-width: 768px) {
  /* 审批步骤横向滚动 */
  .approval-steps,
  .layui-timeline {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .approval-step-item {
    min-width: 100px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* 审批详情 */
  .approval-detail .layui-form-label {
    width: 80px !important;
    font-size: 12px !important;
  }

  .approval-detail .layui-input-block {
    margin-left: 88px !important;
  }
}

/* ======================================================
   12. 文件管理（fileManage.html）
   ====================================================== */
@media (max-width: 768px) {
  .file-card-grid,
  .attachment-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .file-card {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  .layui-upload-drag {
    padding: 16px !important;
    font-size: 13px !important;
  }

  .layui-upload-list li {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

/* ======================================================
   13. 业绩 / 图表页（agentPerformance.html）
   ====================================================== */
@media (max-width: 768px) {
  .chart-box {
    padding: 12px 8px !important;
    margin-bottom: 12px !important;
  }

  /* ECharts canvas 高度 */
  .chart-box > div[id] {
    height: 240px !important;
  }

  /* 绩效统计 tab */
  .layui-tab-title {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .layui-tab-title li {
    font-size: 13px !important;
    padding: 0 14px !important;
    /* 消除移动端点击蓝色高亮遮挡文字 */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: none !important;
  }

  .layui-tab-title li:focus,
  .layui-tab-title li:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ======================================================
   14. 日志 / 操作记录页面
   ====================================================== */
@media (max-width: 768px) {
  /* JSON 详情预览 */
  .log-detail,
  .log-json {
    font-size: 11px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    word-break: break-all !important;
  }

  /* 错误堆栈 */
  .error-stack {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

/* ======================================================
   15. 登录页面（login.html）
   ====================================================== */
@media (max-width: 768px) {
  .login-wrap,
  .login-box,
  .login-container {
    width: 92vw !important;
    max-width: 420px !important;
    padding: 24px 20px !important;
    border-radius: 10px !important;
  }

  .login-logo,
  .login-title {
    font-size: 20px !important;
  }
}

/* ======================================================
   16. 通用按钮 / 工具条
   ====================================================== */
@media (max-width: 768px) {
  /* 顶部工具条按钮紧凑 */
  .layui-card-header .layui-btn,
  .tool-bar .layui-btn,
  .btn-bar .layui-btn {
    padding: 0 10px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  /* 徽标红点位置修正 */
  .layui-badge {
    right: -4px !important;
    top: -2px !important;
  }

  /* select 下拉宽度 */
  .layui-select .layui-input {
    font-size: 13px !important;
  }
}

/* ======================================================
   17. 待反馈中心全局操作按钮（welcome.html）
   ====================================================== */
@media (max-width: 768px) {
  /* tab 标题行与按钮整体换行 */
  .approval-tab-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding-top: 10px !important;
  }

  .approval-header-btns {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .approval-header-btns .layui-btn {
    padding: 0 12px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
  }

  /* approval tab 标题行固定高度防与按钮重叠 */
  .approval-tab-wrap .layui-tab-title {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 统计周期选择栏 */
  .period-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .period-bar .layui-form {
    width: 100% !important;
  }

  .period-bar .layui-input {
    width: 100% !important;
  }
}

/* ======================================================
   18. 界面设置 - 配色方案面板（layuimini-color 弹窗）
   ====================================================== */
@media (max-width: 768px) {
  /* 弹窗全宽 */
  .layuimini-color-theme-panel {
    width: 92vw !important;
    left: 4vw !important;
    right: auto !important;
  }

  /* 配色色块缩小 */
  .layuimini-color .color-content ul li {
    width: 60px !important;
    height: 40px !important;
    margin: 0 10px 10px 0 !important;
  }

  /* 界面设置区域 */
  .interface-setting-section {
    padding: 10px 12px !important;
  }

  .interface-setting-section > div:first-child {
    font-size: 12px !important;
  }

  .interface-setting-section .layui-form-switch {
    margin-top: 0;
  }
}

/* ======================================================
   19. 自定义模块页面（customModule*.html）
   ====================================================== */
@media (max-width: 768px) {
  /* 表单设计器 */
  .custom-module-design .form-builder-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .custom-module-design .field-preview {
    width: 100% !important;
    padding: 10px !important;
    font-size: 12px !important;
  }

  /* 申请表单 */
  .custom-module-fill .layui-form-label {
    width: 80px !important;
  }

  .custom-module-fill .layui-input-block {
    margin-left: 88px !important;
  }

  /* 应用详情 */
  .custom-module-detail .detail-row {
    flex-direction: column !important;
    margin-bottom: 10px !important;
  }

  .custom-module-detail .detail-label {
    width: auto !important;
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }

  .custom-module-detail .detail-value {
    font-size: 13px !important;
  }

  /* 模块卡片网格 */
  .module-card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ======================================================
   20. 数据库备份页面（databaseBackup.html）
   ====================================================== */
@media (max-width: 768px) {
  .backup-list .layui-timeline-item {
    padding: 8px 0 8px 20px !important;
  }

  .backup-list .layui-timeline-title {
    font-size: 12px !important;
  }

  .backup-file-size,
  .backup-file-time {
    font-size: 11px !important;
  }

  .backup-actions .layui-btn {
    padding: 0 10px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
  }
}

/* ======================================================
   21. 签到页面（checkinManage.html / checkinMy.html）
   ====================================================== */
@media (max-width: 768px) {
  .checkin-qrcode-wrap {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
  }

  .checkin-qrcode-wrap canvas,
  .checkin-qrcode-wrap img {
    width: 100% !important;
    height: 100% !important;
  }

  .checkin-stats {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .checkin-stat-item {
    flex: 1 !important;
    font-size: 13px !important;
    padding: 10px !important;
  }

  .checkin-list-item {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

/* ======================================================
   22. 错误日志页面（errorLog.html / operationLog.html）
   ====================================================== */
@media (max-width: 768px) {
  .log-filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .log-filter-bar .layui-inline {
    width: 100% !important;
  }

  .log-filter-bar .layui-input-inline {
    width: 100% !important;
  }

  /* 错误详情堆栈 */
  .error-stack-trace {
    font-size: 10px !important;
    line-height: 1.4 !important;
    padding: 10px !important;
    max-height: 50vh !important;
    overflow: auto !important;
    word-break: break-all !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 日志统计图表 */
  .log-chart-wrap {
    height: 220px !important;
  }
}

/* ======================================================
   23. 通用底部安全区（iOS 刘海屏适配）
   ====================================================== */
@media (max-width: 768px) {
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layui-body {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .layuimini-fab {
      bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }

    .layui-layer-page {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}

/* ======================================================
   24. 打印样式（隐藏不必要的 UI 元素）
   ====================================================== */
@media print {
  .layui-header,
  .layui-side,
  .layuimini-fab,
  .layui-layer-shade,
  .layui-table-tool,
  .layui-table-page,
  .skip-link,
  .ai-panel {
    display: none !important;
  }

  .layui-body {
    left: 0 !important;
    top: 0 !important;
    overflow: visible !important;
  }

  .layuimini-container {
    border: none !important;
    box-shadow: none !important;
  }

  body {
    background: #fff !important;
    margin: 0 !important;
  }
}