// /* 设置饮食规划页面的基本样式 */
// ion-content {
//   background-color: #f7f7f7; /* 背景颜色 */
//   padding: 16px;
//   font-family: 'Arial', sans-serif;
// }

.back-button {
  opacity: 0.2;  /* 0 表示完全透明，1 表示完全不透明 */
  --background: transparent;  /* 确保背景透明 */
  --border: none;             /* 删除边框 */
  --box-shadow: none;         /* 删除阴影 */
}

.chevron-back {
  color: #ccc; /* 将箭头颜色设为浅灰色 */
  font-size: 10px; /* 可根据实际情况调整箭头大小 */
}

ion-toolbar {
  padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
  width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
  margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
  background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
  box-shadow: none; /* 去除阴影 */
  margin: 10px;
}

.empty-message {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 50%;             /* 让容器占满父容器高度 */
  text-align: center;       /* 文本水平居中 */
  font-size: 20px;          /* 提示信息的字体大小 */
  background-color: #f7f3f3; /* 提示框的背景颜色 */
  color: #f70920;           /* 提示信息的字体颜色 */
  padding: 20px;            /* 内边距，避免文本紧贴边缘 */
  border-radius: 10px;      /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(253, 253, 253, 0); /* 添加阴影，使其更突出 */
}



// /* 显示加载中的状态 */
// ion-spinner {
//   display: block;
//   margin: 40px auto;
// }

// /* 错误消息 */
// .error-message {
//   text-align: center;
//   color: #f44336; /* 错误消息为红色 */
//   font-size: 18px;
//   margin-top: 20px;
// }

// /* 饮食卡片样式 */
// .diet-card {
//   border-radius: 12px; /* 卡片圆角 */
//   overflow: hidden; /* 防止内容溢出 */
//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
//   margin-bottom: 16px;
//   background-color: #ffffff; /* 白色背景 */
// }

// .diet-card-header {
//   background-color: #e6f7e6; /* 淡绿色背景 */
//   padding: 16px;
//   display: flex;
//   align-items: center;
//   border-bottom: 2px solid #4caf50; /* 绿色底边 */
// }

// .diet-card-title {
//   font-size: 20px;
//   font-weight: bold;
//   color: #2c6e4f; /* 深绿色 */
//   display: flex;
//   align-items: center;
//   gap: 8px; /* 图标与文字之间的间距 */
// }

// .diet-card-content {
//   padding: 16px;
//   color: #555;
//   font-size: 16px;
//   line-height: 1.5;
// }

// /* 当没有饮食规划时，按钮样式 */
// // ion-button {
// //   margin-top: 20px;
// //   background-color: #99ffcc;
// //   color: white;
// //   font-weight: bold;
// //   border-radius: 8px;
// //   padding: 12px;
// //   transition: background-color 0.3s ease;
// // }

// // ion-button:hover {
// //   background-color: #e53935; /* 按钮悬停时颜色变化 */
// // }

// /* 响应式布局调整 */
// @media (max-width: 768px) {
//   ion-header {
//     padding: 8px;
//   }

//   ion-title {
//     font-size: 18px;
//   }

//   .diet-card {
//     margin: 0 auto;
//     max-width: 90%;
//   }

//   .diet-card-header {
//     padding: 12px;
//   }

//   .diet-card-content {
//     padding: 12px;
//     font-size: 14px;
//   }

//   // ion-button {
//   //   font-size: 14px;
//   //   padding: 10px;
//   // }
// }
/* 设置饮食规划页面的基本样式 */
ion-content {
  background-color: #f7f7f7;  /* 背景颜色 */
  padding: 16px;
  font-family: 'Arial', sans-serif;
}

// /* 顶部工具栏的返回按钮样式 */
// ion-toolbar {
//   padding: 3px 5px;  /* 缩小工具栏内边距 */
//   width: fit-content;  /* 使工具栏宽度适应内容 */
//   margin: 0 auto;  /* 居中对齐 */
//   background-color: transparent;  /* 背景透明 */
//   box-shadow: none;  /* 去除阴影 */
// }

ion-button {
  padding: 0;  /* 去除按钮内边距 */
}

.chevron-back {
  color: #aaa; /* 设置箭头颜色为浅灰色 */
  font-size: 24px;  /* 设置箭头大小 */
}

/* 错误消息 */
.error-message {
  text-align: center;
  color: #f44336; /* 错误消息为红色 */
  font-size: 18px;
  margin-top: 20px;
}

/* 饮食卡片样式 */
.diet-card {
  border-radius: 12px; /* 卡片圆角 */
  overflow: hidden; /* 防止内容溢出 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  margin-bottom: 16px;
  background-color: #ffffff; /* 白色背景 */
}

.diet-card-header {
  background-color: #e6f7e6; /* 淡绿色背景 */
  padding: 16px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #4caf50; /* 绿色底边 */
}

.diet-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c6e4f; /* 深绿色 */
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文字之间的间距 */
}

.diet-card-content {
  padding: 16px;
  color: #555;
  font-size: 16px;
  line-height: 1.5;
}
