/* ============================================
   窗口10：全局移动端响应式补全
   - 触控目标 >= 44px
   - 断点 375 / 414 / 768
   - seller 后台侧边栏折叠
   - 表格横向滚动
   引入方式：页面 <link> 本文件（在各站样式之后）
   ============================================ */

/* ---------- 1. 触控目标保底 >= 44px ---------- */
a, button, .btn, [role="button"], input[type="button"], input[type="submit"],
.seller-menu a, .seller-link, .nav-link, .footer-links a {
  min-height: 44px;
  min-width: 44px;
}
/* 文字型小链接保持行内可读，但保证可点高度 */
.footer-links a, .footer-bottom-links a { min-height: 0; line-height: 44px; }

/* ---------- 2. 表格类页面：横向滚动容器 ---------- */
.table-wrap, .table-responsive,
.seller-content table,
.webadmin table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 3. seller 后台：移动端侧边栏折叠 ---------- */
@media (max-width: 768px) {
  .seller-layout { flex-direction: column; }
  .seller-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 240px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1800;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
  }
  .seller-sidebar.open { transform: translateX(0); }
  .seller-main { width: 100%; }
  .seller-header { position: sticky; top: 0; z-index: 900; }
  /* 汉堡触发按钮（若页面已有 .seller-menu-btn 则显示） */
  .seller-menu-btn {
    display: inline-flex !important;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    font-size: 22px; background: none; border: none; cursor: pointer;
  }
  .seller-content { padding: 12px; }
  /* 卡片网格降级为单列 */
  .seller-card-grid, .stat-grid, .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}

@media (max-width: 414px) {
  .seller-card-grid, .stat-grid, .card-grid { grid-template-columns: 1fr 1fr; }
  .seller-header-actions { gap: 6px; }
}

@media (max-width: 375px) {
  .seller-card-grid, .stat-grid, .card-grid { grid-template-columns: 1fr; }
  .seller-content { padding: 10px; }
  h1, .seller-header h1 { font-size: 18px; }
}

/* ---------- 4. 通用容器与栅格在窄屏降级 ---------- */
@media (max-width: 768px) {
  .container, .footer-inner, .page-container { padding-left: 12px; padding-right: 12px; }
  .two-col, .three-col, .four-col { grid-template-columns: 1fr !important; }
}

/* ---------- 5. 悬浮反馈/客服按钮在小屏不遮挡 ---------- */
@media (max-width: 414px) {
  .fbw-fab { right: 12px; bottom: 140px; font-size: 13px; padding: 0 12px; }
  .cs-fab { right: 12px; bottom: 80px; }
}

/* ---------- 6. 后台 webadmin 窄屏 ---------- */
@media (max-width: 768px) {
  .webadmin-sidebar, .admin-sidebar { display: none; }
  .webadmin-main, .admin-main { margin-left: 0 !important; }
}