/* ============================================================================
   NutriGuru Design System v1 — consolidated tokens + noise-reduction pass.
   Additive layer only: no markup/logic changes, no palette replacement.
   Loaded last so it can calmly retire redundant glow/border/spacing rules
   across older screen stylesheets without touching their JS or structure.
   ============================================================================ */

:root {
  /* Spacing scale (STEP 1 / §24) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radius scale (§25) */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Motion (§32) */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);

  /* Semantic nutrient colors reused everywhere, kept identical to existing
     palette — only centralized, never replaced (§14 / §37). */
  --ds-protein: #62d2ff;
  --ds-carbs: #ffd166;
  --ds-fat: #ff9d6c;
  --ds-fiber: #59e0a6;
  --ds-potassium: #b39bff;
  --ds-calories: #b7ff00;
  --ds-orange: #ff9d16;
  --ds-orange-deep: #ff7900;

  /* Card elevation tokens (§5) */
  --ds-card1-bg: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --ds-card1-border: rgba(255,255,255,.10);
  --ds-card2-bg: rgba(255,255,255,.03);
  --ds-card2-border: rgba(255,255,255,.08);
  --ds-card3-bg: rgba(255,255,255,.02);
  --ds-card3-border: rgba(255,255,255,.06);
}

/* ----------------------------------------------------------------------
   Reduce ambient glow/border noise (§6). Neon stays an accent, not a
   background decoration: soften the loudest ambient shadows app-wide.
   ---------------------------------------------------------------------- */
.ng-card, .meal-card-glass, .supplement-diary-card, .fasting-home-widget,
.fasting-meals-widget, .screen-photo-card {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

/* ----------------------------------------------------------------------
   Typography hierarchy (§7): keep numerals bold, ease off secondary text.
   ---------------------------------------------------------------------- */
.ds-eyebrow {
  display: block;
  margin: 0 0 var(--sp-1);
  color: var(--muted-foreground, #b6c3d0);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .82;
}
.ds-h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.ds-h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.005em; line-height: 1.25; }
.ds-h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ds-body { font-size: 14px; font-weight: 500; line-height: 1.45; }
.ds-secondary { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted-foreground, #9fb0c1); opacity: .88; }
.ds-caption { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--muted-foreground, #8b9bab); opacity: .8; }

/* ----------------------------------------------------------------------
   Unified button system (§23): normalize height/radius/icon spacing
   without altering colors already assigned per button role.
   ---------------------------------------------------------------------- */
.ng-btn-primary, .ng-btn-secondary, .ng-btn-accent, .ds-btn {
  min-height: 46px;
  border-radius: var(--r-sm);
  gap: var(--sp-2);
  transition: transform var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.ng-btn-primary:active, .ng-btn-secondary:active, .ng-btn-accent:active, .ds-btn:active {
  transform: scale(.97);
}
.ds-btn-compact { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* ----------------------------------------------------------------------
   Safe-area + bottom nav clearance (§9, §27). Additive floor beneath the
   existing calc() so content never sits under the nav on any device.
   ---------------------------------------------------------------------- */
#screenContent {
  padding-bottom: max(calc(106px + env(safe-area-inset-bottom)), 120px) !important;
  scroll-padding-bottom: var(--sp-6);
}
.bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom), var(--sp-2));
}

/* ----------------------------------------------------------------------
   Card system compaction (§5, §13, §15, §16): tone down padding/height
   on the most repetitive widget types without changing their markup.
   ---------------------------------------------------------------------- */
.macro-badge {
  padding: var(--sp-3) var(--sp-2) !important;
  border-radius: var(--r-sm) !important;
}
.macro-badge i, .macro-badge svg { font-size: 15px !important; opacity: .82; }

/* Compact empty states everywhere (§15): center a small icon, short copy
   and one CTA instead of a tall block. */
.supplements-diary-empty {
  padding: var(--sp-5) var(--sp-4) !important;
  gap: var(--sp-2) !important;
}
.supplements-empty-icon {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
  margin: 0 auto var(--sp-1) !important;
}
.supplements-empty-title { font-size: 14px !important; margin: 0 !important; }
.supplements-empty-body { font-size: 12.5px !important; opacity: .78; margin: 0 0 var(--sp-2) !important; }

/* Meals list empty state: same compact treatment. */
#mealsList > .ng-card.p-6 {
  padding: var(--sp-5) var(--sp-4) !important;
}
#mealsList > .ng-card.p-6 i { font-size: 18px !important; margin-bottom: var(--sp-2) !important; }

/* ----------------------------------------------------------------------
   NG Coach diet-optimization card (§19–§22): tighter rhythm, smaller CTA,
   score reads as a compact badge rather than a headline number.
   ---------------------------------------------------------------------- */
.ng-card:has(#dietOptimizeBtn) {
  padding: var(--sp-4) !important;
}
.ng-card:has(#dietOptimizeBtn) .ng-tag-gray {
  font-weight: 800;
  letter-spacing: .01em;
}
#dietOptimizeBtn {
  min-height: 44px !important;
  padding: var(--sp-2) var(--sp-4) !important;
  box-shadow: none !important;
}
.ng-card:has(#dietOptimizeBtn) .space-y-2.mt-4 > div { gap: var(--sp-2) !important; }

/* ----------------------------------------------------------------------
   Fasting widget compaction (§18): shrink vertical rhythm, keep single
   primary CTA already resolved by fasting-ui.js state logic.
   ---------------------------------------------------------------------- */
.fasting-meals-widget, .fasting-home-widget {
  padding: var(--sp-4) !important;
  border-radius: var(--r-md) !important;
}
.fasting-meal-summary { gap: var(--sp-2) var(--sp-3) !important; margin: var(--sp-2) 0 !important; }
.fasting-outline-button, .fasting-cta, .fasting-link {
  min-height: 40px !important;
}

/* ----------------------------------------------------------------------
   Food recognition / photo CTA card (§17): let overlay + single CTA read
   clearly, no duplicated actions.
   ---------------------------------------------------------------------- */
.screen-photo-card {
  padding: var(--sp-4) !important;
  border-radius: var(--r-lg) !important;
}
.screen-photo-card .ng-btn-secondary {
  min-height: 40px !important;
  margin-top: var(--sp-3) !important;
}

/* ----------------------------------------------------------------------
   Add-food CTA (§12): compact but still the clear primary action.
   ---------------------------------------------------------------------- */
.meals-screen-header .ng-btn-primary {
  min-height: 42px !important;
  padding: 8px 16px !important;
  box-shadow: 0 6px 16px rgba(255, 138, 0, .22) !important;
}

/* ----------------------------------------------------------------------
   Icon system (§26): keep icon containers from ballooning in size.
   ---------------------------------------------------------------------- */
.meal-card-icon, .supplement-diary-icon, .fasting-home-widget i.fa-solid {
  font-size: 18px;
}

/* ----------------------------------------------------------------------
   Micro-interactions (§32): gentle, GPU-friendly, short-duration only.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ng-card, .meal-card-glass, .supplement-diary-card {
    animation: ds-card-in var(--dur-base) var(--ease-standard) both;
  }
}
@keyframes ds-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------
   Responsive QA guardrails (§8, §29): never allow horizontal overflow,
   keep a sane centered max-width on larger viewports.
   ---------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
#screenContent, .app-header { max-width: 760px; }
@media (min-width: 900px) {
  #screenContent { max-width: 900px; }
}
@media (min-width: 1200px) {
  #screenContent { max-width: 1040px; }
}

/* Ensure every primary tap target meets 44px minimum (§8). */
button, .ng-btn-primary, .ng-btn-secondary, .ng-btn-accent, .pill-tab, .back-btn {
  min-height: 44px;
}

/* ============================================================================
   Phase 2 — hierarchy pass (§4, §5, §10–§22, §28)
   ============================================================================ */

/* Header compaction (§28): same concept, less vertical space. */
.app-header {
  min-height: 68px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-bottom-color: rgba(255, 255, 255, .07) !important;
}
.header-profile-button,
.header-action-button {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
  font-size: 16px !important;
}
.header-action-button i { font-size: 17px !important; }
.header-quick-button i { font-size: 17px !important; }
.header-identity { padding-left: 10px !important; }
.header-identity p:first-child { font-size: 12px !important; font-weight: 500 !important; color: #9fb0c1 !important; }
.header-identity p:last-child { margin-top: 2px !important; font-size: 16px !important; font-weight: 800 !important; }
.header-notification-dot { width: 9px !important; height: 9px !important; top: 5px !important; right: 5px !important; }

/* Bottom navigation (§10): compact + calmer inactive state. */
.bottom-nav {
  min-height: 62px !important;
  padding: 6px !important;
  border-color: rgba(148, 163, 184, .18) !important;
}
.nav-item {
  min-height: 48px !important;
  font-size: 10.5px !important;
  gap: 3px !important;
  color: #8b9bab !important;
}
.nav-item i { font-size: 17px !important; }
.nav-item.active {
  color: var(--primary) !important;
  background: rgba(85, 224, 172, .10) !important;
}
.nav-item.active::after { width: 16px !important; height: 2px !important; bottom: 2px !important; }

/* Card levels (§5): Level 1 = primary surfaces (NG Coach, today nutrition). */
.ng-card:has(#dietOptimizeBtn) {
  background: var(--ds-card1-bg) !important;
  border-color: var(--ds-card1-border) !important;
  border-radius: var(--r-lg) !important;
}

/* Nutrition tracking card (§11, §13, §14): calories lead, macros compact,
   secondary nutrients stay small and scannable. */
.meals-page .meals-nutrition-card,
.meals-nutrition-card {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-3) !important;
}
.nutri-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.nutri-header .ds-h3 { color: #fff; font-size: 17px; }
.nutri-header .ds-secondary { margin: 2px 0 0; }
.nutri-header .ng-tag {
  flex: 0 0 auto;
  color: #071000 !important;
  background: var(--meals-home-lime, #b7ff00) !important;
  border-color: var(--meals-home-lime, #b7ff00) !important;
}

.nutri-primary {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--ds-card1-bg);
  border: 1px solid var(--ds-card1-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.nutri-primary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.nutri-primary-label { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 700; color: #e9f0f7; }
.nutri-primary-label i { color: var(--ds-calories); font-size: 14px; opacity: .9; }
.nutri-primary-value { font-size: 24px; font-weight: 800; line-height: 1; color: #fff; margin: 0; }
.nutri-primary-unit { font-size: 12px; font-weight: 600; color: #aebccc; margin-left: 4px; }
.nutri-primary-goal { font-size: 12px; font-weight: 600; color: #8b9bab; margin-left: 6px; }

.nutri-bar { height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); overflow: hidden; }
.nutri-primary .nutri-bar { margin-top: var(--sp-3); }
.nutri-bar-fill { display: block; height: 100%; border-radius: inherit; transition: width .4s var(--ease-standard); }
.nutri-primary .nutri-bar-fill { background: linear-gradient(90deg, var(--ds-calories), var(--ds-orange)); }

.nutri-macro-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.nutri-macro-cell {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  background-color: rgba(255, 255, 255, .04);
  background-image: none !important;
}
.nutri-macro-label { font-size: 10.5px; font-weight: 700; color: #aebccc; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutri-macro-value { font-size: 17px; font-weight: 800; line-height: 1; margin: 0; }
.nutri-macro-unit { font-size: 10.5px; font-weight: 600; margin-left: 2px; opacity: .72; }
.nutri-macro-cell .nutri-bar { height: 4px; }

.nutri-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.nutri-detail-cell {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .10);
  min-width: 0;
  background-color: rgba(255, 255, 255, .04);
  background-image: none !important;
}
.nutri-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.nutri-detail-label { font-size: 11.5px; font-weight: 600; color: #aebccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutri-detail-head i { font-size: 12px; opacity: .8; flex: 0 0 auto; }
.nutri-detail-value { font-size: 15px; font-weight: 800; margin: 6px 0 0; line-height: 1; }
.nutri-detail-unit { font-size: 10.5px; font-weight: 600; opacity: .72; }
.nutri-detail-cell .nutri-bar { height: 3.5px; margin-top: 8px; }

/* Neutral borders win over the old vivid per-nutrient borders (§6, §14):
   color now lives in the value, icon and progress fill, not the whole card. */
.meals-page .meals-nutrition-card .nutri-macro-cell,
.meals-page .meals-nutrition-card .nutri-detail-cell {
  border-color: rgba(255, 255, 255, .10) !important;
}

/* Semantic nutrient accents (§14), centralized and applied only where it
   communicates status: value, icon, progress. */
.nutrient-box--calories { --nc: #b7ff00; }
.nutrient-box--protein { --nc: #62d2ff; }
.nutrient-box--carbs { --nc: #ffd166; }
.nutrient-box--fat { --nc: #ff9d6c; }
.nutrient-box--fiber { --nc: #59e0a6; }
.nutrient-box--sugar { --nc: #f6a6d6; }
.nutrient-box--sodium { --nc: #8fd7f5; }
.nutrient-box--saturatedFat { --nc: #ffc36f; }
.nutrient-box--potassium { --nc: #b39bff; }
.nutri-macro-cell .nutri-macro-value,
.nutri-detail-cell .nutri-detail-value { color: var(--nc, #e9f0f7); }
.nutri-macro-cell .nutri-bar-fill,
.nutri-detail-cell .nutri-bar-fill { background: var(--nc, #9fb0c1); }
.nutri-detail-cell .nutri-detail-head i { color: var(--nc, #9fb0c1); }

/* ============================================================================
   Nutrition screen polish — readable AI card and expressive identity.
   This is intentionally scoped to the Meals screen so other product areas
   keep their existing behavior and visual language.
   ============================================================================ */

.meals-page {
  --nutrition-lime: #B7FF00;
  --nutrition-cyan: #22D3EE;
  --nutrition-green: #52E6A8;
  --nutrition-purple: #A970FF;
  --nutrition-orange: #FF9F1A;
}

.meals-screen-header {
  min-height: 48px;
}

.meals-screen-header h2 {
  font-size: clamp(24px, 6vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}

.meals-screen-header p {
  color: #9FB0C1 !important;
  font-size: 13px !important;
}

/* NG Coach: primary AI surface with a calm navy base and small, vivid
   semantic accents. Direct targeting is important because this component
   intentionally uses .ng-coach-card rather than the generic .ng-card. */
.meals-page .ng-coach-card {
  position: relative;
  isolation: isolate;
  padding: 18px !important;
  color: #F4F7F8;
  background:
    radial-gradient(circle at 92% 4%, rgba(183, 255, 0, .12), transparent 30%),
    radial-gradient(circle at 5% 92%, rgba(34, 211, 238, .07), transparent 28%),
    linear-gradient(145deg, rgba(16, 37, 44, .98), rgba(7, 18, 25, .98)) !important;
  border: 1px solid rgba(183, 255, 0, .20) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 20px rgba(183, 255, 0, .06) !important;
}

.meals-page .ng-coach-card::before {
  z-index: -1;
  width: 190px;
  height: 190px;
  top: -92px;
  right: -72px;
  background: radial-gradient(circle, rgba(183, 255, 0, .13), transparent 68%);
}

.meals-page .ng-coach-card-header {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.meals-page .ng-coach-header-left {
  align-items: flex-start;
  gap: 10px;
}

.meals-page .ng-coach-sparkle-icon {
  width: 40px;
  height: 40px;
  margin-top: 1px;
  border: 0;
  border-radius: 13px;
  color: #071200;
  background: linear-gradient(145deg, var(--nutrition-lime), var(--nutrition-green));
  box-shadow: 0 6px 18px rgba(183, 255, 0, .16);
}

.meals-page .ng-coach-kicker {
  color: var(--nutrition-lime);
  font-size: 11px;
  letter-spacing: .11em;
  line-height: 1.1;
}

.meals-page .ng-coach-title {
  max-width: 100%;
  margin-top: 4px;
  color: #FFFFFF;
  font-size: clamp(15px, 4vw, 18px) !important;
  font-weight: 750 !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.meals-page .ng-coach-score-pill {
  min-width: 76px;
  min-height: 44px;
  padding: 8px 10px;
  gap: 4px;
  border-radius: 15px;
  justify-content: center;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  line-height: 1 !important;
}

.meals-page .ng-coach-score-pill i {
  color: currentColor;
  font-size: 12px;
}

.meals-page .ng-coach-score-val {
  font-size: 18px;
  line-height: 1;
}

.meals-page .ng-coach-score-max {
  font-size: 11px;
  line-height: 1;
}

.meals-page .ng-coach-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 16px;
}

.meals-page .ng-coach-chip {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 11px;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.meals-page .ng-coach-chip-dot {
  width: 7px;
  height: 7px;
  box-shadow: none !important;
}

.meals-page .ng-coach-chip-text {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.meals-page .ng-coach-suggestions {
  gap: 10px;
  margin: 0 0 16px;
}

.meals-page .ng-coach-suggestion-item {
  align-items: flex-start;
  gap: 9px;
}

.meals-page .ng-coach-check {
  width: 21px;
  height: 21px;
  margin-top: 1px;
  background: rgba(183, 255, 0, .13);
  border-color: rgba(183, 255, 0, .38);
  color: var(--nutrition-lime);
  font-size: 10px;
}

.meals-page .ng-coach-suggestion-text {
  color: #E7EFF4;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.meals-page .ng-coach-cta-btn {
  min-height: 48px !important;
  padding: 11px 14px !important;
  border-radius: 15px !important;
  color: #071200;
  background: linear-gradient(135deg, #B7FF00 0%, #52E6A8 100%) !important;
  box-shadow: 0 8px 20px rgba(183, 255, 0, .18) !important;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.meals-page .ng-coach-cta-btn:hover,
.meals-page .ng-coach-cta-btn:focus-visible {
  box-shadow: 0 10px 24px rgba(183, 255, 0, .26) !important;
  filter: brightness(1.04);
}

.meals-page .ng-coach-cta-label {
  min-width: 0;
  justify-content: center;
  text-align: center;
}

.meals-page .ng-coach-cta-label span {
  overflow-wrap: anywhere;
}

@media (max-width: 479px) {
  .meals-page .ng-coach-card {
    padding: 16px !important;
    border-radius: 21px !important;
  }

  .meals-page .ng-coach-card-header {
    gap: 8px;
  }

  .meals-page .ng-coach-header-left {
    gap: 8px;
  }

  .meals-page .ng-coach-sparkle-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 13px;
  }

  .meals-page .ng-coach-score-pill {
    min-width: 70px;
    padding-inline: 8px;
  }

  .meals-page .ng-coach-signals {
    grid-template-columns: 1fr;
  }
}

/* Meal and secondary nutrition surfaces stay quiet while their semantic
   colors remain visible in the small accents and progress bars. */
.meals-page .key-nutrients-section {
  background: linear-gradient(145deg, rgba(15, 31, 38, .88), rgba(9, 20, 27, .88));
  border-color: rgba(255, 255, 255, .08);
}

.meals-page .key-nutrient-chip {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .07);
}

.meals-page .meal-card {
  border-color: rgba(255, 255, 255, .075);
  background: linear-gradient(145deg, rgba(16, 31, 38, .88), rgba(9, 20, 27, .88));
}

.meals-page .meal-card-title,
.meals-page .meals-empty-title {
  color: #F4F7F8;
}

.meals-page .meals-add-food-cta {
  min-height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFB347 0%, #FF8A00 100%);
  box-shadow: 0 8px 20px rgba(255, 159, 26, .20);
}

@media (prefers-reduced-motion: reduce) {
  .meals-page .ng-coach-card,
  .meals-page .meal-card {
    animation: none;
  }
}