/* Shared macro badge styles used across multiple components */

/* Macro badge colors */
.calories-badge {
  background-color: #ff6b35 !important;
  color: white !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  letter-spacing: 0.3px;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.protein-badge {
  background-color: #4a90e2 !important;
  color: white !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  letter-spacing: 0.3px;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.fat-badge {
  background-color: #27ae60 !important;
  color: white !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  letter-spacing: 0.3px;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.carbs-badge {
  background-color: #9b59b6 !important;
  color: white !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  letter-spacing: 0.3px;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

/* Ensure badges stay inline in containers */
.meal-macro-badges .badge {
  display: inline-block !important;
}

/* Badge hover effects */
.calories-badge:hover,
.protein-badge:hover,
.fat-badge:hover,
.carbs-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .calories-badge,
  .protein-badge,
  .fat-badge,
  .carbs-badge {
    padding: 7px 14px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 1200px) {
  .calories-badge,
  .protein-badge,
  .fat-badge,
  .carbs-badge {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 768px) {
  .calories-badge,
  .protein-badge,
  .fat-badge,
  .carbs-badge {
    padding: 4px 8px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center;
    min-width: fit-content;
  }
}

@media (max-width: 576px) {
  .calories-badge,
  .protein-badge,
  .fat-badge,
  .carbs-badge {
    padding: 3px 6px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center;
    min-width: fit-content;
  }
}

/* Range status overrides - when macros are compared against targets */

/* In range: green tones */
.calories-in-range,
.protein-in-range,
.fat-in-range,
.carbs-in-range {
  background-color: #2e7d32 !important;
}

/* Below range: amber tones */
.calories-below-range,
.protein-below-range,
.fat-below-range,
.carbs-below-range {
  background-color: #ef6c00 !important;
}

/* Above range: red tones */
.calories-above-range,
.protein-above-range,
.fat-above-range,
.carbs-above-range {
  background-color: #c62828 !important;
}

/* Ensure macro containers don't clip content on mobile */
@media (max-width: 768px) {
  .meal-macro-badges,
  .food-macros,
  .macro-container {
    overflow: visible !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}