/* ============================================================
   mobile-base.css — sinpop 全站移动端适配基座 v1.0
   引用方式: <link rel="stylesheet" href="/static/css/mobile-base.css">
   ============================================================ */

/* --- 1. 全局盒模型修正 --- */
*, *::before, *::after { box-sizing: border-box; }

/* --- 2. 根字体响应式 --- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* --- 3. 图片/视频/画布自适应 --- */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* --- 4. 表格横滚容器 --- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}
.table-responsive table {
  min-width: 600px;
  white-space: nowrap;
}

/* --- 5. 触摸友好 --- */
button, .btn, [role="button"], a.button,
input[type="submit"], input[type="button"] {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
input, select, textarea {
  font-size: 16px; /* 防止iOS缩放 */
}

/* --- 6. 通用容器 --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --- 7. PC/移动端显隐 --- */
.pc-only { display: block; }
.mobile-only { display: none; }

/* ========== 平板断点 <=768px ========== */
@media (max-width: 768px) {
  html { font-size: 14px; }

  .container { padding: 0 12px; }

  /* 弹性容器列方向 */
  .flex-col-mobile {
    flex-direction: column !important;
  }

  /* 通用栅格折叠 */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* 布局间距调整 */
  .gap-sm-mobile { gap: 8px !important; }
  .gap-md-mobile { gap: 12px !important; }

  /* 显隐切换 */
  .pc-only { display: none !important; }
  .mobile-only { display: block; }

  /* 标题缩放 */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }

  /* 模态框全屏化 */
  .modal-content, .dialog, .popup {
    width: 95vw !important;
    max-height: 90vh !important;
    margin: 2.5vw auto !important;
    border-radius: 12px !important;
  }

  /* 侧边栏/导航 */
  .sidebar { display: none; }
  .sidebar.mobile-open { display: block; }

  /* 卡片间距 */
  .card, .panel {
    margin-bottom: 12px;
    padding: 12px;
  }

  /* 输入框全宽 */
  input[type="text"], input[type="date"],
  input[type="number"], input[type="email"],
  input[type="tel"], select, textarea {
    width: 100%;
    max-width: 100%;
  }

  /* 表单行竖排 */
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  .form-row > * {
    width: 100%;
  }
}

/* ========== 手机断点 <=480px ========== */
@media (max-width: 480px) {
  html { font-size: 13px; }

  .grid-4 { grid-template-columns: 1fr !important; }

  .container { padding: 0 10px; }

  /* 按钮全宽 */
  .btn-block-mobile {
    display: block;
    width: 100%;
  }

  /* 隐藏次要内容 */
  .hide-on-mobile { display: none !important; }

  /* 弹窗 */
  .modal-content, .dialog, .popup {
    width: 98vw !important;
    margin: 1vw auto !important;
    border-radius: 8px !important;
  }
}

/* ========== 桌面恢复 (>=769px) ========== */
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
  .pc-only { display: block; }
}