.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f0f4f8; /* 更柔和的背景色 */
  overflow-x: hidden;
  transition: 0.5s;
  padding: 10px 5px; /* 减小内边距以缩小折叠间距 */
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
  font-family: 'Segoe UI', Roboto, sans-serif; /* 更现代的字体 */
}

.sidebar.collapsed {
  width: 0;
}

/* 下拉框和输入框样式 */
.sidebar select,
.sidebar input[type="number"],
.sidebar button {
  width: 90%;
  margin: 10px auto;
  display: block;
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
}

.sidebar button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar button:hover {
  background-color: #0056b3;
}

/* 折叠按钮样式优化 */
.toggle-btn {
  position: fixed;
  left: 10px; /* 减小左侧间距 */
  top: 20px;
  z-index: 2;
  cursor: pointer;
  background-color: #2d3748; /* 深灰色按钮 */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px; /* 更圆润的边框 */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 添加按钮阴影 */
}

.toggle-btn:hover {
  background-color: #1a202c; /* 悬停加深颜色 */
  transform: scale(1.05); /* 悬停放大效果 */
}

.toggle-btn:hover {
  background-color: #0056b3;
}

/* 主内容区域样式优化 */
.main-content {
  transition: margin-left .5s;
  margin-left: 250px;
  padding: 16px;
}

.main-content.expanded {
  margin-left: 0;
}

/* 标签样式 */
.sidebar label {
  display: block;
  width: 95%;
  margin: 15px auto 5px; /* 增加上下间距 */
  font-size: 14px;
  color: #4a5568; /* 更清晰的字体颜色 */
  font-weight: 500; /* 加粗标签 */
}

/* 修改 body 的溢出设置 */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    /* 修改为 auto，允许出现滚动条 */
    overflow: auto; 
}

.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #f8f9fa;
    overflow-x: hidden;
    /* 添加垂直滚动条 */
    overflow-y: auto; 
    transition: 0.5s;
    padding-top: 60px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* 限制最大高度，确保滚动条正常工作 */
.sidebar {
  /* 限制最大高度，确保滚动条正常工作 */
  max-height: calc(100vh - 60px); 
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 调整主内容区域样式 */
.main-content {
    transition: margin-left .5s;
    margin-left: 250px;
    padding: 0 5px; /* 添加左右内边距防止内容紧贴边缘 */
    height: 100vh;
    max-width: calc(100vw - 250px); /* 最大宽度不超过视口减去侧边栏 */
    width: 100%; /* 宽度占满可用空间 */
    box-sizing: border-box; /* 内边距不影响总宽度 */
}

.main-content.expanded {
    margin-left: 0;
    width: 100%;
    max-width: 100vw; /* 折叠时限制最大宽度为视口宽度 */
    box-sizing: border-box; /* 内边距不影响总宽度 */
}

/* 调整图表容器样式 */
/* 移除冗余的#main容器样式 */
#main {
    display: none;
}

#categoryTree ul {
  list-style-type: none;
  padding-left: 0;
}

#categoryTree > ul > li > .subtree {
  padding-left: 20px; /* 一级子菜单缩进 */
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 100%); /* 渐变背景增强层级 */
}

#categoryTree > ul > li > .subtree > li > .subtree {
  padding-left: 35px; /* 二级子菜单更深缩进 */
  background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, transparent 100%); /* 更深渐变 */
}

#categoryTree li {
  cursor: pointer;
  padding: 8px 10px; /* 增加内边距 */
  margin: 2px 0; /* 增加上下边距 */
  border-radius: 4px; /* 添加圆角 */
  transition: all 0.2s;
}

#categoryTree li:hover {
  background-color: #e6f4ff; /* 更柔和的悬停颜色 */
  transform: translateX(4px); /* 悬停时右移 */
}

#categoryTree li.selected {
  background-color: #007BFF;
  color: white;
  border-left: 4px solid #0056b3;
  transform: translateX(2px);
}
#categoryTree li.selected .toggle {
  background: none;
  color: inherit;
}
#categoryTree li .toggle {
  background: none;
  color: #007BFF;
  border-radius: 2px;
  margin-right: 2px;
  padding: 0 2px;
}
#categoryTree li.selected > .toggle {
  color: #fff;
}

.chart-container {
    height: 100%;
    overflow-y: auto;
}

.chart-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* 统一图表间间距 */
    padding: 16px; /* 容器内边距 */
    box-sizing: border-box; /* 内边距不影响总宽度 */
}

.chart {
    width: calc(50% - 8px); /* 50%宽度减去一半的gap（16px/2=8px） */
    height: 400px; /* 固定高度保持一致 */
    min-height: 400px; /* 最小高度防止内容撑开 */
    background: #fff; /* 图表容器背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影提升质感 */
    overflow: hidden; /* 防止内容溢出 */
}