/* ============================================================================
   map/app.css · 农情地图专属样式
   ----------------------------------------------------------------------------
   这个 app 的排版范式：**全屏画布 + 三栏浮层**
     左  —— 地块列表（可筛选、可搜索）
     中  —— 地图画布（占满，无滚动）
     右  —— 详情面板（有选中才出现）

   和别的 app 的区别在哪：
     · 页面本身**不滚动**（地图要占满），滚动只发生在侧栏内部
     · 信息以"浮层"压在画布上，而不是平铺在文档流里
     · 没有 .card —— 这里的容器是半透明玻璃面板，让底图透出来
   ========================================================================= */

.map-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

.map-shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 288px 1fr 320px;
  gap: var(--s-3);
  padding: var(--s-3);
  min-height: 0;                 /* 关键：否则 grid 子项不会收缩，地图撑爆页面 */
}

/* ── 通用玻璃面板 ──────────────────────────────────────────── */
.map-side, .map-detail, .map-hud, .map-cmd {
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow);
}

/* ══════════════ 左栏 ══════════════ */
.map-side {
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.ms-hd {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.ms-hd h1 { font-size: var(--t-xl); font-weight: 760; letter-spacing: -.04em; }
.ms-hd > div { flex: 1 1 auto; }
.ms-sub { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.ms-filter { padding: 0 var(--s-4) var(--s-3); }
.ms-filter .domain-filter { width: 100%; justify-content: space-between; }

.ms-search {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-4) var(--s-3);
  padding: 0 var(--s-3);
  background: var(--bg);
  border: 1px solid var(--line2); border-radius: var(--r-sm);
}
.ms-search svg { width: 15px; height: 15px; color: var(--faint); flex: 0 0 auto; }
.ms-search input {
  flex: 1 1 auto; min-height: 38px; padding: 0;
  background: none; border: 0;
}
.ms-search input:focus { box-shadow: none; }

.ms-list { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s-2) var(--s-2); }

.plot-row {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-3);
  text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.plot-row:hover { background: var(--hover); border-color: var(--line); }
.plot-row.on { background: var(--accentSoft); border-color: var(--line-strong); }
.plot-row.hl { box-shadow: inset 3px 0 0 var(--warn); }
.pr-sw { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 2px; }
.pr-main { flex: 1 1 auto; min-width: 0; }
.pr-main b { display: block; font-size: var(--t-md); font-weight: 650; }
.pr-main em {
  display: block; color: var(--faint); font-style: normal;
  font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-rs {
  font-size: var(--t-xs); font-weight: 720;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px; border-radius: var(--r-full);
}
.rs-ok   { color: var(--accent); background: var(--accentSoft); }
.rs-warn { color: var(--warn);   background: var(--warnSoft); }
.rs-bad  { color: var(--danger); background: var(--dangerSoft); }

.ms-demo {
  display: flex; gap: var(--s-2);
  margin: var(--s-2); padding: var(--s-3);
  color: var(--faint); font-size: var(--t-xs); line-height: 1.6;
  background: var(--warnSoft);
  border-top: 1px solid var(--line); border-radius: var(--r-sm);
}
.ms-demo svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--warn); }
.ms-demo b { color: var(--warn); }

/* ══════════════ 中栏：画布 ══════════════ */
.map-stage { position: relative; min-height: 0; border-radius: var(--r-lg); overflow: hidden; }
.cesium-host { position: absolute; inset: 0; background: #0a1410; }

/* 载入遮罩 */
.map-veil {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  transition: opacity var(--dur-slow) var(--ease);
}
.map-veil.gone { opacity: 0; pointer-events: none; }
.veil-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  max-width: 420px; padding: var(--s-6); text-align: center;
}
.veil-inner b { font-size: var(--t-lg); }
.veil-inner span { color: var(--muted); font-size: var(--t-base); line-height: 1.7; }
.veil-inner .dim { color: var(--faint); font-size: var(--t-sm); }
.veil-inner code {
  padding: 1px 5px; color: var(--accent2); background: var(--accentSoft);
  border-radius: 4px; font-family: var(--f-mono); font-size: var(--t-sm);
}
.veil-deg svg { width: 30px; height: 30px; color: var(--warn); }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line2); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 右上统计浮层 */
.map-hud {
  position: absolute; right: var(--s-4); top: var(--s-4);
  width: 264px; padding: var(--s-4);
  animation-delay: 120ms;
}
.hud-hd {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3); color: var(--soft);
  font-size: var(--t-sm); font-weight: 700;
}
.hud-hd svg { width: 15px; height: 15px; color: var(--accent); }
.hud-bars { display: flex; flex-direction: column; gap: 7px; }
.hb { display: grid; grid-template-columns: 42px 1fr 54px; align-items: center; gap: var(--s-2); }
.hb-n { color: var(--muted); font-size: var(--t-sm); }
.hb-t { height: 6px; background: var(--hover); border-radius: var(--r-full); overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease); }
.hb-v { color: var(--faint); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; }
.hud-foot {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--t-xs);
}
.hud-foot span { display: inline-flex; align-items: center; gap: 5px; }
.hud-foot .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* AI 指令条 */
.map-cmd {
  position: absolute;
  /* ★ 居中不要用 left:50% + translateX(-50%)。
     踩过的坑：这个元素同时挂了 .rise 入场动画，而 rise 的关键帧里有
     `transform: none` —— **动画的 transform 会覆盖元素自己的 transform**，
     而且 animation-fill-mode: both 让它永久生效，于是居中位移被吃掉，
     指令条一直贴在左半边的 50% 处（桌面端同样中招，只是不明显）。
     改用左右定位 + margin-inline:auto 居中，不依赖 transform，动画就动不了它。 */
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-5);
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-3);
  width: min(620px, 100%);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  animation-delay: 200ms;
}
.mc-icon { color: var(--accent); flex: 0 0 auto; }
.mc-icon svg { width: 17px; height: 17px; }
.map-cmd input { flex: 1 1 auto; min-height: 40px; padding: 0; background: none; border: 0; }
.map-cmd input:focus { box-shadow: none; }

/* ══════════════ 右栏：详情 ══════════════ */
.map-detail {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-4);
  overflow-y: auto;
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.map-detail.on { opacity: 1; }
.dt-hd { display: flex; align-items: flex-start; gap: var(--s-3); }
.dt-hd > div { flex: 1 1 auto; }
.dt-hd h3 { font-size: var(--t-lg); font-weight: 730; }
.dt-id { color: var(--faint); font-family: var(--f-mono); font-size: var(--t-xs); margin-top: 2px; }
.dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.dt-grid > div { display: flex; flex-direction: column; gap: 3px; }
.dt-grid span { color: var(--faint); font-size: var(--t-xs); }
.dt-grid b { font-size: var(--t-md); font-weight: 660; }
.dt-loc {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--muted); font-size: var(--t-sm);
}
.dt-loc svg { width: 14px; height: 14px; color: var(--accent); }
.dt-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dt-note {
  display: flex; gap: var(--s-2);
  padding: var(--s-3); color: var(--faint); font-size: var(--t-xs); line-height: 1.65;
  background: var(--hover); border-radius: var(--r-sm);
}
.dt-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* ══════════════ Cesium 自带的 UI 要压掉，它和全站风格冲突 ══════════════ */
.cesium-viewer-bottom,
.cesium-viewer-toolbar,
.cesium-widget-credits { display: none !important; }
.cesium-widget canvas { outline: none; }
/* 深色主题下 Cesium 默认白底控件很刺眼 */
.cesium-performanceDisplay-defaultContainer { display: none; }

/* ══════════════ 响应式 ══════════════ */
@media (max-width: 1180px) {
  .map-shell { grid-template-columns: 260px 1fr; }
  .map-detail { display: none; }
  .map-detail.on {
    display: flex; position: absolute; right: var(--s-3); top: calc(var(--topbar-h) + var(--s-3));
    bottom: var(--s-3); width: 300px; z-index: 6;
  }
}
/* ── 手机端（≤760px）────────────────────────────────────────────────
   布局从"三栏并排"改成"上下一条流"，三处关键决定：
     ① **地图排在最前**（order:-1）：这是地图应用，一打开就该看见地图，
        而不是先看一屏列表。
     ② **列表自己滚**（max-height），不要把整页撑长 —— 手机上页面越长，
        地图越难找回来。
     ③ **详情改成底部抽屉**（fixed 到底部）：手机上右侧栏没有位置，
        抽屉是唯一既不遮地图、又能看清内容的形式；关闭按钮已有（#dtClose）。
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .map-body { height: auto; overflow: auto; }
  .map-shell {
    grid-template-columns: 1fr;
    height: auto;
    gap: var(--s-2);
    padding: var(--s-2);
  }
  .map-stage { order: -1; height: 62vh; }
  .map-side { max-height: none; }
  .ms-list { max-height: 36vh; }          /* 列表内部滚动 */
  .ms-hd { padding: var(--s-3) var(--s-3) var(--s-2); }
  .ms-hd h1 { font-size: var(--t-lg); }

  /* 统计浮层从"绝对定位覆盖地图"改成"静态占位"。
     并且**改成两列**：竖排 6 行时浮层有 300px 高，把地图压得只剩一条；
     两列三行只要一半高度，信息一条不少 —— 手机上"看得见地图"比"排得整齐"重要。 */
  .map-hud { position: static; width: auto; margin: var(--s-2); padding: var(--s-3); }
  .hud-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px var(--s-4);
  }
  .hb { min-width: 0; }
  .hud-foot { flex-wrap: wrap; gap: var(--s-3); }

  .map-cmd { bottom: var(--s-2); left: var(--s-2); right: var(--s-2); gap: var(--s-2); }

  /* 详情：底部抽屉 */
  .map-detail { display: none; }
  .map-detail.on {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto;
    max-height: 68vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    z-index: var(--z-overlay);
    padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .38);
  }
}