body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft Yahei", sans-serif;
}

.main-navbar {
  background: linear-gradient(135deg, #3bb273, #22a6b3);
}

.overview-item {
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
}

.bg-soft-green {
  background: rgba(59, 178, 115, 0.08);
}

.bg-soft-blue {
  background: rgba(34, 166, 179, 0.08);
}

.bg-soft-orange {
  background: rgba(255, 159, 67, 0.08);
}

.bg-soft-purple {
  background: rgba(136, 84, 208, 0.08);
}

#goal-status-card {
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.1s ease;
}

#goal-status-card.goal-success {
  background-color: #e6f7f0;
  border-color: #52c41a;
  box-shadow: 0 0 0 0.125rem rgba(82, 196, 26, 0.2);
}

#goal-status-card.goal-warning {
  background-color: #fff7e6;
  border-color: #faad14;
  box-shadow: 0 0 0 0.125rem rgba(250, 173, 20, 0.2);
}

#goal-status-card.goal-danger {
  background-color: #fff1f0;
  border-color: #ff4d4f;
  box-shadow: 0 0 0 0.125rem rgba(255, 77, 79, 0.2);
}

#goal-status-card:hover {
  transform: translateY(-1px);
}

.table td,
.table th {
  vertical-align: middle;
}

.btn:active {
  transform: translateY(1px);
}

.readonly-input {
  background-color: #f8f9fa !important;
  border-color: #e9ecef !important;
  color: #495057;
}

/* 食物模块布局与样式优化 */

.food-card-body {
  padding: 16px 20px;
}

.food-form {
  width: 100%;
  gap: 15px;
}

.food-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.food-label {
  font-size: 14px;
  color: #212529;
  margin-bottom: 6px;
  white-space: nowrap;
}

.food-name-group {
  flex: 1;
}

.food-input,
.food-name-group .form-select,
.food-name-group .form-control,
.food-total,
.food-add-btn {
  height: 40px;
  border-radius: 6px;
}

.food-total {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid #ced4da;
  background-color: #ffffff;
}

.food-add-btn {
  width: 90px;
  justify-content: center;
  background-color: #198754;
  border-color: #198754;
}

.food-add-btn:hover {
  background-color: #157347;
  border-color: #157347;
}

/* 桌面端：完全水平一行对齐 */
@media (min-width: 768px) {
  .food-form {
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .food-name-field {
    flex: 2.2;
  }

  .food-kcal-field,
  .food-weight-field,
  .food-total-field {
    flex: 1;
  }

  .food-button-field {
    flex: 0 0 auto;
  }
}

/* 移动端：允许换行堆叠，保持整洁 */
@media (max-width: 767.98px) {
  .food-form {
    flex-direction: row;
  }

  .food-name-field,
  .food-kcal-field,
  .food-weight-field,
  .food-total-field,
  .food-button-field {
    flex: 1 1 100%;
  }
}

/* 运动模块布局与样式优化 */

.exercise-card-body {
  padding: 16px 20px;
}

.exercise-form {
  width: 100%;
  gap: 15px;
}

.exercise-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.exercise-label {
  font-size: 14px;
  color: #212529;
  margin-bottom: 6px;
  white-space: nowrap;
}

.exercise-name-group {
  flex: 1;
}

.exercise-input,
.exercise-total,
.exercise-add-btn {
  height: 40px;
  border-radius: 6px;
}

.exercise-total {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid #ced4da;
  background-color: #ffffff;
}

.exercise-add-btn {
  width: 90px;
  justify-content: center;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.exercise-add-btn:hover {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
}

@media (min-width: 768px) {
  .exercise-form {
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .exercise-name-field {
    flex: 2.2;
  }

  .exercise-duration-field,
  .exercise-kcal-field,
  .exercise-total-field {
    flex: 1;
  }

  .exercise-button-field {
    flex: 0 0 auto;
  }
}

@media (max-width: 767.98px) {
  .exercise-form {
    flex-direction: row;
  }

  .exercise-name-field,
  .exercise-duration-field,
  .exercise-kcal-field,
  .exercise-total-field,
  .exercise-button-field {
    flex: 1 1 100%;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: 1rem;
  }
}

