/* Cross-screen alignment layer.
   Presentation only: keeps existing handlers, routes and data untouched. */

/* Compact app header controls: preserve the 44px touch target without letting
   large icon buttons steal space from the user's name and greeting. */
.app-header .header-profile-button,
.app-header .header-action-button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 14px !important;
}

.app-header .header-profile-button { font-size: 17px !important; }
.app-header .header-action-button i,
.app-header .header-quick-button i {
  font-size: 18px !important;
  line-height: 1;
}
.app-header .header-actions { gap: 6px !important; }
.app-header .header-notification-dot {
  width: 9px !important;
  height: 9px !important;
  top: 5px !important;
  right: 5px !important;
  border-width: 1px !important;
}

/* One-line, vertically centred controls and badges across every screen. */
#screenContent button,
#screenContent .admin-role-badge {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  text-align: center;
  vertical-align: middle;
}

#screenContent .ng-btn-primary,
#screenContent .ng-btn-secondary,
#screenContent .ng-btn-accent,
#screenContent .back-btn,
#screenContent .meal-action-button,
#screenContent .pill-tab,
#screenContent .tracker-log-button,
#screenContent .best-day-button,
#screenContent .food-scan-button,
#screenContent .admin-button,
#screenContent .admin-role-badge,
#screenContent .ng-tag,
#screenContent .ng-tag-gray {
  min-width: 0;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal !important;
  vertical-align: middle;
}

#screenContent .ng-btn-primary,
#screenContent .ng-btn-secondary,
#screenContent .ng-btn-accent,
#screenContent .back-btn,
#screenContent .meal-action-button,
#screenContent .pill-tab,
#screenContent .tracker-log-button,
#screenContent .best-day-button,
#screenContent .food-scan-button {
  display: inline-flex;
  flex-wrap: nowrap;
  line-height: 1.1;
}

#screenContent .ng-btn-primary > i,
#screenContent .ng-btn-secondary > i,
#screenContent .ng-btn-accent > i,
#screenContent .back-btn > i,
#screenContent .meal-action-button > i,
#screenContent .pill-tab > i,
#screenContent .tracker-log-button > i,
#screenContent .best-day-button > i,
#screenContent .food-scan-button > i {
  flex: 0 0 auto;
}

#screenContent .ng-btn-primary > span,
#screenContent .ng-btn-secondary > span,
#screenContent .ng-btn-accent > span,
#screenContent .back-btn > span,
#screenContent .meal-action-button > span,
#screenContent .pill-tab > span,
#screenContent .tracker-log-button > span,
#screenContent .best-day-button > span,
#screenContent .food-scan-button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

#screenContent .ng-tag,
#screenContent .ng-tag-gray {
  display: inline-flex;
  flex: 0 1 auto;
  max-width: 100%;
  line-height: 1.1;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Do not let utility text-wrapping rules break labels inside compact controls. */
#screenContent button span,
#screenContent button i {
  min-width: 0;
}
#screenContent button span { overflow-wrap: normal; }

/* Navigation labels stay readable and aligned on narrow phones. */
.bottom-nav .nav-item {
  min-width: 0;
  gap: 3px;
  padding-right: 2px;
  padding-left: 2px;
  white-space: nowrap !important;
}
.bottom-nav .nav-item span {
  min-width: 0;
  width: auto;
  max-width: none;
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
  letter-spacing: -.2px;
}

/* The compact nutrient/status grids use two balanced columns on phones.
   Desktop keeps the existing three-column layout. */
@media (max-width: 639px) {
  #screenContent .ng-card > .grid[class~="grid-cols-3"][class~="gap-2"][class~="mt-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #screenContent .grid[class~="sm:grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bottom-nav .nav-item {
    font-size: clamp(8.5px, 2.45vw, 11px) !important;
  }
  .bottom-nav .nav-item i { font-size: 16px !important; }
}

/* Nutrition metrics use two columns on compact preview canvases as well as
   narrow phones, so the cards remain readable without horizontal scrolling. */
@media (max-width: 1100px) {
  #screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Keep metric labels and goals on one aligned line. Long labels use an
   ellipsis rather than changing the height of neighbouring cards. */
#screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 > div > p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

@media (max-width: 360px) {
  .app-header .header-profile-button,
  .app-header .header-action-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }
  .app-header .header-actions { gap: 4px !important; }
  .bottom-nav .nav-item { font-size: 9px !important; }
  .bottom-nav .nav-item i { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .app-header .header-action-button,
  #screenContent button { transition: none !important; }
}

/* The activity label is longer than the other bottom-nav labels. Keep the
   complete word visible on compact phones without changing the route or
   making the navigation wider than the viewport. */
.bottom-nav .nav-activity {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.bottom-nav .nav-activity span {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(8px, 2.45vw, 10px) !important;
  letter-spacing: -.45px !important;
}

@media (min-width: 640px) {
  .bottom-nav .nav-activity span {
    font-size: 11px !important;
    letter-spacing: -.25px !important;
  }
}

/* Center the content inside nutrition metric cards. Keep the two-column
   mobile grid, but give every value, label and goal the same visual axis. */
#screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 > div,
#screenContent .meals-nutrition-card > .grid > div {
  display: flex !important;
  min-height: 148px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px !important;
  text-align: center;
}

#screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 > div > p,
#screenContent .meals-nutrition-card > .grid > div > p {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

#screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 > div > p:nth-child(2),
#screenContent .meals-nutrition-card > .grid > div > p:nth-child(2) {
  font-size: clamp(18px, 4vw, 24px) !important;
  line-height: 1.15;
  font-weight: 900;
}

#screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 > div > p:last-child,
#screenContent .meals-nutrition-card > .grid > div > p:last-child {
  color: #aeb7bd !important;
  font-size: 13px !important;
  line-height: 1.2;
}

/* Darken thematic stock photography without darkening the readable content
   placed above it. The overlay is intentionally stronger on small screens. */
.best-day-widget > .best-day-overlay {
  background:
    linear-gradient(90deg, rgba(3, 7, 5, .91), rgba(3, 7, 5, .70) 54%, rgba(3, 7, 5, .40)),
    linear-gradient(180deg, rgba(3, 7, 5, .16), rgba(3, 7, 5, .72)) !important;
}

.food-scan-widget::after {
  background: linear-gradient(90deg, rgba(5, 8, 6, .78), rgba(5, 8, 6, .58) 54%, rgba(5, 8, 6, .66)) !important;
}

.tracker-activity-card::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(110deg, rgba(5, 10, 16, .82), rgba(5, 10, 16, .68) 58%, rgba(5, 10, 16, .56));
}

.photo-system-backdrop::after,
.screen-photo-card > .photo-system-backdrop::after,
.hero-banner > .photo-system-backdrop::after {
  background:
    linear-gradient(90deg, rgba(4, 8, 11, .90), rgba(4, 8, 11, .62) 52%, rgba(4, 8, 11, .34)),
    linear-gradient(180deg, rgba(4, 8, 11, .18), rgba(4, 8, 11, .74)) !important;
}

/* The nutrition tracker gets a quiet, thematic image in every metric box.
   A dense black-blue gradient keeps the centred values readable while the
   local illustrations remain visible as texture behind the content. */
#screenContent .nutrient-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #171d22 !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: normal;
}

#screenContent .nutrient-box::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(135deg, rgba(8, 13, 17, .88), rgba(11, 16, 21, .70) 52%, rgba(9, 13, 18, .90));
}

#screenContent .nutrient-box--calories {
  background-image: url('images/meal-breakfast.svg');
}

#screenContent .nutrient-box--protein {
  background-image: url('images/workout-strength.svg');
}

#screenContent .nutrient-box--carbs {
  background-image: url('images/meal-lunch.svg');
}

#screenContent .nutrient-box--fat,
#screenContent .nutrient-box--saturatedFat {
  background-image: url('images/meal-dinner.svg');
}

#screenContent .nutrient-box--fiber,
#screenContent .nutrient-box--potassium {
  background-image: url('images/nutrition-bowl.svg');
}

#screenContent .nutrient-box--sugar {
  background-image: url('images/meal-snack.svg');
}

#screenContent .nutrient-box--sodium {
  background-image: url('images/wellness-hydration.svg');
}

#screenContent .nutrient-box > * {
  position: relative;
  z-index: 1;
}

.meals-photo-orb img,
.glass-meal-photo img,
.glass-workout-photo img,
.community-photo-strip img {
  filter: brightness(.68) saturate(1.12) contrast(1.06) !important;
}

.recipe-cover::before,
.community-photo-strip::before {
  background: linear-gradient(135deg, rgba(3, 8, 9, .34), rgba(3, 8, 9, .12) 46%, rgba(9, 5, 18, .42)) !important;
}

@media (max-width: 430px) {
  #screenContent .ng-card > .grid.grid-cols-3.gap-2.mt-4 > div,
  #screenContent .meals-nutrition-card > .grid > div {
    min-height: 136px;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .meals-photo-orb img,
  .glass-meal-photo img,
  .glass-workout-photo img,
  .community-photo-strip img { filter: brightness(.60) saturate(1.08) contrast(1.04) !important; }
}