/* ============================================================
   移动端响应式适配 — 全线批发商管理系统
   涵盖：dashboard / retailer / promoter / supervisor / index
   ============================================================ */

/* ---------- 手机端 (<768px) ---------- */
@media (max-width: 767px) {
  /* ── 全局重置 ── */
  :root {
    --sidebar-w: 0px;
    --content-pad: 14px;
    font-size: 14px;
  }

  body {
    flex-direction: column !important;
    overflow-x: hidden;
  }

  /* ── 侧边栏 → 顶部横向滚动 ── */
  .sidebar {
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0 !important;
    padding: 8px 6px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #ddd);
  }
  .sidebar-logo { display: none; }
  .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .nav-item {
    flex-shrink: 0;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 6px;
    white-space: nowrap;
  }
  .nav-item .nav-icon { display: none; }

  /* ── 主区域 ── */
  .main { margin-left: 0 !important; width: 100% !important; }
  .topbar {
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar h2 { font-size: 15px !important; }
  .topbar-actions { gap: 6px !important; }
  .lang-btns { gap: 2px !important; margin-right: 0 !important; }
  .lang-btn { font-size: 11px !important; padding: 3px 6px !important; }

  .content {
    padding: 14px var(--content-pad, 14px) 20px !important;
    max-width: 100% !important;
  }
  .page-header { margin-bottom: 12px !important; }
  .page-title { font-size: 17px !important; }

  /* ── 表格滑动 ── */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 11px !important; min-width: 600px; }
  th, td { padding: 6px 8px !important; white-space: nowrap; }
  .table-footer { flex-direction: column; gap: 8px; }

  /* ── 卡片全宽 ── */
  .card { padding: 14px !important; margin-bottom: 12px !important; }
  .card h3 { font-size: 13px !important; }
  .stat-card { padding: 12px !important; min-width: 0 !important; }
  .stat-row { flex-wrap: wrap; gap: 8px; }
  .stat-row .stat-card { flex: 1 1 45%; min-width: 140px; }

  /* ── 表单 ── */
  .form-group { gap: 4px !important; }
  .form-row { flex-direction: column !important; gap: 10px !important; }
  .form-row > * { width: 100% !important; }
  .form-select, .form-input { width: 100% !important; max-width: 100% !important; }

  /* ── 按钮加大触摸区 ── */
  .btn { padding: 9px 16px !important; font-size: 13px !important; min-height: 40px; }
  .btn-sm { padding: 6px 10px !important; font-size: 12px !important; min-height: 32px; }
  .btn-icon { min-width: 40px; min-height: 40px; }

  /* ── 弹窗 ── */
  .modal-content {
    width: 94% !important; max-width: 100% !important;
    margin: 10px auto !important; border-radius: 12px !important;
    padding: 16px !important;
    max-height: 90vh; overflow-y: auto;
  }

  /* ── 店铺卡片 / 型号卡片 ── */
  .store-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
  .store-card { padding: 12px !important; }
  .model-header { flex-wrap: wrap; gap: 8px; }
  .model-card { padding: 10px !important; margin-bottom: 8px !important; }

  /* ── Hero banner ── */
  .wh-hero {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  .star-row { flex-wrap: wrap; gap: 8px; }
  .star-card { flex: 1 1 44%; min-width: 130px; padding: 10px !important; }

  /* ── KPI 子标签 ── */
  .sub-tabs {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
  }
  .sub-tab {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* ── 分仓网格 ── */
  .warehouse-grid { grid-template-columns: 1fr !important; }
  .sw-grid { grid-template-columns: 1fr !important; }

  /* ── Chart容器 ── */
  canvas { max-width: 100%; height: auto; }

  /* ── 登录页（index.html） ── */
  .card.login-card {
    width: 90% !important;
    max-width: 400px !important;
    padding: 28px 22px !important;
    border-radius: 14px !important;
  }
  .card.login-card h1 { font-size: 22px !important; }
  .login-form .form-group input { font-size: 16px !important; padding: 12px !important; }

  /* ── 检索栏 ── */
  .search-bar { flex-direction: column !important; gap: 8px !important; }
  .search-bar > * { width: 100% !important; }
  .filter-row { flex-direction: column !important; gap: 6px !important; }
}

/* ---------- 平板 (<1024px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --sidebar-w: 180px; }
  .sidebar { width: 180px !important; }
  .nav-item { font-size: 12px !important; padding: 10px 12px !important; }
  .content { padding: 18px 20px !important; max-width: 100% !important; }
  .stat-row { flex-wrap: wrap; }
  .stat-row .stat-card { flex: 1 1 30%; }
  table { font-size: 12px !important; }
  .store-card { padding: 14px !important; }
  .modal-content { width: 80% !important; max-width: 700px !important; }
}