/* Here is your custom css styles. */
/* 基础样式：合并边框，设置宽度和内边距 */
.my-beautiful-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 确保圆角生效 */
}

/* 表头和单元格样式 */
.my-beautiful-table th,
.my-beautiful-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #dddddd;
}

.my-beautiful-table th{
	background-color: #f2f2f2; /* 表头背景色，使其更突出 */
	color: red; /* 字体颜色为红色 */
	font-weight: bold; /* 字体加粗 */
}

/* 表头样式：设置背景色和文字颜色 */
.my-beautiful-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

/* 斑马纹效果：奇偶行不同背景色，提升可读性 */
.my-beautiful-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

/* 悬停效果：鼠标悬停时高亮当前行 */
.my-beautiful-table tbody tr:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

/* 最后一行去掉底部边框 */
.my-beautiful-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

/* 橙色按钮---------- 开始 */
.orange-btn {
  background-color: #FF6B00; /* 活力橙色背景 */
  color: #FFFFFF;            /* 白色文字 */
  border: none;              /* 去除默认边框 */
  padding: 12px 24px;        /* 内边距，让按钮更饱满 */
  font-size: 16px;           /* 字体大小 */
  border-radius: 8px;        /* 圆角，看起来更柔和 */
  cursor: pointer;           /* 鼠标悬停时显示手型图标 */
  transition: background-color 0.3s ease, transform 0.2s ease; /* 增加过渡动画 */
  box-shadow: 0 4px 6px rgba(255, 107, 0, 0.3); /* 增加一点橙色阴影，更有立体感 */
}

/* 鼠标悬停状态 */
.orange-btn:hover {
  background-color: #E65C00; /* 悬停时颜色稍微变深 */
}

/* 鼠标点击按下状态 */
.orange-btn:active {
  transform: scale(0.98);    /* 点击时按钮轻微缩小，提供真实的按压反馈 */
  background-color: #CC5200; /* 点击时颜色进一步加深 */
}
/* 橙色按钮---------- 结束 */