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

/* Macro badge colors */
/* Clinic: canonical macro fills (was orange/light-blue/green/purple — carbs/fat were swapped). */
.calories-badge {
  background-color: var(--fs-macro-kcal) !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: var(--fs-macro-protein) !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 {
  /* darker fat token as the FILL so white text clears WCAG AA (5.0:1 vs 3.2:1) */
  background-color: var(--fs-macro-fat-text) !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 {
  /* darker carbs token as the FILL so white text clears WCAG AA (5.5:1 vs 3.4:1) */
  background-color: var(--fs-macro-carbs-text) !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 is a small glyph (✓/▲/▼) paired with visually-hidden text inside the badge —
   identity colors stay constant; status never swaps the background (WCAG 1.4.1). */
.macro-status-glyph {
  margin-left: 6px;
  font-size: 0.85em;
}

/* 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;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Meal Target Ranges — Phase 1 (READ-ONLY display): status glyphs on the
   mandatory macro chips, identity dots, and an informational goal strip + hints.
   No editor/sheet/undo/eaten styles (deferred to Phase 2). All status is glyph +
   visually-hidden text; never color-only (WCAG 1.4.1). Load-bearing text meets
   WCAG AA; design tokens are used where they exist.
   ══════════════════════════════════════════════════════════════════════════ */

/* Status glyph next to a mandatory macro value (✓ in range / ▼ under / ▲ over). */
.meal-macro-v3 .macro-status-glyph {
  margin-left: 3px;
  font-size: 0.9em;
  font-weight: 700;
}
.macro-glyph-ok {
  color: #047857;
} /* green — in range (~5.5:1 on light chips, AA) */
.macro-glyph-off {
  color: #b45309;
} /* amber — under/over (~5.0:1 on light chips, AA) */

/* (Identity dots are already drawn by the existing ::before on the chips — no extra dot here.) */

/* Goal strip: informational caption row under the card header. NOT interactive in Phase 1 —
   deliberately no fill/button chrome so it doesn't read as the tappable daily-summary card. */
.meal-goal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  margin: 0;
  border-top: 1px solid #eef2f7;
  text-align: left;
  font-size: 0.78rem;
}
.meal-goal-strip--readonly {
  cursor: default;
}
/* slate-500 muted legend (AA on the #f8fafc strip; slate-400 would fail). */
.meal-goal-targets {
  color: #64748b;
}
.meal-goal-targets .mg-kcal {
  font-weight: 700;
  color: var(--fs-macro-kcal);
}
.meal-goal-targets .mg-p {
  color: #1d4ed8; /* blue-700 — AA as load-bearing text on the light strip */
  font-weight: 600;
}
.meal-goal-targets .mg-c {
  color: var(--fs-macro-carbs-text);
  font-weight: 600;
}
.meal-goal-targets .mg-f {
  color: var(--fs-macro-fat-text);
  font-weight: 600;
}

/* Right-hand status: a green "In range ✓" pill (positive confirmation only). When off-target the
   chip glyphs + expanded hints carry the detail, so no separate "off target" chip is shown. */
.meal-goal-pill {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.meal-goal-pill.in-range {
  background: #d1fae5;
  color: #047857; /* green on light green — AA */
}

/* Amber inline hint shown when a mandatory macro is out of range. */
.meal-goal-hint {
  padding: 6px 12px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.75rem;
  line-height: 1.35;
}