/* lingxi-map.css — LayersPanel 浮动控制面板样式 */

.lx-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  /* 2026-07-04: 面板宽度定值 300px (不随内容浮动) */
  width: 300px;
  max-width: none;
  font-size: 0.8rem;
  overflow: hidden;
  /* 2026-06-27: 面板高度自适应（按内容加高） */
  display: flex;
  flex-direction: column;
  /* CSS 默认上限：viewport - 130 (zoom 高 60 + 边距 10 + panel top 10 + buffer 50) */
  /* JS (updatePanelMaxHeight) 会按 zoom 实际位置动态覆盖 */
  max-height: calc(100vh - 130px);
}

.lx-panel-header {
  background: #3c6e8a;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.lx-panel-title {
  font-weight: 600;
  font-size: 0.82rem;
}

.lx-panel-toggle {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.8;
}

.lx-panel-body {
  padding: 10px 12px;
  /* 2026-06-27: 取消硬编码 400px 限制，改用 flex 自适应 */
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* 区块标题 */
.lx-section-title {
  font-weight: 600;
  font-size: 0.82rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  margin-top: 10px;
}

/* 2026-07-04 V3.6 P4: 可折叠区块头部 (▸/▾ 箭头 + 标题) */
.lx-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  margin-top: 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  user-select: none;
  transition: background 0.15s;
}
.lx-section-header:hover {
  background: rgba(60, 110, 138, 0.06);
}
.lx-section-header .lx-section-arrow {
  font-size: 0.72rem;
  color: #888;
  width: 12px;
  display: inline-block;
  text-align: center;
  transition: transform 0.15s;
}
.lx-section-header .lx-section-title {
  margin: 0;
  line-height: 1.2;
}
.lx-section-content {
  padding: 0;
  margin: 0;
}

/* 底图单选 */
.lx-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lx-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 0;
  font-size: 0.82rem;
  color: #333;
}

.lx-radio input[type="radio"] {
  cursor: pointer;
  accent-color: #3c6e8a;
}

/* 底图行：标题和单选按钮一行 */
.lx-base-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.lx-base-row .lx-section-title {
  margin: 0;
  line-height: 1;
}

.lx-radio:hover {
  color: #3c6e8a;
}

/* 无人机瓦片区 */
.lx-aerial-section {
  margin-top: 6px;
}

.lx-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #333;
  background: #fff;
}

/* 分隔线 */
.lx-divider {
  height: 1px;
  background: #eee;
  margin: 10px 0;
}

/* 矢量层列表 */
.lx-layer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lx-layer-item {
  display: flex;
  align-items: center;
}

.lx-layer-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  color: #333;
  width: 100%;
}

.lx-layer-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: #3c6e8a;
}

.lx-layer-item:hover label {
  color: #3c6e8a;
}

.lx-empty-hint {
  color: #aaa;
  font-size: 0.78rem;
  font-style: italic;
  padding: 4px 0;
}
/* 无人机瓦片多选区域 */
.lx-aerial-areas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lx-area-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #eee;
}

.lx-area-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
}

.lx-area-label input[type="checkbox"] {
  cursor: pointer;
  accent-color: #3c6e8a;
}

.lx-area-name {
  color: #3c6e8a;
}

.lx-aerial-sel {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.78rem;
  color: #333;
  padding: 3px 6px;
  width: 100%;
}

.lx-aerial-sel:disabled {
  opacity: 0.5;
  background: #f0f0f0;
}

/* 矢量筛选弹窗 */
.lx-vector-popup {
  position: fixed;
  right: 0;
  top: 0;
  width: 280px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 1001;
  font-size: 0.8rem;
  overflow: hidden;
}

.lx-vector-popup-header {
  background: #3c6e8a;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lx-vector-popup-title {
  font-weight: 600;
  font-size: 0.82rem;
}

.lx-vector-popup-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.lx-vector-popup-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lx-vp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-vp-row label {
  font-weight: 600;
  color: #666;
  font-size: 0.75rem;
  min-width: 60px;
  flex-shrink: 0;
}

.lx-vp-row > span {
  color: #333;
  font-size: 0.8rem;
}

.lx-vp-row .lx-select {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.78rem;
  color: #333;
}

.lx-vp-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #eee;
}

.lx-btn {
  padding: 6px 14px;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  background: #fff;
  flex: 1;
  text-align: center;
}

.lx-btn:hover { background: #f0f0f0; }

.lx-btn-primary {
  background: #3c6e8a;
  color: #fff;
  border-color: #3c6e8a;
}

.lx-btn-primary:hover { background: #2d5470; }

.lx-vp-section {
  margin-bottom: 6px;
}

.lx-vp-checkboxes {
  max-height: 80px;
}

/* 筛选按钮 */
.lx-vector-filter-btn {
  /* 2026-07-04: 筛选按钮宽度 auto (最小宽度让出空间给下拉) */
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid #3c6e8a;
  border-radius: 4px;
  background: #eef4f8;
  color: #3c6e8a;
  font-size: 0.72rem;
  cursor: pointer;
  margin-top: 0;
}

.lx-vector-filter-btn:hover { background: #dde8f0; }

/* 区域行头部（checkbox+名称+下拉+筛选按钮 一行） */
.lx-area-row-header {
  /* 2026-07-04 21:14: 区名列改 minmax(112px, auto) 防'西塘河（省保）'7字换行成两行
     下拉列改 1fr + ellipsis, 期次名长也能容下 */
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.lx-area-row-header .lx-area-label {
  /* 2026-07-04 21:14: 区名宽 = 内容自然宽 (中文 1em/字 + checkbox 14px + gap 4px)
     white-space: nowrap 强制单行, overflow+ellipsis 防更长名被切 */
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lx-area-row-header .lx-aerial-sel {
  /* 2026-07-04 21:14: 下拉列改 1fr, 期次名长 ellipsis 不撑破 */
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lx-area-row-header .lx-aerial-sel:disabled {
  opacity: 0.5;
  background: #f5f5f5;
}

/* 弹窗新样式 */
.lx-vp-section {
  margin-bottom: 8px;
}

.lx-vp-section-title {
  font-weight: 600;
  color: #666;
  font-size: 0.73rem;
  margin-bottom: 4px;
}

.lx-vp-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 130px;
  overflow-y: auto;
  padding: 4px 0;
}

.lx-vp-cb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #333;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}

.lx-vp-cb:hover {
  background: #f0f0f0;
}

.lx-vp-cb input[type="checkbox"] {
  flex-shrink: 0;
}

.lx-vp-loading, .lx-vp-empty-hint {
  font-size: 0.73rem;
  color: #999;
  padding: 4px 0;
}


/* 静态矢量列表 */
.lx-vector-static-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.lx-vector-static-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #333;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}

.lx-vector-static-item label:hover {
  background: #f0f0f0;
}

.lx-vector-static-item input[type="checkbox"] {
  flex-shrink: 0;
}

/* 矢量筛选弹窗计数 */
.lx-vp-count {
  font-size: 0.75rem;
  color: #888;
  text-align: center;
  padding: 4px 0;
}

/* 矢量筛选弹窗计数 - 底部统计行 */
.lx-vp-count {
  font-size: 0.75rem;
  color: #888;
  text-align: center;
  padding: 6px 0 2px;
  border-top: 1px solid #eee;
  margin-top: 4px;
  background: #fafafa;
  border-radius: 0 0 8px 8px;
}

/* 矢量筛选弹窗 - 双列布局 */
.lx-vp-two-col {
  display: flex;
  gap: 12px;
}
.lx-vp-two-col .lx-vp-section {
  flex: 1;
  min-width: 0;
}
.lx-vp-two-col .lx-vp-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

/* ============================================================ */
/* 2026-07-22: 项目 marker (geo-feature-detail.html 新功能) */
/* ============================================================ */
.lx-project-marker { background: transparent !important; border: none !important; }
.lx-project-marker .lx-project-pin {
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transition: transform 0.15s, filter 0.15s;
  border-radius: 50%;
}
.lx-project-marker .lx-project-pin:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
/* 已绑项目: 绿色圆圈 + 加粗边框 (D2 + D5 反向高亮) */
.lx-project-bound .lx-project-pin {
  background: rgba(46, 125, 50, 0.15);
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 1px rgba(46, 125, 50, 0.3);
}
.lx-project-bound .lx-project-pin:hover { background: rgba(46, 125, 50, 0.25); }
/* 未绑项目: 蓝色圆圈 */
.lx-project-unbound .lx-project-pin {
  background: rgba(25, 118, 210, 0.12);
  border: 2px solid #1976d2;
  box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.25);
}
.lx-project-unbound .lx-project-pin:hover { background: rgba(25, 118, 210, 0.22); }
/* D5 反向高亮: 列表切换 feature 时, 已绑项目 marker 边框加粗 2px */
.lx-project-highlight .lx-project-pin {
  border-width: 4px !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.5), 0 0 12px rgba(46, 125, 50, 0.6);
  transform: scale(1.15);
}