/* ========================================
   v583：手机端适配二期（≤768px）
   配合 style.css 的 v518 一期（底部导航/表格横滚/弹窗近全屏/统计卡2列）。
   二期补：弹窗内联宽度覆盖、无包装表格横滚、iOS 输入聚焦防缩放、
   触控目标、页头换行、登录页、手机端退出登录入口。
   ======================================== */

/* 手机端专属退出按钮：PC 默认隐藏（侧栏里已有完整退出入口） */
.mobile-logout-btn { display: none; }

@media (max-width: 768px) {
  /* 0) 防误触：下拉到页面顶端时不要触发浏览器下拉刷新（手机上很常见的误操作） */
  body { overscroll-behavior-y: contain; }

  /* 1) 弹窗：App.modal 常传内联 width（如 min(1080px,94vw)），必须 !important 才能压过内联样式 */
  .modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 88vh !important;
  }

  /* 2) 无 .table-wrap 包装的表格横滚兜底（:has 现代手机浏览器均支持，旧机自动跳过不劣化） */
  div:has(> .data-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  div:has(> .data-table) > .data-table { min-width: 720px; }

  /* 3) iOS 聚焦输入框时页面自动放大禁止：表单控件字号不小于 16px */
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea { font-size: 16px !important; }

  /* 4) 触控优化：禁双击缩放；页头/弹窗底部按钮加高好按 */
  button, .btn, .nav-item { touch-action: manipulation; }
  .page-header .btn { min-height: 36px; }
  .modal-footer .btn { min-height: 42px; }

  /* 5) 页头：更紧凑的构图（标题小一号、留白收窄），标题与右侧按钮可换行不溢出 */
  #page-header { flex-wrap: wrap; padding: 14px 14px 8px; }
  #page-header > div { flex-wrap: wrap; }
  #page-header .page-title { font-size: 18px; margin-bottom: 2px; }
  #page-header .page-subtitle { font-size: 12px; }
  #page-header .page-title, #page-header .page-subtitle { word-break: break-word; }

  /* 5b) 内容区留白收窄 + 卡片间距统一，构图不松散 */
  .page-content { padding-left: 12px; padding-right: 12px; }
  .page-content > .card { margin-bottom: 12px; }

  /* 6) 表格长备注/长网址允许断行，防撑破横滚容器 */
  .data-table td { word-break: break-word; }

  /* 7) 登录页：小屏卡片吃满不留白 */
  .login-card {
    width: calc(100vw - 32px);
    max-width: 380px;
    padding: 28px 22px 24px;
  }

  /* 8) 手机端退出登录入口（侧栏隐藏后的唯一登出口），固定在页头右侧 */
  .mobile-logout-btn {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    color: #FC8181;
    border-color: rgba(252, 129, 129, 0.35);
  }
}