/* ============================================================
 * mobile.css — 全局移动端友好样式
 * 适用：所有根目录 HTML 页面
 * 设计原则：mobile-first，仅在 < 768px 时收紧，超出后无副作用
 * 兼容性：现代浏览器 + iOS Safari 14+ + Chrome Android
 * ============================================================ */

/* --- 1. 基础修正：禁止 iOS 横屏字号自动放大、保留 pinch-zoom --- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  /* 主字号 >= 16px 避免 iOS Safari 在 input focus 时强制放大 */
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;          /* 防止子元素溢出触发横向滚动 */
}

/* --- 2. 触控目标：所有可点击元素 >= 44x44 (Apple HIG / WCAG 2.5.5) --- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
[class*="btn-"],
a.button,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
  /* 横向 padding 让窄按钮在视觉上仍是按钮而不是点 */
  padding-block: max(0.5rem, env(safe-area-inset-top, 0));
  touch-action: manipulation;  /* 禁止双击放大、消除 300ms 延迟 */
}

/* --- 3. 表单输入：16px 字号阻止 iOS 强制 zoom on focus --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  font-size: 16px;
  min-height: 44px;
  /* iOS 上避免在输入框被 sticky 工具栏遮挡 */
  position: relative;
  z-index: 1;
}

/* --- 4. 表格：移动端横向滚动而不是强行压缩列宽 --- */
table {
  width: 100%;
  border-collapse: collapse;
}
.table-scroll,
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 让用户清楚知道可以横滑 */
  overscroll-behavior-x: contain;
}
.table-scroll table,
.table-responsive table {
  min-width: 480px;            /* 表格内部至少 480px，外层滚动 */
}

/* --- 5. 移动端断点 (<= 768px) --- */
@media (max-width: 768px) {
  /* 5.1 字号阶梯收紧 */
  h1, .h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.25; }
  h2, .h2 { font-size: clamp(1.25rem, 4vw, 1.6rem) !important; line-height: 1.3; }
  h3, .h3 { font-size: clamp(1.1rem, 3.5vw, 1.35rem) !important; }
  h4, .h4 { font-size: 1.05rem !important; }

  /* 5.2 容器 / 主体左右内边距 */
  body, main, .container, .wrapper, .main-content, .app-shell, .page {
    padding-left: max(0.6rem, env(safe-area-inset-left, 0)) !important;
    padding-right: max(0.6rem, env(safe-area-inset-right, 0)) !important;
  }

  /* 5.3 flex 横向 → 纵向 */
  .flex-row-md,
  [class*="md:flex-row"],
  .row { flex-direction: column !important; }

  /* 5.4 网格：>=2 列折叠为单列 */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  [class*="md:grid-cols-2"],
  [class*="md:grid-cols-3"],
  [class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* 5.5 桌面专用：隐藏 */
  .desktop-only,
  .hidden-mobile-landscape,
  [class*="md:hidden"]:not([class*="sm:inline"]) {
    display: none !important;
  }

  /* 5.6 移动专用：显示（默认桌面隐藏） */
  .mobile-only,
  [class*="md:hidden"][class*="block"] {
    display: block !important;
  }

  /* 5.7 modal / drawer 适配：全屏 sheet 而不是悬浮框 */
  .modal,
  .modal-content,
  [class*="modal-content"],
  [role="dialog"] {
    margin: 0 !important;
    padding: 1rem !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    /* 顶部留出安全区 */
    padding-top: max(1rem, env(safe-area-inset-top, 0)) !important;
  }

  /* 5.8 固定宽度组件：解除最小宽度限制 */
  [style*="min-width: 200"],
  [style*="min-width: 300"],
  [style*="min-width: 400"],
  .stat-card,
  .metric-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 5.9 模态/抽屉的遮罩 */
  .modal-backdrop,
  [class*="backdrop"] {
    padding: 0 !important;
  }
}

/* --- 6. 极窄屏 (<= 480px)：进一步收紧 --- */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .hide-on-tiny { display: none !important; }
  /* 横向 padding 减半 */
  .px-6, .px-8 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .py-6, .py-8 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
}

/* --- 7. 横屏手机 / 小平板：调整大间距 --- */
@media (min-width: 481px) and (max-width: 768px) {
  /* 保留部分横向布局但收紧间距 */
  .gap-8, .gap-6 { gap: 0.75rem !important; }
}

/* --- 8. 打印：清理 --- */
@media print {
  .no-print, .sidebar, nav, button { display: none !important; }
}

/* --- 9. 减弱动效：尊重 prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 10. 减少蓝色高亮（iOS Safari 点击时的灰底） --- */
* {
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* --- 11. 主页面常见的 fixed/absolute 元素：在 < 768px 时不要脱离视口 --- */
@media (max-width: 768px) {
  [style*="position: fixed"][style*="right: 20"],
  [style*="position:fixed"][style*="right:20"] {
    right: 0.5rem !important;
    left: auto !important;
    max-width: calc(100vw - 1rem) !important;
  }
}

/* --- 12. 移动端可滚动横向导航条（针对主导航） --- */
.scroll-x {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.25rem;
}
.scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* --- 13. 常见内联硬编码模式：在 < 768px 时全部清零 --- */
@media (max-width: 768px) {
  /* 各种内联 min-width / 固定宽度卡片 */
  [style*="min-width: 200px"],
  [style*="min-width: 250px"],
  [style*="min-width: 300px"],
  [style*="min-width: 350px"],
  [style*="min-width: 400px"],
  [style*="min-width: 500px"] {
    min-width: 0 !important;
  }
  /* 内联 width: NNpx（数字 px） */
  [style*="width: 200px"],
  [style*="width: 250px"],
  [style*="width: 300px"],
  [style*="width: 400px"],
  [style*="width: 500px"],
  [style*="width: 600px"],
  [style*="width: 800px"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 内联 display: flex 横向 → 纵向（在没有 lg: 响应式前缀的场景） */
  [style*="display: flex"][style*="justify-content: space-between"]:not([class*="lg:flex-row"]) {
    flex-wrap: wrap;
  }
  /* 大字号收紧 */
  [style*="font-size: 48"],
  [style*="font-size: 56"],
  [style*="font-size: 64"] {
    font-size: 2rem !important;
  }
  [style*="font-size: 32"],
  [style*="font-size: 36"],
  [style*="font-size: 40"] {
    font-size: 1.5rem !important;
  }
  /* 巨间距收紧 */
  [style*="padding: 25px"],
  [style*="padding: 30px"],
  [style*="padding: 40px"] {
    padding: 1rem !important;
  }
  [style*="margin: 25px"],
  [style*="margin: 30px"] {
    margin: 0.75rem !important;
  }
}

/* --- 14. 通知 / Toast：移动端全宽 --- */
@media (max-width: 768px) {
  [class*="toast"],
  [class*="notification"],
  [class*="alert"]:not([role="alert"]) {
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* --- 15. sticky/fixed 顶部 header：在 iOS 上避免被 notch 遮挡 --- */
@supports (padding: max(0px)) {
  .sticky, [class*="sticky-top"], header.sticky {
    padding-top: env(safe-area-inset-top);
  }
}

/* --- 16. 防止主页面在 iOS Safari 上输入时被工具栏遮挡 --- */
@media (max-width: 768px) {
  html {
    /* 当用户聚焦输入时让浏览器自动滚动到输入框 */
    scroll-behavior: smooth;
  }
}