/* 整体容器样式 */
.container {
  display: flex; /* 使用Flex布局 */
  height: 73vh; /* 容器高度为视口高度的73% */
  background-color: #ffffff; /* 背景颜色为白色 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置字体 */
}

/* 顶部空白区域1的样式 */
.top-space-1 {
  min-height: 80px; /* 最小高度为80px */
  display: flex; /* 使用Flex布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  align-items: center; /* 子元素垂直居中 */
  justify-content: center; /* 子元素水平居中 */
  padding: 5px; /* 内边距为5px */
  box-sizing: border-box; /* 包含内边距和边框 */
  border-radius: 0 0 8px 8px; /* 底部圆角 */
  background: #59a5f5; /* 背景颜色为浅蓝色 */
  margin: 1px 0; /* 上下外边距为1px */
}

/* 针对 top-space-1 中的动态按钮样式 */
#top-space-1 .button {
  margin: 5px 8px; /* 外边距 */
  /*padding-top: 0.2em;*/
  width: 200px; /* 宽度为180px */
  height: 60px; /* 固定高度为60px */
  display: flex; /* 使用Flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: center; /* 子元素垂直居中 */
  align-items: center; /* 子元素水平居中 */
  border: none; /* 无边框 */
  background-color: #ffffff; /* 背景颜色为白色 */
  cursor: pointer; /* 鼠标悬停变手型 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 4px; /* 圆角 */
  transition: transform 0.2s, background-color 0.3s; /* 过渡效果 */
  position: relative; /* 相对定位 */
}

#top-space-1 .button .name {
  font-size: 12pt; /* 字体大小为12pt */
  font-weight: bold; /* 字体加粗 */
  color: #5e5e5e; /* 字体颜色为深灰色 */
}

#top-space-1 .button .comment {
  font-size: 0.8em; /* 字体大小为0.8em */
  color: #666; /* 字体颜色为灰色 */
  display: block; /* 块级元素 */
  text-align: center; /* 文本居中 */
}

#top-space-1 .button:hover {
  transform: translateY(-5px); /* 悬停时按钮上移3px */
}

#top-space-1 .button:hover .name {
  color: #59a5f5; /* 悬停时字体颜色变为浅蓝色 */
}

/* 侧边栏整体样式，设为固定宽度 */
.sidebar {
  width: 12%; /* 侧边栏宽度为12% */
  background-color: #93c4f8; /* 背景颜色为浅蓝色 */
  color: white; /* 字体颜色为白色 */
  padding-top: 10px; /* 顶部内边距为10px */
  box-sizing: border-box; /* 包含内边距和边框 */
  display: flex; /* 使用Flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: space-between; /* 子元素之间的空间分配 */
  border-radius: 8px 0 0 8px; /* 左侧圆角 */
}

/* 侧边栏列表无内外边距 */
.sidebar ul {
  list-style-type: none; /* 去除默认列表样式 */
  padding: 0; /* 无内边距 */
  margin: 0; /* 无外边距 */
}

/* 侧边栏列表项样式 - Tab标签 */
.sidebar li {
  font-weight: bold; /* 字体加粗 */
  padding: 15px 10px; /* 内边距 */
  cursor: pointer; /* 鼠标悬停变手型 */
  border-bottom: 1px solid #ffffff; /* 底部边框为1px白色 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

/* 动态添加子项的样式 */
.sidebar .sidebar-group {
  font-weight: normal; /* 正常字体重量 */
  font-size: 0.9em; /* 字体大小为0.9em */
  padding-left: 15px; /* 左侧内边距为15px */
  margin-left: 5px; /* 左侧外边距为5px */
  margin-top: 10px; /* 顶部外边距为10px */
  cursor: pointer; /* 鼠标悬停变手型 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

/* 侧边栏项悬停和激活状态下的背景色变化 */
.sidebar li:hover, .sidebar li.active {
  background-color: #59a5f5; /* 背景颜色变为浅蓝色 */
}

/* 导入与导出按钮样式 */
.sidebar-buttons {
  margin-top: auto; /* 自动顶边距以将按钮置于底部 */
  padding: 10px 15px; /* 内边距 */
  text-align: left; /* 文本左对齐 */
}

.sidebar-buttons button,
.sidebar-buttons label {
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  color: #ffffff; /* 字体颜色为白色 */
  font-size: 0.9em; /* 字体大小为0.9em */
  cursor: pointer; /* 鼠标悬停变手型 */
  transition: font-weight 0.3s ease; /* 过渡效果 */
  opacity: 0.7; /* 透明度为0.7 */
}

.sidebar-buttons button:hover,
.sidebar-buttons label:hover {
  font-weight: bold; /* 字体加粗 */
  color: white; /* 字体颜色为白色 */
  opacity: 1; /* 透明度为1 */
}

/* 主要内容区域样式 */
.main-content {
  width: 88%; /* 宽度为88% */
  padding: 15px; /* 内边距为15px */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  position: relative; /* 相对定位 */
  display: grid; /* 使用Grid布局 */
  background-color: #ffffff; /* 背景颜色为白色 */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 0 8px 8px 0; /* 右侧圆角 */
}

/* 组容器样式 */
.group-container {
  width: 100%; /* 宽度为100% */
  background-color: #f0f0f5; /* 背景颜色为浅灰色 */
  padding: 15px; /* 内边距为15px */
  margin-bottom: 15px; /* 底部外边距为15px */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  display: grid; /* 使用Grid布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  justify-content: flex-start; /* 子元素左对齐 */
}

/* 添加淡灰色背景到每个动态组下方 */
.group {
  background-color: #eff8fe; /* 背景颜色为淡蓝色 */
  padding: 15px; /* 内边距为15px */
  margin-bottom: 15px; /* 底部外边距为15px */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  display: grid; /* 使用Grid布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  justify-content: flex-start; /* 子元素左对齐 */
}

/* 组名称样式 */
.group-name {
  width: calc(100% - 5px); /* 宽度为100%减去5px */
  padding: -8px; /* 内边距为-8px */
  text-align: left; /* 文本左对齐 */
  margin-bottom: 15px; /* 底部外边距为15px */
  border-radius: 50px 0 0 50px; /* 左侧圆角 */
  color: #343a40; /* 字体颜色为深灰色 */
  font-weight: bold; /* 字体加粗 */
  position: relative; /* 相对定位 */
  padding-left: 8px; /* 左侧内边距为8px */
}

/* 在group-name文字前添加一个浅蓝色色块 */
.group-name::before {
  content: ''; /* 伪元素内容为空 */
  display: inline-block; /* 行内块元素 */
  background-color: #59a5f5; /* 背景颜色为浅蓝色 */
  width: 15px; /* 宽度为15px */
  height: 180%; /* 高度为180% */
  position: absolute; /* 绝对定位 */
  left: -15px; /* 左侧偏移-15px */
  top: -15px; /* 顶部偏移-15px */
  border-radius: 8px 0; /* 圆角 */
}

/* 按钮样式 */
.button {
  margin: 5px 8px; /* 外边距 */
  /*padding-top: 0.2em;*/
  width: 200px; /* 宽度为200px */
  height: 60px; /* 固定高度为60px */
  display: flex; /* 使用Flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: center; /* 子元素垂直居中 */
  align-items: center; /* 子元素水平居中 */
  border: none; /* 无边框 */
  background-color: #ffffff; /* 背景颜色为白色 */
  cursor: pointer; /* 鼠标悬停变手型 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 4px; /* 圆角 */
  transition: transform 0.2s, background-color 0.3s; /* 过渡效果 */
  position: relative; /* 相对定位 */
}

/* 按钮名称样式 */
.button .name {
  font-size: 12pt; /* 字体大小为12pt */
  font-weight: bold; /* 字体加粗 */
  color: #5e5e5e; /* 字体颜色为深灰色 */
  margin-bottom: 0.2em; /* 名称与注释之间的间距为0.2em */
}

/* 按钮注释样式 */
.button .comment {
  font-size: 0.8em; /* 字体大小为0.8em */
  color: #666; /* 字体颜色为灰色 */
  display: block; /* 块级元素 */
  text-align: center; /* 文本居中 */
  /* 如果需要从注释上方控制间距，可以添加 margin-top: 0.2em; */
}

/* 按钮悬停效果 */
.button:hover {
  transform: translateY(-3px); /* 悬停时按钮上移3px */
}

.button:hover .name {
  color: #59a5f5; /* 悬停时字体颜色变为浅蓝色 */
}

.button:hover .comment {
  color: #59a5f5; /* 悬停时字体颜色变为浅蓝色 */
}

/* 按钮容器样式 */
.group-buttons-container {
  display: flex; /* 使用Flex布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 5px; /* 子元素之间的间距为5px */
}

/* 输入框面板样式 */
#inputPanel {
  position: absolute; /* 绝对定位 */
  background: #fff; /* 背景颜色为白色 */
  border: 1px solid #ccc; /* 边框颜色为灰色 */
  padding: 20px; /* 内边距为20px */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  z-index: 1000; /* 层级为1000 */
  border-radius: 8px; /* 圆角 */
}

/* 输入框样式 */
#inputPanel input[type="text"] {
  width: 100%; /* 宽度为100% */
  padding: 8px; /* 内边距为8px */
  margin-bottom: 10px; /* 底部外边距为10px */
  border: 1px solid #ddd; /* 边框颜色为浅灰色 */
  border-radius: 4px; /* 圆角 */
  box-sizing: border-box; /* 包含内边距和边框 */
}

/* 按钮样式 */
#inputPanel button {
  padding: 8px 16px; /* 内边距 */
  background-color: #007bff; /* 背景颜色为蓝色 */
  color: white; /* 字体颜色为白色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停变手型 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

#inputPanel button:hover {
  background-color: #0056b3; /* 悬停时背景颜色变为深蓝色 */
}

/* 自定义右键菜单样式 */
#contextMenu {
  background: #ffffff; /* 背景颜色为白色 */
  border: 1px solid #ccc; /* 边框颜色为灰色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  border-radius: 8px; /* 圆角 */
}

/* 右键菜单按钮样式 */
#contextMenu button {
  display: block; /* 块级元素 */
  width: 100%; /* 宽度为100% */
  padding: 10px; /* 内边距为10px */
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  cursor: pointer; /* 鼠标悬停变手型 */
  text-align: left; /* 文本左对齐 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

#contextMenu button:hover {
  background-color: #e9ecef; /* 悬停时背景颜色变为浅灰色 */
}