/* 1. 全局变量：定义在:root（等价于html选择器，全局生效） */
:root {
  /* 颜色变量 */

  --primary-color: #4aadeb; /* 主色调 */
  --secondary-color: #e35087; /* 辅助色 */
  --accent-color: #fff254; /* 强调色 */
  --color-info: #51a7bf; /* 强调色2 */

  --text-color: #333; /* 文本色 */
  /* 尺寸变量 */
  --base-padding: 16px; /* 基础内边距 */
  --border-radius: 8px; /* 圆角 */
  --font-size: 14px; /* 基础字体大小 */
  /* 阴影/边框变量 */
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --border: 1px solid #eee;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 关键：隐藏全局滚动条 */
}

.navbar {
  height: 56px;
  box-sizing: border-box;
}
.page-container {
  display: flex;
  flex-direction: row;
  height: calc(100% - 56px - 40px); /* 关键：基于父容器高度，而非vh */
  width: 100%;
}
.foot {
  height: 40px;
  box-sizing: border-box;
}

#station_all {
  display: flex;
  flex-direction: row;
  width: 50%;
  height: 100%; /* 继承page-container高度 */
  overflow-y: auto; /* 仅列表容器内滚动 */

  overflow-x: hidden;
  box-sizing: border-box;
}
/* 左右列表均分宽度 */
#stationlist_left,
#stationlist_right {
  width: 50%;
  height: 100%;

  padding: 0;
  margin: 0;
}
/* 右半页：可滚动区域（占50%宽度） */
.scroll-area {
  width: 50%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.fmo-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-color);
}

.fmo-second {
  color: rgb(136, 21, 55);
}
.fmo-third {
  color: var(--text-color);
}
#map-container {
  position: relative; /* 必须！否则子元素的绝对定位会相对于整个页面 */
  width: 100%;
  height: 100%;
  background-color: #e4e2e2;
}
/* 列表项样式优化（增加点击反馈） */
.list-row {
  cursor: pointer;
  padding: 12px;
  margin: 4px 8px;
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease;
}
.list-row:hover {
  background-color: rgba(74, 173, 235, 0.1);
}

.list-row.active {
  background-color: rgba(74, 173, 235, 0.2);
  border-left: 3px solid var(--primary-color);
}
/* 自动刷新提示样式 */
#auto-refresh-tip {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}

/* 刷新中提示样式 */
.refresh-loading {
  color: #fff254 !important;
  font-weight: bold;
}

/* 刷新成功提示（临时显示） */
.refresh-success {
  position: fixed;
  top: 70px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(72, 187, 120, 0.9);
  color: white;
  border-radius: 4px;
  z-index: 9999;
  animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
#reload_fmo_info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 10px; /* 距离地图顶部10px，可调整 */
  right: 10px; /* 距离地图右侧10px，可调整 */

  /* 样式优化（可选，根据你的需求调整） */
  padding: 8px 16px; /* 内边距，提升可读性 */
  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景，避免遮挡地图 */
  border-radius: 4px; /* 圆角，更美观 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，突出层级 */
  z-index: 100; /* 确保在地图之上显示（高德/百度地图层级通常<100） */

  /* 文字样式（可选） */
  font-size: 14px;
  color: #333;
  font-weight: 500;

  /* 防止被选中（可选） */
  user-select: none;
  pointer-events: auto; /* 确保元素可点击（若有交互） */
}

.list-row {
  background-color: #f6f8fc;
  border-left: 3px solid #2fce3c;
}