/**
 * WebGIS 样式表 - style.css v13
 * =========================
 * 浅蓝白配色 + 经典按钮色 + 移动端响应式
 * 导航栏：浅蓝 #5b9bd5，面板：白色 #fff
 * 按钮：蓝 #1890ff / 绿 #52c41a / 红 #ff4d4f（最常见）
 */

/* ==================== 全局重置 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== CSS 变量 ==================== */
:root {
  --nav-bg: #5b9bd5;
  --nav-height: 48px;
  --sidebar-width: 340px;
  --toolbox-width: 300px;   /* 工具箱展开宽度（窄于图层面板，桌面端用，移动端随断点覆盖） */

  --primary: #0091ff;
  --primary-hover: #007ad9;
  --primary-light: #e6f7ff;

  /* 面板标题：浅色低饱和，与蓝色主调协调 */
  --title-bg: #eef2f6;
  --title-fg: #5b6b7b;

  --green: #52c41a;
  --green-hover: #389e0d;
  --green-light: #f6ffed;

  --red: #ff4d4f;
  --red-light: #fff2f0;

  --orange: #faad14;

  --surface: #f0f2f5;
  --surface-card: #ffffff;
  --surface-hover: #f5f7fa;
  --surface-active: #e8ecf1;

  --border: #d9d9d9;
  --border-light: #f0f0f0;

  --text: #262626;
  --text-secondary: #595959;
  --text-muted: #8c8c8c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --transition: 0.2s ease;

  --touch-min: 44px;
}

/* ==================== 导航栏 ==================== */
.navbar {
  background: #0091ff !important;
  height: var(--nav-height);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  padding: 0 14px !important;
  flex-shrink: 0;
}

.navbar-brand {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-brand i {
  color: rgba(255,255,255,0.9) !important;
  font-size: 16px;
}

/* ==================== 地图类型自定义下拉组件（浅蓝白配色，与全站协调） ==================== */
.map-type-dropdown {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

/* 收起态：白色药丸按钮，蓝字(#0091ff) + 浅灰描边 */
.map-type-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 12px;
  border: 1px solid var(--border, #d9d9d9);
  border-radius: 16px;
  background-color: #ffffff;
  color: var(--primary, #0091ff);
  cursor: pointer;
  max-width: 160px;
  white-space: nowrap;
  transition: background-color var(--transition, 0.2s), border-color var(--transition, 0.2s);
}

.map-type-trigger:hover {
  background-color: #f5f7fa;
  color: var(--primary, #0091ff);
}

.map-type-trigger:focus-visible {
  outline: none;
  border-color: var(--border, #d9d9d9);
  box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.2);
}

.map-type-trigger-icon {
  font-size: 13px;
  color: var(--primary, #0091ff);
  flex-shrink: 0;
}

.map-type-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--primary, #0091ff);
}

.map-type-trigger-caret {
  font-size: 10px;
  color: var(--primary, #0091ff);
  flex-shrink: 0;
  transition: transform var(--transition, 0.2s);
}

.map-type-dropdown.open .map-type-trigger-caret {
  transform: rotate(180deg);
}

/* 展开态：白色浮层卡片，浅边框 + 明显阴影，浮在地图上 */
.map-type-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  z-index: 1080;
  border: 1px solid var(--border, #d9d9d9);
  border-radius: var(--radius-md, 6px);
  background-color: var(--surface-card, #ffffff);
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition, 0.2s), transform var(--transition, 0.2s), visibility var(--transition, 0.2s);
}

.map-type-dropdown.open .map-type-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.map-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--primary, #0091ff);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color var(--transition, 0.2s), color var(--transition, 0.2s);
}

.map-type-option:hover {
  background-color: var(--surface-hover, #f5f7fa);
  color: var(--primary, #0091ff);
}

.map-type-option-icon {
  font-size: 13px;
  color: var(--primary, #0091ff);
  flex-shrink: 0;
}

.map-type-option-text {
  white-space: nowrap;
}

/* 选中项：不加背景高亮，仅文字加粗 + 右侧对勾标识（同时覆盖 .selected 与 aria-selected） */
.map-type-option.selected,
.map-type-option[aria-selected="true"] {
  font-weight: 600;
  color: var(--primary, #0091ff);
  border-left: 3px solid transparent;
}

.map-type-option.selected .map-type-option-icon,
.map-type-option[aria-selected="true"] .map-type-option-icon {
  color: var(--primary, #0091ff);
}

.map-type-option.selected .map-type-option-text::after,
.map-type-option[aria-selected="true"] .map-type-option-text::after {
  content: "\2713";
  margin-left: 8px;
  color: var(--primary, #0091ff);
  font-weight: 700;
}

.map-type-option:focus-visible {
  outline: none;
  background-color: #f5f7fa;
  color: var(--primary, #0091ff);
}

/* ==================== 主体容器 ==================== */
.main-container {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--nav-height));
  position: relative;
  background: var(--surface);
}

/* ==================== 侧栏（悬浮面板，与图层面板一致，不挤压地图） ==================== */
.sidebar {
  position: absolute;
  top: 56px;          /* 运行时由 JS 与图层面板共用同一 top（对齐到图层按钮位置），两窗格展开时顶部齐平 */
  right: 10px;        /* 与图层面板同列（右侧），窗口悬浮于按钮之上 */
  /* 高度自适应：由内容决定，不再撑满全高；上限为视口高度减上下边距 */
  max-height: calc(100vh - 112px);   /* PC 兼容兜底 */
  max-height: calc(100dvh - 96px);   /* 移动端跟随浏览器工具栏动态视口：top56 + 底部预留 40px（窗格更高、工具栏不重叠） */
  min-height: 64px;
  width: var(--toolbox-width);
  min-width: var(--toolbox-width);
  max-width: var(--toolbox-width);   /* 兜底：防止内容把面板撑得比设定更宽 */
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 150;   /* 高于右下角 .map-tools(z-index:100)，展开时窗格盖住按钮组、内容不被遮挡 */
  transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ★ 侧栏头部：与导航栏保持一致的蓝色 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--title-bg);
  border-bottom: 1px solid #e1e7ee;
  flex-shrink: 0;
}

.sidebar-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--title-fg);
}

.sidebar-header-title i {
  color: var(--title-fg);
  margin-right: 6px;
}

/* 头部右侧操作区（收起按钮 + 手机端关闭按钮） */
.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ★ 收起按钮：与图层面板折叠按钮一致（头部右侧小圆角按钮） */
.sidebar-collapse-btn {
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: var(--title-fg);
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: rgba(0,0,0,0.10);
  border-color: #fff;
}

.sidebar-collapse-btn i {
  font-size: 13px;
  color: var(--title-fg);
  transition: color var(--transition);
}

.sidebar-collapse-btn:hover i {
  color: #fff;
}

.sidebar-close-btn-mobile {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(91,107,123,0.35);
  color: var(--title-fg);
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.sidebar-close-btn-mobile:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.sidebar-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

.sidebar-content::-webkit-scrollbar { width: 5px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
.sidebar-content::-webkit-scrollbar-thumb:hover { background: #bfbfbf; }

/* 手机端滑动占位：工具箱底部留白 + 提示，方便上滑操作（仅手机端显示） */
.pane-spacer { display: none; }
@media (max-width: 768px) {
  .pane-spacer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 360px;
    margin-top: 48px;
    color: #9aa0a6;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: .75;
    user-select: none;
    pointer-events: none;
  }
}

/* ==================== 全局搜索（结果项样式仍被顶部弹出搜索 #searchResults 复用） ==================== */
/* 搜索入口已迁移为顶部弹出式搜索（.top-search-*），原工具箱内 .search-section 内联搜索框已移除 */

/* 搜索结果面板 */
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

.search-results::-webkit-scrollbar { width: 5px; }
.search-results::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: all var(--transition);
  min-height: 42px;
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover {
  background: var(--primary-light);
}

.search-result-item > i:first-child {
  font-size: 14px;
  flex-shrink: 0;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-source {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.search-result-arrow {
  font-size: 10px;
  flex-shrink: 0;
}

.search-no-result {
  padding: 20px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.search-no-result i {
  margin-right: 4px;
}

.search-more {
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border-top: 1px solid var(--border-light);
}

/* 搜索分隔线 */
.search-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.search-divider::before,
.search-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* 高德搜索加载中 */
.search-amap-loading {
  padding: 10px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.search-amap-loading i {
  margin-right: 4px;
  animation: searchSpin 0.8s linear infinite;
}

@keyframes searchSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 高德搜索无结果 */
.search-amap-empty {
  padding: 10px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* 高德搜索结果项 */
.search-result-amap .search-result-name {
  color: var(--green-hover, #389e0d);
}

/* 手机端搜索结果面板 */
@media (max-width: 768px) {
  .search-results {
    max-height: 280px;
  }
  .search-result-item {
    padding: 12px 14px;
    min-height: 48px;
  }
  .search-result-name { font-size: 14px; }
}

/* ==================== 顶部弹出式搜索（移动端风格：居顶、半透明遮罩、滑入动画、最高层级） ==================== */
.top-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;          /* 全局最上层，高于面板(150)/右键菜单(300)/模态(~1060) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s ease;
}
.top-search-overlay.open { opacity: 1; visibility: visible; }

.top-search-backdrop {
  position: absolute;
  inset: 0;
  top: var(--nav-height);          /* 遮罩从标题栏下开始，标题栏不被压暗 */
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.top-search-bar {
  position: absolute;
  top: calc(var(--nav-height) + 10px);   /* 标题栏下方留出间距，呼吸感 */
  left: 50%;
  transform: translateX(-50%) translateY(-110%);   /* 初始藏在标题栏上方，向下滑入归位 */
  width: min(680px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;                       /* 去掉白色外框卡片内边距，仅保留搜索框本身 */
  background: transparent;          /* 无外框 */
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-search-overlay.open .top-search-bar {
  transform: translateX(-50%) translateY(0);
}

.top-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);   /* 独立可见的搜索框（外框已去除） */
  border: none;
  border-radius: 999px;          /* 圆角胶囊，移动端搜索风格 */
  padding: 3px 14px;             /* 高度收窄 */
  box-shadow: var(--shadow-md);  /* 轻投影，脱离地图凸显为悬浮搜索框 */
  transition: box-shadow var(--transition), background var(--transition);
}
.top-search-field:focus-within {
  background: var(--surface-card);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(24, 144, 255, 0.18);
}
.top-search-icon {
  color: var(--text-muted);
  font-size: 16px;
  flex-shrink: 0;
}
.top-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  padding: 2px 2px;
  min-height: var(--touch-min);
}
.top-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: none;
  padding: 2px;
  flex-shrink: 0;
}
/* 搜索结果定位到搜索条正下方（复用 .search-results 项/分隔线样式） */
.top-search-results {
  top: calc(100% + 8px);
  left: 12px;
  right: 12px;
  max-height: calc(100vh - 150px);
  border-radius: var(--radius-md);
}

/* ==================== 定位点区域 ==================== */
.location-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-light);
  transition: all var(--transition);
  min-height: var(--touch-min);
}

.location-header:hover {
  background: var(--surface-hover);
}

.location-header .fw-bold {
  font-size: 13px;
  color: var(--text);
}

.location-header .badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 500;
}

hr.my-2 {
  border-color: var(--border-light);
  margin: 8px 0;
}

/* ==================== 路径规划区域（高德手机版紧凑风格） ==================== */
.nav-section > .fw-bold {
  font-size: 13px;
  color: var(--text);
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-light);
  margin-bottom: 10px;
  min-height: var(--touch-min);
}

/* 路径规划折叠体：限制最大高度，内部 route-list 可滚动 */
.nav-section-scrollable {
  max-height: min(420px, calc(100vh - 170px));
  overflow: hidden;
  padding-bottom: 2px;
}

/* 路线节点列表：内容多时内部滚动，底部操作按钮始终可见 */
.route-list {
  position: relative;
  max-height: min(210px, calc(100vh - 380px));
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}
.route-list::-webkit-scrollbar { width: 4px; }
.route-list::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 2px; }

.route-node {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 8px;
}

/* 连接线：从圆点向下贯穿至下一节点 */
.route-node::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--border);
  z-index: 0;
}
.route-node--end::after { display: none; }

.route-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--surface-card);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.dot-start { background: var(--green); }
.dot-end   { background: var(--red); }
.dot-waypoint { background: var(--primary); }

.route-field { flex: 1 1 auto; min-width: 0; }

/* 下拉按钮：占位文字兼任 label，更紧凑 */
.route-field .loc-dropdown .loc-dd-toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  padding: 6px 10px;
  min-height: 34px;
  background: var(--surface-card);
  transition: border-color var(--transition), box-shadow var(--transition);
  color: var(--text);
}
.route-field .loc-dropdown .loc-dd-toggle:hover,
.route-field .loc-dropdown .loc-dd-toggle:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0,145,255,0.12);
}
.route-field .loc-dropdown .loc-dd-toggle .loc-dd-label {
  color: var(--text-secondary);
}

/* 底部主操作栏：添加途经点 + 搜索 */
.route-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 2px 4px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--surface-muted, #f5f7fa);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
}
.route-hint i {
  font-size: 12px;
  color: var(--primary, #1890ff);
  flex: 0 0 auto;
}

.route-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.route-btn-add {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 10px;
  min-height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.route-btn-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.route-btn-add #waypointCount {
  color: var(--primary);
  font-weight: 700;
}

.route-btn-search {
  flex: 0 0 auto;
  min-width: 90px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  min-height: 34px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0,145,255,0.3);
  transition: all var(--transition);
}
.route-btn-search:hover {
  box-shadow: 0 5px 14px rgba(0,145,255,0.42);
  transform: translateY(-1px);
}
.route-btn-search:active { transform: scale(0.98); }

/* 次工具栏：出行方式 + 清除 */
.route-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.route-mode {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.route-mode .btn-check + .btn {
  border: none;
  border-radius: 0 !important;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 9px;
  min-height: 28px;
  transition: all var(--transition);
}
.route-mode .btn-check + .btn:not(:last-child) {
  border-right: 1px solid var(--border-light);
}
.route-mode .btn-check:checked + .btn {
  background: var(--primary) !important;
  color: #fff !important;
}

.route-btn-clear {
  font-size: 11px;
  padding: 5px 9px;
  min-height: 28px;
  border-radius: var(--radius-md);
  border-color: transparent;
  color: var(--text-muted);
  background: transparent;
  transition: all var(--transition);
}
.route-btn-clear:hover {
  color: var(--red);
  background: var(--red-light);
}

.form-label.small {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.input-group.input-group-sm .input-group-text {
  background: var(--surface);
  border-color: var(--border);
  font-size: 14px;
  padding: 8px 10px;
  min-height: var(--touch-min);
}

.input-group.input-group-sm .form-select {
  border-color: var(--border);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: border-color var(--transition);
  min-height: var(--touch-min);
}

.input-group.input-group-sm .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(24,144,255,0.15);
}

/* ==================== 导航结果 ==================== */
.nav-result {
  background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%);
  border: 1px solid #bae0ff;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 12px;
  box-shadow: var(--shadow-sm);
}

.nav-result-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(24,144,255,0.15);
}
.nav-result-header i { font-size: 15px; }

.nav-result .nav-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.nav-result .nav-info-label {
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-result .nav-info-label i { font-size: 12px; color: var(--primary); opacity: 0.8; }

.nav-result .nav-info-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* ==================== 测量工具 ==================== */

/* 测量进行中提示 */
.measure-tip {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: #E8F5E9;
  border: 1px solid #4CAF50;
  color: #2E7D32;
  font-size: 11px;
  line-height: 1.4;
}

/* 测量按钮进行中状态 */
.btn-outline-warning.active,
.btn-outline-info.active {
  opacity: 0.7;
  box-shadow: inset 0 0 0 1px currentColor;
}

.btn-outline-warning.disabled,
.btn-outline-info.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 地图右侧测量按钮组（完成 + 退出） */
.map-measure-btns {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-measure-btn {
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #fff;
}

.map-measure-finish {
  background: #28a745;
  box-shadow: 0 4px 16px rgba(40,167,69,0.4);
}
.map-measure-finish:hover {
  background: #218838;
  box-shadow: 0 6px 20px rgba(40,167,69,0.6);
  transform: scale(1.03);
}

.map-measure-exit {
  background: #6c757d;
  box-shadow: 0 4px 16px rgba(108,117,125,0.4);
}
.map-measure-exit:hover {
  background: #5a6268;
  box-shadow: 0 6px 20px rgba(108,117,125,0.6);
  transform: scale(1.03);
}

.map-measure-clear {
  background: #dc3545;
  box-shadow: 0 4px 16px rgba(220,53,69,0.4);
}
.map-measure-clear:hover {
  background: #c82333;
  box-shadow: 0 6px 20px rgba(220,53,69,0.6);
  transform: scale(1.03);
}

.map-measure-undo {
  background: #17a2b8;
  box-shadow: 0 4px 16px rgba(23,162,184,0.4);
}
.map-measure-undo:hover {
  background: #138496;
  box-shadow: 0 6px 20px rgba(23,162,184,0.6);
  transform: scale(1.03);
}

/* 测量读数浮层（固定角落，替代被收起侧栏的结果框） */
.measure-readout {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 250;
  max-width: 260px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  color: #1a1a1a;
  animation: measure-readout-pop .15s ease-out;
}
.measure-readout-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #999;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}
.measure-readout-close:hover { color: #333; }
.measure-readout-body { padding-right: 16px; }
.measure-readout-body .mr-title {
  font-weight: 600;
  font-size: 12px;
  opacity: 0.65;
  margin-bottom: 2px;
}
.measure-readout-body .mr-value {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.measure-readout-body .mr-value.dist { color: #FF6B00; }
.measure-readout-body .mr-value.area { color: #0091FF; }
.measure-readout-body .mr-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.measure-readout-body .mr-warn {
  margin-top: 6px;
  font-size: 12px;
  color: #d9534f;
  background: rgba(217, 83, 79, 0.12);
  border-radius: 6px;
  padding: 4px 6px;
}
@keyframes measure-readout-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* ==================== 地图区域 ==================== */
.map-area {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#mapContainer {
  width: 100%;
  height: 100%;
}

/* 加载遮罩 */
.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  padding: 28px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.map-loading .spinner-border {
  width: 32px;
  height: 32px;
  border-width: 3px;
  color: var(--primary);
}

.map-loading p {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* 地图工具 */
.map-tools {
  position: absolute;
  bottom: 64px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-tools .btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md) !important;
  border: none !important;
  transition: all var(--transition);
  font-size: 15px;
}

.map-tools .btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
}

.map-tools .btn-primary:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.map-tools .btn-light {
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
}

.map-tools .btn-light:hover {
  background: #fff !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* ==================== ★ 图层面板 ==================== */
.layer-panel {
  position: absolute;
  top: 56px;         /* 锚定在图层展开按钮处（top:56，与工具箱窗格共用同一顶部），从按钮位置展开 / 收回到按钮位置 */
  right: 10px;
  z-index: 150;   /* 高于右下角 .map-tools(z-index:100)，展开时窗格盖住按钮组、内容不被遮挡 */
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0;
  min-width: 220px;
  max-width: 300px;
  /* 高度自适应：由内容决定，上限为视口高度减上下边距，超出则内部滚动 */
  max-height: calc(100vh - 20px);   /* PC 兼容兜底 */
  max-height: calc(100dvh - 20px);  /* 移动端跟随浏览器工具栏动态视口 */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.layer-panel.collapsed {
  opacity: 0;
  transform: translateY(-12px);   /* 向上淡出缩回，回到右上角按钮坞方向 */
  transform-origin: top center;
  pointer-events: none;
  border: none;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

/* 面板头部 */
/* ★ 面板头部：与导航栏保持一致的蓝色 */
.layer-panel-header {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--title-fg);
  background: var(--title-bg);
  border-bottom: 1px solid #e1e7ee;
  gap: 6px;
  flex-shrink: 0;
}

.layer-panel-header i {
  color: var(--title-fg);
  font-size: 14px;
}

.layer-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

.layer-panel-body::-webkit-scrollbar { width: 5px; }
.layer-panel-body::-webkit-scrollbar-track { background: transparent; }
.layer-panel-body::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
.layer-panel-body::-webkit-scrollbar-thumb:hover { background: #bfbfbf; }

.layer-panel.collapsed .layer-panel-header,
.layer-panel.collapsed .layer-panel-body,
.layer-panel.collapsed .layer-panel-collapse-btn {
  display: none;
}

/* ★ 折叠按钮：在面板头部右侧（浅色背景上） */
.layer-panel-collapse-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all var(--transition);
  border: 1px solid rgba(255,255,255,0.3);
}

.layer-panel-collapse-btn:hover {
  background: rgba(0,0,0,0.10);
  border-color: var(--primary);
}

.layer-panel-collapse-btn i {
  font-size: 11px;
  color: var(--text-muted);
  transition: color var(--transition);
}

.layer-panel-collapse-btn:hover i {
  color: var(--primary);
}

/* ★★★ 顶部搜索入口按钮（右上角，位于图层展开按钮上方） */
.search-expand-btn {
  position: absolute;
  top: 10px;          /* 按钮坞最上方，图层展开按钮在其下方 */
  right: 0;
  width: 42px;
  height: 42px;
  background: var(--surface-card);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all var(--transition);
  border: 1px solid var(--border);
  border-right: none;
  box-shadow: -2px 0 6px rgba(0,0,0,0.06);
}

.search-expand-btn:hover {
  background: var(--surface-hover);
  box-shadow: -2px 0 10px rgba(0,0,0,0.10);
  width: 48px;
}

.search-expand-btn i {
  color: var(--primary);
  font-size: 19px;
}

.search-expand-btn:hover i {
  color: var(--primary-hover);
}

/* ★★★ 展开按钮：右上角 */
.layer-panel-expand-btn {
  position: absolute;
  top: 56px;          /* 搜索按钮位于其上方（top:10），图层面板锚点同步下移 */
  right: 0;
  width: 42px;
  height: 42px;
  background: var(--surface-card);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all var(--transition);
  border: 1px solid var(--border);
  border-right: none;
  box-shadow: -2px 0 6px rgba(0,0,0,0.06);
}

.layer-panel-expand-btn:hover {
  background: var(--surface-hover);
  box-shadow: -2px 0 10px rgba(0,0,0,0.10);
  width: 48px;
}

.layer-panel-expand-btn i {
  color: var(--primary);
  font-size: 20px;
}

.layer-panel-expand-btn:hover i {
  color: var(--primary-hover);
}

/* ★ 控制按钮按下回弹微交互：点击时弹性缩一下，松开平滑弹回，反馈更跟手 */
.search-expand-btn:active,
.sidebar-expand-btn:active,
.layer-panel-expand-btn:active,
.sidebar-collapse-btn:active,
.layer-panel-collapse-btn:active {
  transform: scale(0.88);
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 图层开关项 */
.layer-toggle-item {
  padding: 4px 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: default;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}

.layer-toggle-item:last-child { border-bottom: none; }

.layer-toggle-item:hover {
  background: var(--surface-hover);
}

.layer-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: block;
  flex-shrink: 0;
  margin-right: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}

.layer-name-row {
  display: flex;
  align-items: center;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  min-height: var(--touch-min);
  gap: 0;
}

.layer-name-row:hover {
  background: var(--surface-hover);
}

.layer-name-row:active {
  background: var(--surface-active);
}

.layer-name-text {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

/* 图层控制行 */
.layer-ctrl-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
}

.layer-ctrl-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* 开关 */
.layer-switch {
  position: relative;
  width: 34px;
  height: 20px;
}

.layer-switch input { opacity: 0; width: 0; height: 0; }

.layer-switch .slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #d9d9d9;
  border-radius: 10px;
  transition: 0.25s ease;
  cursor: pointer;
}

.layer-switch .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 8px;
  transition: 0.25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.layer-switch input:checked + .slider {
  background: var(--primary);
}

.layer-switch input:checked + .slider::before {
  transform: translateX(14px);
}

/* ==================== ★ 侧栏折叠/展开 ==================== */

/* 收缩按钮：侧栏右边缘薄竖条 */
.sidebar.collapsed {
  opacity: 0;
  transform: translateY(-12px);   /* 向上淡出缩回，回到右上角按钮坞方向 */
  transform-origin: top center;
  pointer-events: none;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* 展开按钮：移入右侧，位于图层面板展开按钮正下方，形成右上角垂直控制按钮组 */
.sidebar-expand-btn {
  position: absolute;
  top: 102px;         /* 搜索(10)→图层(56)→工具箱(102)，运行时由 JS 动态调整 */
  right: 0;           /* 与图层面板展开按钮同列（右侧），左右镜像统一样式 */
  width: 42px;
  height: 42px;
  background: var(--surface-card);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all var(--transition);
  border: 1px solid var(--border);
  border-right: none;
  box-shadow: -2px 0 6px rgba(0,0,0,0.06);
}

.sidebar-expand-btn:hover {
  background: var(--surface-hover);
  box-shadow: -2px 0 10px rgba(0,0,0,0.10);
  width: 48px;
}

.sidebar-expand-btn i {
  color: var(--primary);
  font-size: 20px;
}

.sidebar-expand-btn:hover i {
  color: var(--primary-hover);
}

/* ==================== 右键菜单 ==================== */
.context-menu {
  position: absolute;
  z-index: 300;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  min-width: 170px;
  border: 1px solid var(--border);
  animation: menuFadeIn 0.12s ease-out;
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(-3px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.context-menu-item {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
  font-weight: 500;
  min-height: 0;
}

.context-menu-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.context-menu-item i {
  font-size: 14px;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}

/* ==================== 要素详情弹窗 ==================== */
.detail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: menuFadeIn 0.15s ease-out;
}

.detail-modal {
  width: min(420px, 90%);
  max-height: 80%;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.detail-modal-header i { color: var(--primary); }

.detail-modal-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all var(--transition);
}
.detail-modal-close:hover { background: var(--primary-light); color: var(--primary); }

.detail-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
}
.detail-label {
  color: var(--text-muted);
  flex-shrink: 0;
}
.detail-value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.detail-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}

.detail-amap-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}
.detail-amap-link:hover { opacity: 0.9; transform: translateY(-1px); }

/* ==================== 途径点（高德手机版：编号圆点 + 删除） ==================== */
.waypoint-row {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding-bottom: 8px;
}
.waypoint-row .route-node {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 0;
}
.waypoint-row .route-node::after { left: 8px; top: 20px; }

.wp-drag-handle {
  flex: 0 0 auto;
  color: var(--text-muted);
  cursor: grab;
  font-size: 13px;
  line-height: 18px;
  padding: 0 1px;
  transition: color var(--transition);
}
.wp-drag-handle:hover { color: var(--primary); }
.wp-drag-handle:active { cursor: grabbing; }

/* 删除按钮：单行右侧 */
.route-btn-del {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 50%;
  transition: all var(--transition);
}
.route-btn-del:hover {
  color: var(--red);
  background: var(--red-light);
}

/* ==================== 空状态 ==================== */
.empty-state {
  text-align: center;
  padding: 24px 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-state i {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}

/* ==================== Toast ==================== */
.toast {
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
}

.toast-body {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px !important;
}

/* 连续消息通知间距缩小（覆盖 Bootstrap toast-container 默认间距） */
#toastContainer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#toastContainer .toast {
  margin: 0;
}

/* 定位按钮加载中：图标旋转反馈 */
.locate-loading .bi {
  animation: locateSpin 1s linear infinite;
}
@keyframes locateSpin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* ==================== 图层子列表 ==================== */
.layer-item-sublist {
  display: none;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
  padding-left: 20px;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

.layer-item-sublist::-webkit-scrollbar { width: 4px; }
.layer-item-sublist::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 2px; }

.layer-list-item {
  font-size: 11px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 3px;
  transition: all var(--transition);
  min-height: 36px;
  display: flex;
  align-items: center;
}

.layer-list-item:hover {
  background: var(--surface-hover);
  color: var(--primary);
}

/* ==================== 加载错误 ==================== */
.map-loading .text-danger p { font-weight: 500; }

.map-loading .btn-outline-danger {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: all var(--transition);
}

.map-loading .btn-outline-danger:hover { transform: translateY(-1px); }

/* ==================== 遮罩层（手机端） ==================== */
.sidebar-backdrop {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 190;
  animation: backdropFadeIn 0.2s ease-out;
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==================== 汉堡按钮（手机端） ==================== */
.mobile-menu-btn {
  display: none;
  width: var(--touch-min);
  height: var(--touch-min);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
  margin-left: 8px;
}

.mobile-menu-btn:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ==================================================================
   ★★★ 移动端响应式 ★★★
   ================================================================== */

/* ≤768px */
@media (max-width: 768px) {
  :root {
    --nav-height: 44px;
    --sidebar-width: 85vw;
    --toolbox-width: min(280px, 80vw);   /* 手机端工具箱进一步收窄，避免盖住地图 */
    --touch-min: 44px;
  }

  .navbar { padding: 0 8px !important; }

  .navbar-brand .nav-title-full { display: none; }
  .navbar-brand .nav-title-short { display: inline; }

  .mobile-menu-btn { display: flex; }

  /* 地图类型下拉：移动端保证点击区域与文字可读，不溢出导航栏 */
  .map-type-trigger {
    font-size: 11px;
    padding: 5px 8px;
    max-width: 140px;
  }

  .map-type-menu {
    min-width: 148px;
    right: 0;
  }

  .map-type-option {
    padding: 9px 10px;
  }

  /* 侧栏：移动端与 PC 完全一致 —— 悬浮卡片 + 同样的展开/折叠按钮 + 自适应高度（不再用全屏抽屉） */
  .sidebar-close-btn-mobile { display: none; }
  .sidebar-collapse-btn { display: flex; }
  /* 展开按钮沿用 PC 的浮动图标（base 规则已 display:flex，移动端不再隐藏） */
  .sidebar-backdrop { display: none !important; }

  /* 移动端面板底部安全边距兜底：JS 未运行时的保底（JS 运行时会按 visualViewport 计算并覆盖为更准的值） */
  .sidebar {
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 96px);   /* top56 + 底部预留 40px（窗格更高、工具栏不重叠） */
  }
  .mobile-menu-btn { display: none; }

  .sidebar-content { padding: 10px; }
  .location-header { padding: 10px 12px; }
  .location-item { padding: 10px 12px; gap: 10px; }
  .location-item .loc-name { font-size: 14px; }
  .nav-section > .fw-bold { padding: 10px 12px; }

  /* 路径规划：手机上给更多垂直空间，列表内部滚动 */
  .nav-section-scrollable {
    max-height: min(460px, calc(100vh - 150px));
  }
  .route-list {
    max-height: min(240px, calc(100vh - 360px));
  }

  /* 图层面板：左对齐 */
  .layer-panel {
    top: 8px;
    right: 10px;
    left: auto;
    min-width: 180px;
    max-width: 260px;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 48px);   /* top8 + 底部预留 40px（窗格更高、工具栏不重叠） */
  }

  .layer-panel-collapse-btn {
    right: 6px;
    left: auto;
  }

  /* 顶部按钮坞：搜索/图层/工具箱三连，移动端统一间距避免重叠（整体上移贴近顶栏） */
  .search-expand-btn {
    top: 8px;
    right: 0;
  }
  /* 移动端搜索框水平收窄：留出左右较大边距，不再接近满屏 */
  .top-search-bar {
    width: calc(100% - 80px);
  }
  .top-search-results {
    left: 8px;
    right: 8px;
  }
  .layer-panel-expand-btn {
    top: 54px;
    right: 0;
    left: auto;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border: 1px solid var(--border);
    border-right: none;
    box-shadow: -2px 0 6px rgba(0,0,0,0.06);
  }
  .sidebar-expand-btn {
    top: 100px;
    right: 0;
  }

  .layer-panel-expand-btn:hover {
    box-shadow: -2px 0 10px rgba(0,0,0,0.10);
    width: 48px;
  }

  .layer-panel-collapse-btn {
    width: 26px;
    height: 26px;
  }

  .layer-switch {
    width: 38px;
    height: 22px;
  }

  .layer-switch .slider::before { width: 18px; height: 18px; }
  .layer-switch input:checked + .slider::before { transform: translateX(16px); }

  /* 地图工具：手机端对齐 PC 三按钮组（位置 bottom/right 与尺寸 38×38 一致） */
  .map-tools {
    bottom: 64px;
    right: 20px;
    gap: 6px;
  }

  .map-tools .btn {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  /* 右键菜单（移动端与桌面端保持一致的紧凑+分割线风格） */
  .context-menu { min-width: 190px; }
  .context-menu-item {
    padding: 6px 14px;
    font-size: 14px;
    min-height: 0;
    gap: 10px;
  }
  .context-menu-item i { font-size: 16px; }

  /* 表单 */
  .input-group.input-group-sm .input-group-text {
    padding: 10px 12px;
    min-height: 48px;
  }

  .input-group.input-group-sm .form-select {
    padding: 10px 12px;
    font-size: 14px;
    min-height: 48px;
  }

  .btn-group.btn-group-sm.w-100 .btn-check + .btn {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 48px;
  }

  #btnNavigate.route-btn-search { font-size: 14px; padding: 9px 16px; min-height: 40px; }
  #btnClearNav.route-btn-clear { font-size: 12px; padding: 6px 10px; min-height: 32px; }
  #btnAddWaypoint.route-btn-add { font-size: 13px; padding: 8px; min-height: 40px; }
  .nav-result { padding: 10px; font-size: 13px; }
  .map-loading { padding: 20px 28px; }
  .map-loading .spinner-border { width: 28px; height: 28px; }
  .map-loading p { font-size: 12px; }
  .toast-body { font-size: 14px; padding: 12px 16px !important; }

  .route-btn-del {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}

/* ≤480px */
@media (max-width: 480px) {
  :root {
    --nav-height: 42px;
    --sidebar-width: 92vw;
    --toolbox-width: min(260px, 82vw);   /* 小手机进一步收窄，贴近图层面板宽度 */
  }

  .navbar-brand { font-size: 12px !important; }
  .navbar-brand i { font-size: 14px; }

  /* 地图下拉框：小屏保持可读 + 不溢出导航栏 */
  .map-type-trigger {
    font-size: 11px;
    padding: 5px 8px;
    max-width: 128px;
    gap: 4px;
  }

  .map-type-trigger-label {
    max-width: 84px;
  }

  .map-type-menu {
    min-width: 136px;
    right: 0;
  }

  .layer-panel {
    min-width: 160px;
    max-width: 220px;
  }

  .layer-panel-expand-btn {
    width: 42px;
    height: 42px;
  }

  .sidebar-content { padding: 8px; }
  .location-header { padding: 8px 10px; }
  .location-item { padding: 10px; gap: 8px; }
  .location-item .loc-name { font-size: 13px; }
  .location-item .loc-desc { font-size: 10px; }
}

/* 769px-1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-width: 280px; --toolbox-width: var(--sidebar-width); }

  .navbar-brand .nav-title-full { display: inline; }
  .navbar-brand .nav-title-short { display: none; }

  .sidebar-collapse-btn { display: flex; }
  .sidebar-expand-btn { position: absolute; }
}

/* >1024px */
@media (min-width: 1025px) {
  .navbar-brand .nav-title-full { display: inline; }
  .navbar-brand .nav-title-short { display: none; }
}

/* ==================== 地图选点模式 ==================== */

/* 选点按钮（起点/终点旁） */
.pick-btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pick-btn-waypoint {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 选点模式横幅 */
.pick-mode-banner {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(24, 144, 255, 0.95);
  color: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.35);
  font-size: 14px;
  font-weight: 500;
  animation: pickBannerSlide 0.3s ease;
}

.pick-mode-banner .btn-light {
  border-radius: 16px;
  font-size: 12px;
  padding: 2px 10px;
}

@keyframes pickBannerSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 手机端横幅位置 */
@media (max-width: 768px) {
  .pick-mode-banner {
    top: 56px;
    left: 10px;
    right: 10px;
    transform: none;
    border-radius: 10px;
    justify-content: center;
  }

  @keyframes pickBannerSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ==================== 途径点拖拽排序（高德手机版：只保留删除） ==================== */

/* 拖拽中的行 */
.waypoint-row.wp-dragging {
  opacity: 0.4;
  background: var(--primary-light);
}

/* 拖拽悬停目标行 */
.waypoint-row.wp-drag-over {
  border-top: 2px solid var(--primary);
  padding-top: 0;
}

/* 手机端途径点尺寸微调 */
@media (max-width: 768px) {
  .route-btn-del {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .wp-drag-handle {
    font-size: 15px;
    padding: 0 2px;
  }
}

/* ==================== 天气卡片（高德天气 API） ==================== */
.weather-card {
  --mc-color: #1f2d3d;
  background: linear-gradient(135deg, rgba(0,145,255,0.10) 0%, rgba(0,145,255,0.05) 100%);
  color: #1f2d3d;
  border: 1px solid rgba(0,145,255,0.20);
  border-radius: var(--radius-md);
  padding: 7px 9px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,145,255,0.12);
}

/* ==================== 天气预警卡片（和风天气，无感轮播） ==================== */
.alerts-card {
  background: linear-gradient(135deg, rgba(0,145,255,0.10) 0%, rgba(0,145,255,0.05) 100%);
  color: #1f2d3d;
  border: 1px solid rgba(0,145,255,0.20);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,145,255,0.12);
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.alerts-card:hover {
  background: linear-gradient(135deg, rgba(0,145,255,0.14) 0%, rgba(0,145,255,0.07) 100%);
  box-shadow: 0 4px 12px rgba(0,145,255,0.18);
}
.alerts-head {
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
  font-size: 11px; opacity: 0.85; margin-bottom: 4px;
}
.alerts-title { font-weight: 600; }
.alerts-count { font-size: 10px; opacity: 0.7; }
.alerts-ticker { position: relative; min-height: 18px; }
.alert-item {
  display: flex; align-items: center; gap: 6px;
  border-left: 3px solid transparent; padding-left: 6px;
  transition: opacity 0.22s ease;
  line-height: 1.35;
}
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 5px rgba(0,0,0,0.35); }
.alert-text { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerts-list { margin-top: 6px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 6px; }
.alert-list-item { border-left: 3px solid transparent; padding: 4px 0 4px 6px; margin-bottom: 6px; }
.alert-li-title { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.alert-li-meta { font-size: 10px; opacity: 0.7; margin: 2px 0; }
.alert-li-text { font-size: 11px; opacity: 0.92; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
/* 图标列：城市名与图标统一左对齐，整体紧凑 */
.weather-icon-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.weather-loc {
  display: flex;
  align-items: center;
  gap: 3px;
}
.weather-pin { font-size: 12px; color: #0091ff; line-height: 1; }
/* 主行：图标 + 温度信息 */
.weather-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.weather-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather-icon .mc-icon {
  width: 52px; height: 52px; display: block;
}
.weather-info { flex: 1; min-width: 0; }
.weather-city { font-size: 11px; opacity: 0.92; }
.weather-temp { font-size: 21px; font-weight: 700; line-height: 1.05; }
.weather-meta { font-size: 10px; opacity: 0.95; margin-top: 1px; line-height: 1.25; }
.weather-meta b { font-weight: 600; }
.weather-time { font-size: 10px; opacity: 0.7; }
/* 预报区：右对齐，左侧蓝色细分隔线，整列垂直居中 */
.weather-fc-row { display: flex; align-items: stretch; justify-content: space-between; gap: 0; }
.weather-sep {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: rgba(0,145,255,0.18);
  margin: 0 7px;
}
.weather-forecast {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.fc-day {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  font-size: 9.5px;
  line-height: 1.25;
}
.fc-week { opacity: 0.85; }
.fc-icon {
  line-height: 1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-icon .mc-icon-sm {
  width: 18px; height: 18px; display: block;
}
.fc-temp { font-weight: 600; }
/* 加载 / 错误 */
.weather-loading { font-size: 11px; padding: 3px 2px; }
.weather-error { font-size: 10px; padding: 3px 2px; color: #fff3cd; }

/* ==================== 下乡日志面板（logs-panel.js，复用浮层风格） ==================== */

/* 抽屉遮罩 + 抽屉本体 */
.logs-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.logs-drawer {
  width: 460px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  /* overflow: hidden 已移除——会截断导出下拉菜单等绝对定位元素。
     改为仅 .logs-drawer-body 独立裁剪滚动 */
  animation: logs-drawer-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes logs-drawer-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.logs-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f6;
}
.logs-drawer-title { font-size: 16px; font-weight: 700; color: #1f2d3d; }
.logs-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #909399;
  cursor: pointer;
}
.logs-close:hover { color: #f56c6c; }
.logs-drawer-sub {
  padding: 8px 16px;
  font-size: 12px;
  color: #909399;
  background: #f7f9fc;
}
.logs-drawer-body {
  flex: 1;
  min-height: 0; /* 关键：flex 列中子项默认 min-height:auto 会拒绝收缩，长列表将撑破抽屉 max-height；设为 0 方可收缩并在内部滚动 */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
}
.logs-drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid #eef1f6;
}

/* 导出工具栏 */
.logs-export-bar {
  padding: 6px 14px;
  border-bottom: 1px solid #eef1f6;
  background: #fafbfc;
}
.logs-export-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.logs-export-row + .logs-export-row {
  margin-top: 10px;
}
.logs-export-row .btn { flex-shrink: 0; }
.logs-export-label {
  font-size: 12px;
  color: #606266;
  flex-shrink: 0;
  min-width: 30px;
}
.logs-export-select,
.logs-export-date {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  color: #303133;
  flex: 1 1 auto;
  min-width: 0;
}
.logs-export-select {
  min-width: 96px;
}
.logs-export-date {
  flex: 1 1 120px;
  min-width: 100px;
  width: auto;
}
.logs-export-btns {
  justify-content: flex-end;
}
.logs-export-dropdown {
  position: relative;
}
.logs-export-menu {
  position: absolute;
  right: 0;
  left: auto;
  transform: none;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 100;
  min-width: 130px;
  overflow: hidden;
}
.logs-export-menu-item {
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.logs-export-menu-item:hover {
  background: #f0f7ff;
}
.logs-export-menu-item + .logs-export-menu-item {
  border-top: 1px solid #f0f2f5;
}
/* ===== 可折叠筛选区（默认折叠：单行摘要；点击展开完整控件） ===== */
.logs-filter-wrap {
  border-bottom: 1px solid #eef1f6;
  background: #f7f9fc;
}
/* 折叠态：只显示摘要行，整个 body 高度归零（不占位） */
.logs-filter-body {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height .22s cubic-bezier(.16, 1, .3, 1), opacity .16s linear;
}
.logs-filter-wrap.collapsed .logs-filter-body {
  max-height: 0;
  opacity: 0;
  /* 折叠完成后不接收焦点，避免键盘 Tab 跳进不可见控件 */
  visibility: hidden;
  transition: max-height .22s cubic-bezier(.16, 1, .3, 1), opacity .16s linear, visibility 0s linear .22s;
}
.logs-filter-wrap:not(.collapsed) .logs-filter-body {
  /* 展开态不裁剪：导出下拉菜单为绝对定位，若被裁剪会看不见（历史踩坑） */
  overflow: visible;
  visibility: visible;
}
.logs-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  color: #1f2d3d;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .15s;
}
.logs-filter-toggle:hover { background: #eef4fd; }
.logs-filter-toggle:focus-visible {
  outline: 2px solid #409eff;
  outline-offset: -2px;
}
.logs-filter-caret {
  font-size: 11px;
  color: #909399;
  width: 10px;
  flex-shrink: 0;
  transition: color .15s;
}
.logs-filter-toggle:hover .logs-filter-caret { color: #409eff; }
.logs-filter-toggle-text {
  flex-shrink: 0;
  font-weight: 600;
  color: #303133;
}
/* 折叠态摘要：一行省略号截断，保证不撑破抽屉宽度 */
.logs-filter-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #909399;
}
.logs-filter-summary.active { color: #409eff; }
/* 生效条件计数徽标 */
.logs-filter-count {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #409eff;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
/* 展开态：筛选条自身背景已在 .logs-filter-bar，此处去掉外层重复底色 */
.logs-filter-wrap:not(.collapsed) .logs-filter-toggle {
  background: #f7f9fc;
  border-bottom: 1px dashed #e4e9f0;
}
/* 图层/图斑筛选条（与导出条视觉一致，置于其上方） */
.logs-filter-bar {
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f6;
  background: #f7f9fc;
}
.logs-filter-bar .logs-export-select {
  min-width: 96px;
}
.logs-filter-bar select:disabled {
  background: #f0f2f5;
  color: #a8abb2;
  cursor: not-allowed;
}
/* 筛选第二行：范围 + 起止日期 + 筛选 + 导出，强制单行紧凑排布 */
.logs-filter-row2 {
  flex-wrap: wrap; /* 改为换行：避免单行 nowrap 在抽屉内溢出产生横向滚动条，也避免 overflow:auto 裁剪「导出」下拉菜单 */
  gap: 6px;
}
.logs-filter-row2 .logs-export-label { min-width: 24px; }
.logs-filter-row2 .logs-export-select { min-width: 80px; flex: 1 1 auto; }
.logs-filter-row2 .logs-export-date { min-width: 84px; flex: 1 1 84px; }

/* 日志卡片中的地点标签（跨图层浏览时区分图斑） */
.logs-loc {
  font-size: 12px;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 10px;
  padding: 1px 8px;
  margin-right: 6px;
  white-space: nowrap;
}

/* 空态 */
.logs-empty {
  text-align: center;
  color: #909399;
  font-size: 13px;
  padding: 36px 0;
}

/* 分页栏（下乡日志面板） */
.logs-drawer-pager {
  padding: 12px 16px;
  border-top: 1px solid #eef1f6;
  background: #fafbfc;
}
.logs-pager-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.logs-pg-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  color: #303133;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.logs-pg-btn:hover:not(.is-disabled):not(.is-active) {
  border-color: #409eff;
  color: #409eff;
}
.logs-pg-btn.is-active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  font-weight: 600;
}
.logs-pg-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.logs-pg-ellipsis {
  padding: 0 4px;
  color: #909399;
}
.logs-pg-size {
  margin-left: 6px;
  font-size: 12px;
  color: #606266;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.logs-pg-size-group {
  display: inline-flex;
  gap: 4px;
}
.logs-pg-size-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
}
.logs-pg-info {
  margin-left: auto;
  font-size: 12px;
  color: #909399;
}

/* 日志卡片 */
.logs-card {
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.logs-card:hover {
  border-color: #1989fa;
  box-shadow: 0 6px 18px rgba(25, 137, 250, 0.12);
  transform: translateY(-1px);
}
.logs-card:active { transform: translateY(0); }
.logs-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.logs-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 10px;
  line-height: 1.6;
}
.logs-badge-private { background: #f2f3f5; color: #909399; }
.logs-badge-public { background: #eaf6ff; color: #1989fa; }
.logs-author { font-size: 13px; font-weight: 600; color: #303133; }
.logs-time { font-size: 11px; color: #a8abb2; flex-shrink: 0; }
.logs-card-text {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
}
.logs-card-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.logs-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* 日志详情弹窗（查看态） */
.logs-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logs-detail-box {
  box-sizing: border-box;
  width: 460px;
  max-width: 94vw;
  max-height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  animation: logs-form-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.logs-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f6;
  font-weight: 700;
  font-size: 15px;
}
.logs-detail-title { font-size: 16px; color: #1f2d3d; font-weight: 700; }
.logs-detail-body {
  padding: 16px;
  overflow-y: auto;
}
.logs-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.logs-detail-content {
  font-size: 14px;
  color: #303133;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.logs-detail-empty { color: #a8abb2; font-style: italic; }
.logs-detail-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.logs-detail-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eef1f6;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.logs-detail-thumb:hover { transform: scale(1.05); }
.logs-detail-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eef1f6;
}

/* 缩略图（卡片 / 表单共用） */
.logs-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eef1f6;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.logs-thumb:hover { transform: scale(1.05); }

/* 表单遮罩 + 表单 */
.logs-form-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logs-form {
  box-sizing: border-box;
  width: 440px;
  max-width: 94vw;
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  animation: logs-form-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes logs-form-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.logs-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px; /* 与 .logs-drawer-header 对齐，统一面板间距节奏 */
  border-bottom: 1px solid #eef1f6;
  font-weight: 700;
  font-size: 15px;
}
#logsFormTitle {
  font-size: 16px; /* 与 .logs-drawer-title 一致，避免标题字号不协调 */
  color: #1f2d3d;
  font-weight: 700;
}

/* 文字内容标签 + 快捷短语按钮同行，行内元素相互垂直居中 */
.logs-phrase-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.logs-phrase-row .form-label,
#logsFormModal .logs-phrase-row .form-label {
  margin-bottom: 0;
}
/* 文字内容段、图片段上边距加大，与上下区块拉开呼吸感 */
.logs-block-topgap {
  margin-top: 24px;
}
.logs-quick-btn {
  font-size: 11px;
  padding: 1px 7px;
  line-height: 1.5;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.logs-quick-btn:hover {
  color: #fff;
  background: #409eff;
  border-color: #409eff;
}
#logContent { font-size: 13px; line-height: 1.6; }
.logs-form-body { padding: 14px 16px; } /* 与 .logs-drawer-body 对齐，统一面板内边距 */
/* 字段区块间距统一，行高/左对齐一致，末块去多余间距 */
.logs-form-body > .mb-2 { margin-bottom: 16px; }
.logs-form-body > .mb-2:last-child { margin-bottom: 0; }
/* 写日志窗格内 label 统一：字号/行高/字重/左对齐 */
#logsFormModal .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  line-height: 1.5;
  margin-bottom: 8px;
}
.logs-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px; /* 与 .logs-drawer-footer 对齐 */
  border-top: 1px solid #eef1f6;
}

/* 写按钮彻底禁用态（图层/图斑任一为「所有」）：明显灰禁，不可点 */
#logWriteBtn:disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background: #9aa3af !important;
  border-color: #9aa3af !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 自定义确认弹窗（玻璃拟态，替换原生 confirm；仅作用于弹窗本身，不影响筛选框） */
.logs-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logs-confirm-box {
  width: 380px;
  max-width: 92vw;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  padding: 22px 22px 18px;
  animation: logs-form-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.logs-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2d3d;
  margin-bottom: 10px;
}
.logs-confirm-msg {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 20px;
}
.logs-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 上传区 */
.logs-upload {
  border: 1.5px dashed #c0c4cc;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: #909399;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.logs-upload:hover { border-color: #1989fa; color: #1989fa; }
.logs-upload i { font-size: 22px; margin-right: 6px; }

/* 图片上传进度条（玻璃拟态渐变填充） */
.logs-upload-progress {
  position: relative;
  margin-top: 10px;
  height: 8px;
  border-radius: 6px;
  background: rgba(25, 137, 250, 0.12);
  overflow: hidden;
}
.logs-upload-bar {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, #1989fa, #22d3ee);
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.logs-upload-pct {
  position: absolute;
  right: 4px;
  top: 10px;
  font-size: 11px;
  color: #606266;
  font-variant-numeric: tabular-nums;
}
.logs-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.logs-thumb-wrap {
  position: relative;
}
.logs-thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
}
.logs-thumb-del:hover { background: #f56c6c; }

/* 图片放大遮罩 */
.logs-zoom-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 4000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.logs-zoom-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* 图片预览器：工具栏 / 左右导航 / 缩略图条（与后端 el-image 同款体验） */
.logs-zoom-backdrop { z-index: 4000 !important; cursor: default; }
.logs-zoom-toolbar { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.logs-zoom-btn { width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #333; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.logs-zoom-btn:hover { background: #fff; }
.logs-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.logs-zoom-prev { left: 16px; }
.logs-zoom-next { right: 16px; }
.logs-zoom-img { transition: transform .15s ease; }
.logs-zoom-thumbs { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; max-width: 92vw; overflow-x: auto; z-index: 2; padding: 6px; background: rgba(0,0,0,.35); border-radius: 8px; }
.logs-zoom-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; opacity: .6; flex: 0 0 auto; }
.logs-zoom-thumb.active { border-color: #409eff; opacity: 1; }

/* ==================== 导航点自定义下拉（可折叠分组） ==================== */
.loc-dropdown {
  position: relative;
  flex: 1 1 auto;
}

/* toggle 按钮复用 .form-select 外观，但移除原生箭头背景 */
.loc-dd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-image: none;
}

.loc-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-dd-caret {
  margin-left: auto;
}

/* 改为 fixed 定位 + 高 z-index：脱离 .route-list / .nav-section-scrollable 的 overflow 裁剪上下文，
   永远浮在最上层，不再被工具箱滚动框限制显示区域（由 JS 实时定位到按钮下方/上方，并按视口可用空间动态定高） */
.loc-dd-menu {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-top: 0;
  max-height: 62vh;          /* JS 会按视口可用空间覆盖；这是预 JS 兜底 */
  overflow-y: auto;
  overscroll-behavior: contain;   /* 滚到头不带动页面滚动 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  animation: loc-dd-pop .12s ease-out;
  /* 细圆角滚动条（premium 观感，避免原生粗滚动条割裂感） */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
.loc-dd-menu::-webkit-scrollbar { width: 8px; }
.loc-dd-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.loc-dd-menu::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); background-clip: padding-box; }
.loc-dd-menu::-webkit-scrollbar-track { background: transparent; }

/* 仅当内容超长（可滚动）时，给顶部/底部加柔和渐隐遮罩，让"截断"看起来像有意为之的渐隐而非生硬切掉 */
.loc-dd-menu.loc-dd-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

@keyframes loc-dd-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loc-dd-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 12px;
  color: #495057;
  cursor: pointer;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  user-select: none;
}

.loc-dd-group-caret {
  font-size: 10px;
}

.loc-dd-count {
  color: #999;
  font-weight: 400;
}

.loc-dd-items {
  padding: 2px 0;
}

.loc-dd-item {
  padding: 5px 10px 5px 24px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-dd-item:hover {
  background: #e9f2ff;
  color: #0d6efd;
}

.loc-dd-myloc {
  padding: 6px 10px;
  font-weight: 600;
  font-size: 12px;
  color: #fd7e14;
  cursor: pointer;
  background: #fff7ed;
  border-bottom: 1px solid #eee;
  user-select: none;
}
.loc-dd-myloc:hover {
  background: #ffedd5;
}