/* ============================================================================
   全站移动端适配层  mobile.css
   创建：2026-10-21

   为什么要有这个文件：
   主站的 20 个模板都继承 base.html，但此前只有零散的几点移动端规则，
   每个页面各自写一段 <style>，导致同一个问题（表格撑破、输入框缩小、
   按钮点不中、图片溢出）在不同页面上反复出现、修了这页漏那页。
   这里把「所有页面都会遇到的移动端问题」集中成一层，
   由 base.html 和几个独立模板统一引入，改一处所有页生效。

   设计原则：
   1) 全部规则包在 @media 里，桌面端一个像素都不动；
   2) 只处理系统性问题，页面特有的版式仍留在各页自己的 <style> 里；
   3) 用"兜底"而不是"重写"——尽量不覆盖已有的合理样式。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 兜底（不限断点）
   图片/视频/画布不能超出父容器，否则手机上一张 1200px 的图就能让整页左右晃。
   -------------------------------------------------------------------------- */
img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

/* 长英文串、URL、订单号不换行会把窄屏撑破 */
.break-anywhere,
td,
th {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   1. 平板及以下（≤ 820px）
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  /* ---- 1.1 顶栏：从"固定悬浮"改成"粘附"，避免盖住正文 ---- */
  header {
    position: sticky;
    top: 0;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    box-sizing: border-box;
    /* 原来 fixed 时正文靠 .content 的 margin-top:60px 让位；
       粘附后 header 自己占位，正文不能再多留这一块空白 */
  }

  .header-left,
  .header-right {
    float: none;
    width: 100%;
  }

  .header-left {
    /* 导航一行放不下就横向滑动，不换行堆成三大行把首屏挤没 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .header-left::-webkit-scrollbar { display: none; }

  nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
  }

  nav ul li {
    display: inline-flex;
    margin-right: 0;
    flex: 0 0 auto;
  }

  nav ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 6px;
  }

  nav ul li a:active { background: rgba(255, 255, 255, .15); }

  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  header .header-right nav ul li a { min-height: 36px; font-size: 13px; }

  /* header 变成 sticky 后，正文顶部原来给 fixed 留的 60px 要收掉 */
  .content {
    margin-top: 0;
    padding: 16px 14px 32px;
  }

  /* ---- 1.2 输入框一律 16px ---- */
  /* iOS Safari 在 <input> 字号小于 16px 时，聚焦会自动放大整个页面，
     用户点一下输入框，页面就"跳"一下并且关不掉缩放 —— 手机端最烦的体验之一。 */
  input,
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.4;
  }

  /* ---- 1.3 点按目标 ---- */
  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: 44px;
    touch-action: manipulation;    /* 去掉 iOS 上 300ms 点按延迟 */
  }

  /* 复选框/单选框默认只有 13~16px，手指几乎点不到 */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    vertical-align: middle;
  }

  /* flex 子项默认 min-width:auto，内部超宽内容会把整行顶破 */
  .header-left,
  .header-right,
  .content > *,
  .cc-card {
    min-width: 0;
  }

  /* ---- 1.4 表格：横向滑动，不再撑破整页 ---- */
  /* 手机上 8 列的表格必然放不下。让它自己横滑，页面本体不动。
     display:block 把 table 变成可滚动块，内部仍是表格布局。
     width:max-content + min-width:100% 保证窄表铺满、宽表滚动。 */
  table:not(.no-mobile-scroll) {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Bootstrap 已经包了 .table-responsive 的表格别再套一层，否则滚动区重复 */
  .table-responsive > table {
    display: table;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  /* ---- 1.5 常见多列网格在小屏压成单列 ---- */
  .ads-grid-2,
  .ads-grid-3,
  .ads-grid-4,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* ---- 1.6 弹窗/抽屉不超出屏幕 ---- */
  .modal-dialog,
  .modal-content {
    max-width: calc(100vw - 24px);
    margin: 12px auto;
  }

  /* ---- 1.7 分页、按钮组允许换行，不横向溢出 ---- */
  .pagination,
  .btn-group,
  .ads-pagination {
    flex-wrap: wrap;
  }

  /* ---- 1.8 代码块/预格式文本横滑 ---- */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* ---- 1.9 在线表格（5001 端口）----
     .spreadsheet 写死 min-width:800px，在 390px 手机上等于强制横滑两屏。
     放开成 100% 后，列数少时能一屏放下；列多时仍由 .spreadsheet-container
     的 overflow:auto 负责滚动，不会撑破页面。 */
  .spreadsheet { min-width: 100%; }
  .spreadsheet-container { -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   2. 手机（≤ 480px）—— 进一步收紧间距、放大正文
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body {
    /* 正文 15px：手机上一行能放下的字更多，又不至于小到要眯眼 */
    font-size: 15px;
    -webkit-text-size-adjust: 100%;   /* 横屏时防止 Safari 自动放大字体 */
  }

  .content { padding: 12px 12px 28px; }

  header { padding: 6px 8px; }
  nav ul li a { padding: 0 8px; font-size: 13.5px; }

  /* 卡片类容器在小屏去掉过大的内边距，多留内容宽度 */
  .cc-card,
  .outer-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 统计卡从两列压成一列时，数值不要过大导致换行 */
  .ads-stat-card .stat-value { font-size: 22px; }

  /* 表格字号略收，横向滚动的距离更短 */
  table { font-size: 13.5px; }
  th, td { padding: 8px 10px; }

  /* 页脚在手机上左右堆叠更自然 */
  footer p { display: block; margin: 4px 0; }
}

/* ---------------------------------------------------------------------------
   3. 触屏设备专项（不依赖宽度）
   鼠标环境不需要 hover 反馈，触屏上 :hover 会"粘住"。
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  a:hover,
  .cc-card:hover,
  .btn:hover {
    transform: none;   /* 触屏上避免 hover 位移导致点不中 */
  }
}