/* Split Layout Food Selector Styles */
/* No @import of design-tokens.css here: App.razor links it with a fingerprinted URL. An @import is
   fetched unversioned and loads after it, so a cached old copy overrode the new tokens after a deploy. */

/* ─────────────────────────────────────────────
   VALUE PROP: Goal Summary Header
   Per UX spec: User sees daily goal at a glance
   ───────────────────────────────────────────── */
.goal-summary-header {
  display: flex;
  justify-content: center;
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
  margin-bottom: var(--fs-spacing-md);
  background: var(--fs-bg-primary);
  border-radius: var(--fs-radius-md);
  border: 1px solid var(--fs-primary-a10);
}

.goal-summary-content {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.goal-label {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
}

.goal-targets {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
}

.goal-target-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.goal-target-item i {
  font-size: 0.75rem;
}

.goal-separator {
  color: var(--fs-text-secondary);
  font-size: 0.75rem;
}

/* Macro label colors — canonical palette (protein=blue, carbs=green, fat=amber). */
.macro-label-p {
  color: var(--fs-macro-protein);
  font-weight: var(--fs-font-weight-semibold);
}

.macro-label-c {
  color: var(--fs-macro-carbs-text);
  font-weight: var(--fs-font-weight-semibold);
}

.macro-label-f {
  color: var(--fs-macro-fat-text);
  font-weight: var(--fs-font-weight-semibold);
}

.macro-compact {
  font-size: var(--fs-font-size-xs);
}

@media (max-width: 576px) {
  .goal-summary-header {
    padding: var(--fs-spacing-xs) var(--fs-spacing-sm);
  }

  .goal-label {
    font-size: var(--fs-font-size-xs);
  }

  .goal-target-item {
    font-size: var(--fs-font-size-xs);
  }
}

/* ============================================
   UNIFIED WORKFLOW: Container blends with page
   Removed: box-shadow, border-radius, background
   Gestalt Law of Common Region: All elements share
   the page context, not isolated in separate card
   ============================================ */
.split-food-selector-container {
  background: transparent;
  border-radius: 0;
  padding: var(--fs-spacing-lg) 0;
  margin: var(--fs-spacing-lg) 0;
  margin-bottom: 44px; /* V3: large gap separates workspace from meal cards */
  /* box-shadow removed - prevents "island" effect */
}

/* Meal Selection Row */
/* Gestalt: Removed border-bottom for visual continuity */
/* Proximity: Reduced margin for tighter coupling with search */
.meal-selection-row {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-lg);
  margin-bottom: var(--fs-spacing-md); /* Tighter proximity to search */
  padding-bottom: 0;
  /* border-bottom removed - Gestalt Law of Continuity */
}

.meal-label {
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
  margin: 0;
  white-space: nowrap;
}

.meal-select {
  max-width: 200px;
}

/* Food Search Row */
/* Proximity hierarchy: Moderate spacing from search to results */
.food-search-row {
  margin-bottom: var(--fs-spacing-lg);
}

.split-food-selection {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xl);
}

.search-bar-wrapper {
  width: 100%;
}

.split-food-search {
  width: 100% !important;
}

.split-food-search .select2-container {
  width: 100% !important;
}

/* Selected Foods Display */
.selected-foods-display {
  background: var(--fs-bg-primary);
  border-radius: var(--fs-radius-md);
  padding: var(--fs-spacing-lg);
  border: 1px solid var(--fs-border-default);
}

.selected-label {
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
  margin-bottom: var(--fs-spacing-md);
  display: block;
}

/* DISABLED: Old grid layout - replaced by minimalist flex column below */
/*
.selected-foods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--fs-spacing-md);
}
*/

/* DISABLED: Old card layout - replaced by minimalist styles below */
/*
.selected-food-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: #FAFBFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    transition: var(--fs-transition-all);
}
*/

/* `.selected-food-item` layout lives in FoodSelection.razor.css (single source of
   truth — scoped rules there override anything unscoped would set here anyway). */

.serving-controls-compact {
  display: flex;
  gap: var(--fs-spacing-sm);
  flex-shrink: 0;
}

.serving-controls-compact .form-select-sm {
  width: auto;
  min-width: 80px;
  font-size: var(--fs-font-size-sm);
}

/* Custom Foods Quick Add */
/* Gestalt: Integrated as continuation of workflow, not separate island */
/* Uses whitespace separation instead of borders to avoid "drop zone" affordance */
.custom-foods-quick-row {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--fs-spacing-xl) 0 0 0; /* Generous top padding for separation */
  margin-top: var(--fs-spacing-lg);
}

/* Quick Add label - lighter weight for supporting role */
.quick-add-label {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-secondary);
  font-size: var(--fs-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--fs-spacing-sm);
  display: block;
}

/* Rows far enough apart that two one-line chips' 44px tap areas meet, not overlap, or the lower chip takes taps meant for
   the upper one. A one-line chip is 10px of padding and border plus one line, so each area reaches (34px - line) / 2
   past it: 8px at the default text size, so 16px; more at a smaller browser text size, where 16px left them sharing
   about 2px (#1535). Rounded up to a whole pixel: WebKit snaps the chip's height down to one, and its area reaches that
   much further. Never under 16px, so larger text keeps the same spacing. Behind @supports: a value with var() is only
   checked once computed, so a browser without round() would drop the gap to 0 instead of keeping 16px. */
.custom-food-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 6px;
  margin-bottom: 20px;
}

@supports (gap: round(up, 1px, 1px)) {
  .custom-food-chips-grid {
    gap: max(16px, round(up, 34px - var(--fs-font-size-xs) * var(--fs-line-height-normal), 1px)) 6px;
  }
}

/* The icon (a plus, or a check while picked) sits on the label's first line: top-aligned at the label's line height,
   not by baseline, which a clamped (-webkit-box) label puts in a different place per engine. Both icons are fa-fw, so
   a tap never changes the chip's width. */
.custom-food-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--fs-spacing-xs);
  padding: 4px 10px 4px 8px;
  background: transparent;
  /* The control border (3:1 against the card), so an unpicked chip still reads as a button (Claude Design, #1503). */
  border: 1px solid var(--fs-border-control);
  /* In em, so it grows with the text: past half a one-line chip's height at any text size, so one line stays a pill,
     and under half a two-line chip's, which gets rounded corners instead of ends that crowd its first and last letters. */
  border-radius: 1.4em;
  color: var(--fs-text-muted);
  font-size: var(--fs-font-size-xs);
  /* The 1.5 it inherited anyway, set so the rows' gap above can count on it. */
  line-height: var(--fs-line-height-normal);
  font-weight: var(--fs-font-weight-medium);
  transition: var(--fs-transition-all);
  cursor: pointer;
  position: relative;
}

/* The tap area: at least 44px tall, centred on the chip. A chip that is already 44px or taller (two lines, large text)
   keeps its own box: top and bottom are % of the chip's height, so (100% - 44px) / 2 is how far short it falls. */
.custom-food-chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: min(0px, calc((100% - 44px) / 2));
  bottom: min(0px, calc((100% - 44px) / 2));
}

/* CustomFoodChipLabel cuts a long name in the middle and sends it in two parts (#1535, Claude Design): a start, and the
   end that tells look-alike labels apart ("1 L", or a twin's "STRAWBERRY… 500 ml"). Large text or a narrow column can
   still need more than two lines, so the start is clamped, and only the start: the end sits beside it while the start
   keeps 6em, else on a line of its own. A tap spells the whole name out under the chips. */
.custom-food-chip__name {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 0.3em;
}

/* 6em, not min(6em, 100%): a percentage cannot be resolved while the chip sizes itself to its text, so the chip came
   out without the floor and the floor then pushed a short name's end onto a second line ("Pinar" / "Sut Tam Yagli 1 L").
   ⚠️ Without the percentage, the start would overflow a name area narrower than 6em (144px at 200% text). Phones leave
   about 250px; check this before the chips go into anything narrower (a sidebar, a wider split). */
.custom-food-chip__head {
  flex: 1 1 0;
  min-width: 6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  /* Safari before 15.4 ignores anywhere: this still breaks a name made of one long word. */
  word-break: break-word;
}

/* A short start (16 characters or fewer) keeps its own width, so the end sits right after it instead of past the 6em a
   long start reserves (Claude Design). It cannot shrink, so no long end squeezes it to a sliver; it stays inside the
   chip and under the clamp. */
.custom-food-chip__head--short {
  flex: none;
  min-width: 0;
  max-width: 100%;
}

/* Never clamped. It breaks inside itself only when it is wider than the whole chip. */
.custom-food-chip__tail {
  flex: none;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hover only where there is a pointer: on a touch screen :hover sticks after a tap, and a chip just taken out would
   keep a highlight that reads as picked. */
@media (hover: hover) {
  .custom-food-chip:hover {
    background: var(--fs-accent-light);
    border-color: var(--fs-primary-text);
    color: var(--fs-primary-text);
  }
}

/* Picked (#1503, Claude Design): the macro filter's active look, an ink edge on a white block. Not Beet, which is the
   main action's, and not bold, which would widen a cut label onto a third line. The border only changes colour, so the
   chip keeps its size. */
.custom-food-chip[aria-pressed="true"] {
  background: var(--fs-bg-primary);
  border-color: var(--fs-text-primary);
  box-shadow: inset 0 0 0 1px var(--fs-text-primary);
  color: var(--fs-text-primary);
}

/* Hover keeps a picked chip's edge and ink: the Beet hover above would make it look unpicked. */
@media (hover: hover) {
  .custom-food-chip[aria-pressed="true"]:hover {
    background: var(--fs-bg-hover);
    border-color: var(--fs-text-primary);
    color: var(--fs-text-primary);
  }
}

/* The brand before the name (#1795, Claude Design): lighter than the chip's text, at normal weight. A picked or hovered
   chip changes its background, so there the brand takes the muted grey, which keeps its contrast on both. */
.custom-food-chip__brand {
  color: var(--fs-text-faint);
  font-weight: 400;
}

.custom-food-chip[aria-pressed="true"] .custom-food-chip__brand {
  color: var(--fs-text-muted);
}

@media (hover: hover) {
  .custom-food-chip:hover .custom-food-chip__brand {
    color: var(--fs-text-muted);
  }
}

/* The icon keeps its fixed width: as a flex item it would otherwise shrink on a long chip, and plus and check would no
   longer line up with each other. */
.custom-food-chip > i {
  flex: none;
  line-height: inherit;
}

.custom-food-chip:focus-visible {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 1px;
}

/* Calculate Button Row */
.calculate-button-row {
  display: flex;
  justify-content: center;
  padding-top: var(--fs-spacing-sm);
}

.calculate-btn {
  padding: var(--fs-spacing-md) var(--fs-spacing-3xl);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  border-radius: var(--fs-radius-md);
  background: var(--fs-primary);
  border: none;
  color: var(--fs-text-inverse);
  transition: var(--fs-transition-all);
}

.calculate-btn:hover:not(:disabled) {
  box-shadow: var(--fs-shadow-primary);
}

.calculate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .split-food-selector-container {
    padding: var(--fs-spacing-lg);
    margin: var(--fs-spacing-lg) -10px;
    margin-bottom: 12px; /* Reduced gap so meal cards appear in first mobile viewport */
  }

  .meal-selection-row {
    flex-direction: column;
    align-items: stretch;
  }

  .meal-select {
    max-width: 100%;
  }

  /* Mobile Layout Reordering */
  .split-food-selection {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Order 1: Search bar */
  .search-bar-wrapper {
    order: 1;
    margin-bottom: var(--fs-spacing-lg);
  }

  /* Order 2: Calculate button - immediately after search */
  .calculate-button-row {
    order: 2 !important;
    margin-top: 0;
    margin-bottom: var(--fs-spacing-xl);
    padding: var(--fs-spacing-md) 0;
    position: relative;
  }

  /* Visual enhancement for button area */
  .calculate-button-row::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--fs-bg-primary-a80)
    );
  }

  .calculate-btn {
    width: 100%;
    padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
    font-size: var(--fs-font-size-lg);
    box-shadow: none;
  }

  /* Order 3: Selected foods display */
  .selected-foods-display {
    order: 3;
    margin-top: 0;
  }

  /* Mobile: Vertical stacked layout for selected foods */
  .selected-foods-grid {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-md);
  }

  /* Mobile `.selected-food-item` layout is owned by FoodSelection.razor.css
     (the scoped `::deep` rule inside its own @media (max-width: 768px) block).
     Keeping only cross-cutting overrides for siblings here. */

  .serving-controls-compact {
    width: 100%;
    flex-basis: 100%;
  }

  .serving-controls-compact .form-select-sm {
    flex: 1;
  }
}


/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--fs-spacing-4xl);
  color: var(--fs-text-secondary);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: var(--fs-spacing-lg);
  opacity: 0.3;
}

/* ============================================
   UNIFIED WORKFLOW FIX
   Flatten nested card when FoodSelection is embedded
   Addresses "floating island" anti-pattern
   ============================================ */

/* Remove card styling when embedded in split layout */
.split-food-selection .card,
.food-search-row .card {
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

.split-food-selection .card-body,
.food-search-row .card-body {
  padding: 0 !important;
}

/* Ensure TomSelect container blends seamlessly */
.split-food-selection .tomselect-container-integrated {
  background: transparent;
}

/* ============================================
   SEARCH-FIRST DASHBOARD LAYOUT
   Phase: Dashboard Simplification 2026
   ============================================ */

/* ─────────────────────────────────────────────
   PRIMARY: Food Search (Dominant Element)
   ───────────────────────────────────────────── */
.food-search-primary {
  margin-bottom: var(--fs-spacing-xl);
}

/* No border/ring here: .search-hero-zone owns the SINGLE search border + focus ring
   (FoodSelection.razor.css). A border on this inner container made a box-in-a-box
   (leftover from the pre-redesign dashboard search). */

.food-search-primary input:where(:not(.amount-input)),
.food-search-primary .ts-control {
  font-size: 15px !important;
  padding: var(--fs-spacing-md) !important;
  min-height: 44px;
}

/* The sheet's search input is 16px at every width: iOS zooms in on focus below 16px, and an iPad above 768px uses the
   sheet, where the rule above would make it 15px (#1595). The :where() keeps the rule above at its old weight (0,1,1) for
   every input but the amount box, so this one (0,2,1) beats it whatever the order. */
.food-search-primary input.mobile-search-input {
  font-size: 16px !important;
}

/* ─────────────────────────────────────────────
   TERTIARY: Quick Add (Minimal)
   ───────────────────────────────────────────── */
.quick-add-minimal {
  margin-bottom: var(--fs-spacing-xl);
}

.quick-add-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) 0;
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.quick-add-trigger:hover {
  color: var(--fs-text-primary);
}

.quick-add-trigger i {
  font-size: var(--fs-font-size-xs);
  transition: transform 0.15s ease;
}

/* ─────────────────────────────────────────────
   COLLAPSIBLE PROGRESS SUMMARY
   ───────────────────────────────────────────── */
.progress-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  background: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md);
  cursor: pointer;
  margin-bottom: var(--fs-spacing-lg);
  transition: background-color 0.15s ease;
  /* Reset native button styles (rendered as <button> for keyboard accessibility) */
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}

.progress-summary-bar:hover {
  background: var(--fs-bg-tertiary);
}

.progress-summary-bar.expanded {
  border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
  margin-bottom: 0;
}

.progress-summary-content {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  flex-wrap: wrap;
}

.progress-summary-icon {
  font-size: var(--fs-font-size-base);
}

.progress-summary-text {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.progress-summary-detail {
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
}

.progress-chevron {
  color: var(--fs-text-secondary);
  transition: transform 0.15s ease;
}

.progress-summary-bar.expanded .progress-chevron {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────
   MOBILE RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .food-search-primary input:where(:not(.amount-input)),
  .food-search-primary .ts-control {
    font-size: 16px !important; /* Prevent iOS zoom */
    min-height: 44px;
    padding: var(--fs-spacing-md) !important;
  }

  .quick-add-trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--fs-spacing-md) 0;
  }

  /* Mobile: Hide detail text in progress bar */
  .progress-summary-detail {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   MINIMALIST DESIGN: Compact selected foods
   Inspired by: Notion, Linear, Todoist
   Philosophy: Dense, scannable rows with minimal visual weight
   ═══════════════════════════════════════════════════════════ */

/* Container - no visual wrapper */
.selected-foods-display {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-top: 8px;
}

/* Hide "Selected foods (N):" label - unnecessary chrome */
.selected-label {
  display: none !important;
}

/* 2-column grid for desktop, 1-column for mobile */
.selected-foods-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .selected-foods-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ─────────────────────────────────────────────
   NOTE: `.selected-food-item` styling (desktop + mobile) lives in
   FoodSelection.razor.css under `::deep .selected-food-item { … }`.
   The scoped rules there win on specificity (attribute + class > class)
   against anything we'd set here, so an abandoned grid strategy that
   used to live in this block was deleted — it wasn't being applied.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .selected-foods-grid {
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   V3 MEAL CARD MACROS — Compact inline format
   ═══════════════════════════════════════════════════════════ */
.meal-card-macros-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-font-size-sm);
}

/* A 390px card header leaves 136px beside the name and the pencil. At 10px the calories and protein chips missed
   sharing a row by a pixel, so the design's two rows became three. */
@media (max-width: 575.98px) {
  .meal-card-macros-v3 {
    column-gap: 8px;
  }
}

/* MOD 4: dot + neutral number — figures are neutral so they don't read as actions, and the macro
   colour moves to a small dot. Fixes protein sharing the CTA blue (#2563eb). Dots use the FILL tokens
   (legible on this roomy meal-card row); cal stays a plain neutral figure with no dot. */
.meal-macro-v3 {
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
}

.meal-macro-v3--cal {
  color: var(--fs-text-body);
}

.meal-macro-v3--protein::before,
.meal-macro-v3--carbs::before,
.meal-macro-v3--fat::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: baseline;
}
.meal-macro-v3--protein::before {
  background: var(--fs-macro-protein);
}
.meal-macro-v3--carbs::before {
  background: var(--fs-macro-carbs);
}
.meal-macro-v3--fat::before {
  background: var(--fs-macro-fat);
}

/* ── Clinic: daily-calorie summary (RING). A quiet date-nav row + a tappable
   summary card: kcal donut ring + "N kcal left" hero + a "Macros" expand pill.
   The ring's always-visible track means it never looks dead at 0; the labelled
   pill is an unmistakable expand cue (not a date dropdown). ── */
.daily-date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.daily-date-nav .daily-date {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-nav-btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fs-border-default);
  border-radius: 10px;
  background: var(--fs-bg-primary);
  color: var(--fs-text-secondary);
}
.daily-nav-btn:active {
  background: var(--fs-bg-secondary);
}

.daily-compact-header {
  margin-bottom: 12px;
}

/* #1005b, C1: with MealOutcomes on, the phone's pinned day header — the date arrows around the day's name and
   progress, then its cells (about 117px with tiles, 93px with the bar).
   Opaque and above the cards (z-index 10), below every sheet, backdrop and dialog. Nothing that scrolls
   under it may sit on a higher layer (#1447: the food search's container at z-index 100 drew over the pinned
   header), and no ancestor of a sheet may make a layer at or below 10, or the header draws over that sheet.
   Full-bleed across the container's 8px gutter. The window scrolls and the phone top bar is not fixed, so it
   sticks at 0. */
.day-log-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--fs-spacing-sm)) var(--fs-spacing-md);
  padding: var(--fs-spacing-lg) var(--fs-spacing-lg) var(--fs-spacing-md);
  border-bottom: 1px solid var(--fs-border-default);
  background: var(--fs-bg-primary);
}
.day-log-sticky .daily-date-nav {
  margin: 0;
}
.day-log-sticky > * + * {
  margin-top: var(--fs-spacing-md);
}

/* Phones only, like .d-sm-none, which cannot be used here: style.css turns every .d-sm-none
   `display: inline !important` on phones, and an inline sticky box paints its background only behind its
   text, so the cards showed through the header. */
.day-log-phone {
  display: block;
}
@media (min-width: 576px) {
  .day-log-phone {
    display: none;
  }
}

/* A card focused from the keyboard scrolls clear of the sticky header rather than under it (C1).
   DayLogTitle.razor.js measures the header and sets the height; it is 0 wherever the header is hidden. */
.day-log-sticky-page {
  scroll-padding-top: var(--day-log-header-height, 0px);
}

/* Arriving on a day from the meals-to-answer reminder: the day's header washes from light Beet to white once,
   so the move to another day is seen (MealsToAnswerNotice.razor.js). No wash with reduced motion. */
.day-log-sticky.is-arriving {
  animation: day-arrival-wash 600ms ease-out;
}
/* The desktop header has no background of its own, so its wash ends on transparent rather than on a panel. */
.day-header.is-arriving {
  animation: day-arrival-wash-clear 600ms ease-out;
}
@keyframes day-arrival-wash {
  from {
    background-color: var(--fs-primary-light);
  }
  to {
    background-color: var(--fs-bg-primary);
  }
}
@keyframes day-arrival-wash-clear {
  from {
    background-color: var(--fs-primary-light);
  }
  to {
    background-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .day-log-sticky.is-arriving,
  .day-header.is-arriving {
    animation: none;
  }
}

/* ── Clinic pass 2: custom-foods demoted to a quiet borderless link so the blue
   "Add to Meal" CTA is the only full-width filled bar on the screen. ── */
/* `.btn.custom-foods-ghost` (two classes) so muted grey beats Bootstrap's
   single-class `.btn-link` blue regardless of stylesheet load order. */
.btn.custom-foods-ghost {
  color: var(--fs-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
}
.btn.custom-foods-ghost:hover,
.btn.custom-foods-ghost:focus-visible {
  color: var(--fs-primary-text);
  text-decoration: none;
}
.btn.custom-foods-ghost .custom-foods-count {
  background: var(--fs-border-default);
  color: var(--fs-text-secondary);
  font-weight: 700;
}

/* ── Desktop day header (≥576px): centred "DAILY PLAN / Today · Sep 25", with the date buttons
   beside it naming the day they go to. They were btn-sm outline squares at the far ends of the
   card — small, pale, ~1300px apart and easy to miss. Every rule is scoped under .day-header
   because Bootstrap loads after this sheet and its single-class and element rules would win. ── */
.day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 4px 0 24px;
}
.day-header .day-header-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.day-header .day-header-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}
.day-header .day-header-date {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fs-text-primary);
}
.day-header .day-header-progress {
  font-size: 13px;
  color: var(--fs-text-secondary);
}
/* 44px tall and a #4b5563 border (7.6:1 on white), so the button reads as a button at a glance —
   the old pale-grey outline was under 1.5:1. */
.day-header .day-header-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--fs-text-body);
  border-radius: 999px;
  background: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.day-header .day-header-step i {
  font-size: 13px;
}
.day-header .day-header-step:hover {
  background: var(--fs-bg-tertiary);
  border-color: var(--fs-text-primary);
}
.day-header .day-header-step:active {
  background: var(--fs-border-default);
}
.day-header .day-header-step:focus-visible {
  outline: 3px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 2px;
}

/* ── Tablets and desktops: the dashboard's search section spans the page, on one left edge with the
   targets strip above it. Scoped to that section; specific enough to beat Bootstrap, which loads
   after this sheet. ── */
@media (min-width: 576px) {
  /* FoodSelection's column is narrowed and gutted for its standalone page. All three Bootstrap
     layers go: at 576px style.css zeroes the container's padding but not the row's -12px margins.
     (FoodSelection's own ::deep reset never matches — its root is the element it targets.) */
  .split-food-selector-container .minimal-mode-container {
    padding-left: 0;
    padding-right: 0;
  }
  .split-food-selector-container .minimal-mode-container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .split-food-selector-container .minimal-mode-container > .row > .col-12 {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Up to 768px the phone rule above insets the section 6px inside the strip's edge. */
@media (min-width: 576px) and (max-width: 768px) {
  .split-food-selector-container {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}