/* ==========================================================================
   小区地图（腾讯地图 GL JS）2026-10-06
   ========================================================================== */

/* ==========================================================================
   小区表单内的「地图选点」入口（2026-10-06）
   选点面板 z-index 400 > formModal 100 → 会正确盖在表单之上，可直接点地图
   ========================================================================== */
.cm-pick-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px dashed #c7d2e0;
  border-radius: 8px;
  background: #f8fafc;
}
.cm-pick-entry .btn {
  flex-shrink: 0;
}
.cm-pick-tip {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ==========================================================================
   小区管理页布局（2026-10-06 重排）
   顺序：顶部工具栏 → 地图 → 小区列表 → 底部折叠说明
   ========================================================================== */
.cm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cm-head-l {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.cm-head-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
}
.cm-head-stat {
  font-size: 12.5px;
  color: var(--text-3);
}
.cm-head-stat b {
  color: var(--text-1);
  font-weight: 600;
}
.cm-stat-warn {
  color: #b45309;
}
.cm-head-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 列表卡：给个锚点滚动 + 顶部分隔 */
.cm-list-card {
  margin-top: 14px;
  scroll-margin-top: 12px;
}
.cm-list-card .card-title {
  margin-bottom: 10px;
}

/* 底部说明区：默认收起，查阅型内容不占首屏 */
.cm-notes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-note {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.cm-note-h {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
}
.cm-note-h:hover {
  background: #fafbfd;
}
.cm-note-arrow {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}
.cm-note-b {
  padding: 0 14px 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
  border-top: 1px solid #f0f1f3;
  padding-top: 10px;
}
.cm-note-b b {
  color: var(--text-1);
}

/* ==========================================================================
   模拟底图（腾讯地图 key 未配置 / SDK 加载失败时的兜底）
   🔴 2026-10-06 教训：原来这里只有一句失败文案，视觉上等于「地图看不到」。
      现在画一张示意底图（街区 + 干道 + 水系 + 经纬网），让标记与选点照常可用。
      合规：纯 CSS/DOM 绘制，不引用任何地图瓦片、不请求第三方地图服务。
   ========================================================================== */
.mock {
  position: relative;
  overflow: hidden;
  background: #eef3e8;
}
.mock .mock-land {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 15%, #f2f7ec 0%, #e8f0e0 45%, #dfeada 100%);
}
.mock .mock-fx,
.mock .mock-grid {
  position: absolute;
  inset: 0;
}
.mock .mock-fx { z-index: 2; }
.mock .mock-grid { z-index: 3; }

.mock .mock-block {
  position: absolute;
  border-radius: 3px;
  background: #e2e9d6;
  border: 1px solid #d3ddc4;
}
.mock .mock-road {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1px #e0dccf;
}
.mock .mock-water {
  position: absolute;
  border-radius: 40px;
  background: #cfe3f2;
  opacity: 0.9;
}
.mock .mock-gridline {
  position: absolute;
  background: #9fb8a6;
  opacity: 0.55;
}
.mock .mock-gridline.v { width: 1px; }
.mock .mock-gridline.h { height: 1px; }
.mock .mock-gridlabel {
  position: absolute;
  font-size: 10.5px;
  color: #6b8a72;
  background: rgba(255, 255, 255, 0.72);
  padding: 0 3px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-mono, monospace);
}
.mock .mock-note {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px dashed #9fb8a6;
  background: rgba(255, 255, 255, 0.88);
  color: #5c7a66;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
}

/* 模拟底图上的标记（与演示页一致） */
.mock .flag {
  position: absolute;
  z-index: 4;
  cursor: pointer;
  line-height: 0;
}
.mock .flag img { display: block; }
.mock .flag .pin-tip {
  position: absolute;
  /* 🔴 旗子 2026-10-06 从 28×34 放大到 40×48，tooltip 偏移同步加大，
     否则会压在旗面上看不清。left 对齐旗杆右侧，top 略高于旗顶。 */
  left: 20px;
  top: -6px;
  padding: 3px 7px;
  border-radius: 4px;
  background: #111827;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.mock .flag:hover .pin-tip { opacity: 1; }

/* ---- 页面内的总览地图 ---- */
.cm-map-block {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.cm-map-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fafbfd;
}

.cm-map-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}

.cm-map-hint {
  font-size: 12px;
  color: var(--text-3);
}

/* 🔴 容器高度由 JS 设定（ensureSize），这里给出最小值兜底。
   高度为 0 / auto 时腾讯地图不会渲染，且不报错——只是空白，
   很容易被误判成「没有小区」。 */
/* 🔴 2026-10-07：同 .map-pick-map，不要写死 min-height。
   JS `ensureSize(el, 680, 120, 360)` 已按视口算出实际高度并写 inline style，
   CSS 的 min-height 会与之打架（视口矮时把容器又撑回去 → 页面出现整段空白）。 */
.cm-map {
  width: 100%;
  min-height: 360px;
  max-height: calc(100vh - 160px);
}

/* 点标记后展开的详情条 */
.cm-map-detail {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: #fbfcfe;
}

.cm-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
}

.cm-detail-row + .cm-detail-row {
  margin-top: 6px;
}

.cm-detail-name {
  font-weight: 600;
  color: var(--text-1);
}

.cm-detail-meta {
  color: var(--text-3);
  font-size: 12px;
}

.cm-detail-sub {
  font-size: 12px;
  color: var(--text-3);
}

/* 表格行 hover 提示可点（点了会在地图上定位） */
tr[data-focus]:hover {
  background: #f5f8ff;
  cursor: pointer;
}

/* ---- 地图不可用时的降级提示 ---- */
/* 🔴 必须明确告诉用户「为什么空白」+「功能不受影响」，
   否则会以为是没有小区数据。 */
.map-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 180px;
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  background: #fafbfd;
}

.map-fallback-icon {
  font-size: 26px;
}

.map-fallback-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}

.map-fallback-text {
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 420px;
}

.map-fallback-sub {
  color: var(--text-3);
  opacity: 0.8;
}

/* ---- 地图选点弹层 ---- */
.map-pick-mask {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.45);
}

.map-pick-panel {
  width: min(720px, 100%);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  /* 🔴 2026-10-07：与 .modal 同一问题（矮窗口下底部按钮点不到）。
     面板整体不超视口，只有中间地图区滚动，头部（搜索）与底部（按钮）常驻。 */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.map-pick-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  /* 🔴 永不压缩/裁剪（矮窗口下标题与 × 必须一直可见可点） */
  flex: 0 0 auto;
}

.map-pick-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}

.map-pick-desc {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.6;
}

.map-pick-desc strong {
  color: var(--brand);
}

.map-pick-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.map-pick-close:hover {
  background: #f2f4f7;
  color: var(--text-1);
}

/* 选点面板顶部的搜索框（2026-10-06：支持输入小区名称/地址搜索定位） */
.map-pick-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fafbfd;
  flex: 0 0 auto;
}
.map-pick-search .input {
  flex: 1;
  min-width: 0;
}
.map-pick-search .btn {
  flex-shrink: 0;
}

/* 🔴 本地小区搜索命中列表（2026-10-07）。
   搜索已有小区走本地匹配，不消耗腾讯地图额度 —— 这是主路径。 */
.map-pick-hits {
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: #f6f8ff;
  font-size: 12.5px;
  color: var(--text-3);
  max-height: 132px;
  overflow-y: auto;
  flex: 0 0 auto;
}
.map-pick-hits[hidden] {
  display: none;
}
.map-pick-hits b {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-2);
}
.map-pick-hit {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 9px;
  margin-bottom: 4px;
  border: 1px solid #d9e0f5;
  border-radius: 5px;
  background: #fff;
  color: var(--text-1);
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
}
.map-pick-hit:hover {
  border-color: var(--brand, #2b6cf6);
  background: #f2f6ff;
}

/* 🔴 小区表单内的「地图选点」入口（2026-10-06 加字段时漏了样式，
   导致按钮没有任何布局，看起来像一块贴上去的杂色块）。
   注意：宽度会被 .form-grid 的两列栅格约束（span-2 占满整行），
   之前没设 width:100% 时按钮只按内容宽，右侧留下大片空白。 */
.cm-pick-entry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed #c8d4ea;
  border-radius: 8px;
  background: #f7f9fd;
}
.cm-pick-entry .btn {
  flex-shrink: 0;
}
.cm-pick-tip {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* 🔴 表单里「custom」字段没有 key，会渲染一个空的 field-label。
   留着会出现一小段空白、视觉上像错位 —— 直接隐藏。 */
.form-grid .field > .field-label:empty {
  display: none;
}

/* 🔴 2026-10-07 高度策略（三层，缺一不可）：
 *   ① JS `ensureSize(el, 480, 260, 240)` 按视口算出**实际高度**（主要生效点，
 *      同时写 inline style，优先级高于这里的 CSS）
 *   ② CSS `max-height: calc(100vh - 260px)` 兜底
 *   ③ 面板本身 `max-height: calc(100vh - 48px)` + flex 列布局，
 *      头部（搜索框）与底部（按钮）`flex: 0 0 auto` **永不裁掉**
 * ⚠️ **这里故意不写 min-height** —— min-height 会与 JS 的 clamp 打架：
 *    视口 560 时 JS 算 240，但 min-height:480 会把容器又撑回480，
 *    底部按钮照样被顶出视口。 */
.map-pick-map {
  width: 100%;
  max-height: calc(100vh - 260px);
  flex: 1 1 auto;
}

.map-pick-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #fafbfd;
  /* 🔴 底部按钮永不裁剪 —— 矮窗口下「确定位置/跳过」必须一直可点 */
  flex: 0 0 auto;
}

.map-pick-coord {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-pick-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}