/* ============================================================
   智位小猿 CRM · 独立页面移动端增强（响应式 + 简约化）
   适用：operations-map / ecosystem-map / merchant_square /
        charging_pile / parking_market 等独立 HTML
   零侵入：仅外链引用，不改动页面原有节点。
   断点：≤820px（与主体 SPA 一致） / ≤480px 精修
   ============================================================ */

/* ---------- 基础重置：杜绝横向溢出 ---------- */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- 移动端基础排版（简约化：放宽行距、克制字号） ---------- */
@media (max-width: 820px) {
  body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    padding: 0;
  }

  /* 主容器：取消固定宽度，改为满宽 + 安全内边距 */
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px 12px 96px !important;   /* 底部留白给浮动按钮 */
  }

  /* 头部标题区：收紧间距、字号收敛 */
  header, .hd {
    padding: 12px 4px !important;
  }
  header h1, .hd h1 {
    font-size: 19px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
  }
  header p, .slog, .hd .slog {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px !important;
  }
  .stamp, .chip, .section-label {
    font-size: 11px !important;
  }

  /* 头部行 / 搜索 / 快捷栏：纵向堆叠、可换行 */
  .hd .row,
  .search,
  .quickbar,
  .navchips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .hd .row > div { width: 100% !important; }

  /* 搜索框与按钮：满宽、≥44px 触控区 */
  .search input,
  #kw,
  input[type="text"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;   /* 防 iOS 聚焦缩放 */
    padding: 10px 12px !important;
    margin: 0 !important;
  }
  .search { margin-bottom: 8px !important; }

  /* 所有行动按钮：放大可点区域、自动换行、不塌成一行 */
  .qbtn, .pub, .mapbtn, .money, .leads-btn, .help-btn,
  button, .btn {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
  }
  .quickbar .qbtn { flex: 1 1 30% !important; }

  /* 卡片：满宽、轻阴影、内边距收敛 */
  .card, .panel, .box, .rec-body, .feat-grid, .how-steps {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  }
  .two, .feat-grid, .how-steps, .rec-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 图例 / 标签：自动换行 */
  .legend, .navchips, .chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .chip, .legend span {
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }

  /* 图片：等比缩放（排除 leaflet 瓦片，避免地图错位） */
  img { max-width: 100% !important; }
  .leaflet-container img { max-width: none !important; }

  /* 地图容器：满宽 + 保证可见高度 */
  .leaflet-container,
  [id*="map"], .map {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 320px !important;
  }
  .leaflet-container { height: 62vh !important; min-height: 320px !important; }

  /* 表格：窄屏允许横向滚动，单元格紧凑、可断词 */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  td, th {
    padding: 8px 6px !important;
    font-size: 13px !important;
    word-break: break-word !important;
  }
  .table-scroll, [class*="table"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 弹层 / 模态：移动端改为底部抽屉式（近似全屏） */
  [class*="modal"], [class*="dialog"], [class*="popup"],
  [class*="overlay"], [class*="sheet"], [class*="panel"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  [class*="modal"][style*="position:fixed"],
  [class*="dialog"][style*="position:fixed"] {
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* 浮动召唤按钮：贴边 + 安全区，避免被圆角屏遮挡 */
  .main-call, .card-call, [class*="call"] {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------- ≤480px 精修 ---------- */
@media (max-width: 480px) {
  header h1, .hd h1 { font-size: 17px !important; }
  .quickbar .qbtn { flex: 1 1 45% !important; font-size: 12px !important; padding: 9px 6px !important; }
  .wrap { padding: 10px 10px 92px !important; }
  .leaflet-container { height: 56vh !important; }
}