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

.custom-food-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.custom-food-chip {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-text-muted);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-medium);
  transition: var(--fs-transition-all);
  cursor: pointer;
  white-space: nowrap;
}

.custom-food-chip:hover {
  background: var(--fs-accent-light);
  border-color: var(--fs-primary-text);
  color: var(--fs-primary-text);
}

.custom-food-chip i {
  font-size: var(--fs-font-size-xs);
}

/* Create Custom Food chip — dashed border to distinguish from food shortcuts */
.custom-food-chip.create-new {
  background: transparent;
  border: 1px dashed var(--fs-border-default);
  color: var(--fs-text-muted);
  font-weight: var(--fs-font-weight-medium);
}

.custom-food-chip.create-new i {
  font-size: var(--fs-font-size-xs);
}

.custom-food-chip.create-new:hover {
  background: var(--fs-success-light);
  border: 1px solid var(--fs-success);
  color: var(--fs-success);
}

.custom-food-chip.create-new:hover i {
  color: var(--fs-success);
}

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

  .custom-food-chips-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

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

/* Loading state */
.split-food-selector-container.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* 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)
   ───────────────────────────────────────────── */
/* MOD 2: search-lead heading (first-run) */
.search-lead {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fs-text-primary);
}

/* MOD 7: dual-mode hint chips under the search */
.search-mode-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 16px;
}
.search-mode-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fs-text-secondary);
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 999px;
  padding: 5px 10px;
}
.smh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.smh-auto {
  background: var(--fs-text-primary);
}
/* A ring, not a second hue: "you set it" must differ from "we size it" by shape as well. */
.smh-fixed {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fs-text-primary);
}

.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,
.food-search-primary .ts-control {
  font-size: 15px !important;
  padding: var(--fs-spacing-md) !important;
  min-height: 44px;
}

/* ─────────────────────────────────────────────
   COMPOUND ACTION — V3 Merged Button
   Selector + button as ONE visual surface
   ───────────────────────────────────────────── */
.compound-action {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--fs-spacing-xl);
  border-radius: var(--fs-radius-md);
  overflow: hidden;
  background: var(--fs-primary);
  min-height: 52px;
  transition: all 0.15s ease;
}

.compound-action:hover {
  background: var(--fs-primary-hover);
  box-shadow: var(--fs-shadow-md);
}

.compound-action:active {
  transform: translateY(0);
}

/* Button disabled state — only the button dims, selector stays interactive */

/* ─── Meal Selector — translucent chip inside the blue surface ─── */
.compound-action__selector {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 8px 28px 8px 14px;

  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;

  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-inverse);
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* White dropdown arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;

  transition: background-color 0.15s ease;
}

.compound-action__selector:hover {
  background-color: rgba(255, 255, 255, 0.25); /* -color: the shorthand wiped the chevron image */
}

.compound-action__selector:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Keyboard focus: an inset white ring, since the selector sits inside the Beet action bar. */
.compound-action__selector:focus-visible {
  outline: 2px solid var(--fs-text-inverse);
  outline-offset: -4px;
}

.compound-action__selector option {
  color: var(--fs-text-primary);
  background: var(--fs-bg-primary);
  font-weight: var(--fs-font-weight-medium);
}

/* ─── Calculate Button — fills remaining space ─── */
.compound-action__button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-spacing-sm);

  padding: var(--fs-spacing-md) var(--fs-spacing-xl);

  background: transparent;
  color: var(--fs-text-inverse);
  border: none;
  border-radius: 0;

  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.compound-action__button--disabled,
.compound-action__button:disabled {
  color: var(--fs-disabled-text);
  cursor: not-allowed;
}

/* Nothing to calculate yet: the bar takes the spec's disabled tone (flat, quiet label), not a faded
   Beet. The meal selector stays usable, so it turns into an ink chip on that tone. */
.compound-action:has(.compound-action__button:disabled),
.compound-action:has(.compound-action__button:disabled):hover {
  background: var(--fs-disabled-bg);
}

.compound-action:has(.compound-action__button:disabled) .compound-action__selector {
  color: var(--fs-text-primary);
  background-color: var(--fs-bg-primary);
  border-right: 0; /* the ring below draws the divider */
  border-radius: var(--fs-radius-md) 0 0 var(--fs-radius-md); /* follow the bar's rounded left end */
  box-shadow: inset 0 0 0 1px var(--fs-border-control); /* a control edge: white chip on a white card */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.compound-action:has(.compound-action__button:disabled) .compound-action__selector:hover {
  background-color: var(--fs-bg-secondary);
}

.compound-action:has(.compound-action__button:disabled) .compound-action__selector:focus-visible {
  outline-color: var(--fs-border-focus);
}

.compound-action__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: -3px;
}

.compound-action__button i {
  font-size: 15px;
}

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

.progress-details-panel {
  background: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-top: none;
  border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md);
  padding: var(--fs-spacing-lg);
  margin-bottom: var(--fs-spacing-lg);
}

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

  /* Compound Action: Keep horizontal on mobile, full width */
  .compound-action__selector {
    font-size: 16px; /* Prevent iOS zoom */
    min-width: 100px;
    text-align: center;
    text-align-last: center;
  }

  .compound-action__button {
    font-size: 16px; /* Prevent iOS zoom */
  }

  .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);
}

/* MOD 1: slim calorie strip (replaces the ring summary card) — a thin meter + the kcal
   left/over figure + the Macros toggle, all in the compact header. */
.daily-compact-header {
  margin-bottom: 12px;
}

.cal-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.cal-strip-meter {
  /* A sizing box now — the track, its fill and its bounds are drawn by TargetRangeBar, which
     is the same component the card below uses, so the two cannot drift apart. */
  flex: 1;
  min-width: 0;
}
.cal-strip-label {
  flex: none;
  font-size: 12px;
  color: var(--fs-text-secondary);
  white-space: nowrap;
  font-variant-numeric: normal;
}
.cal-strip-label strong {
  color: var(--fs-text-primary);
  font-weight: 700;
}
.cal-strip-macros {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
  white-space: nowrap;
}
.cal-strip-chev {
  font-size: 10px;
  transition: transform 0.18s ease;
}
.cal-strip-macros.open .cal-strip-chev {
  transform: rotate(180deg);
}

/* #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). The calorie strip scrolls with the page
   below it. Opaque and above the cards (z-index 10), below every sheet, backdrop and dialog. 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);
}

/* Over target — the design system's error-text red, no amber. The folded targets strip on wider
   screens uses the same token. */
.daily-compact-header.over .cal-strip-label strong {
  color: var(--fs-error-text);
}

/* ── 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;
  }
  /* Under "What do you want to eat?" the search sits by its heading, not ~42px below it. */
  .search-lead + .split-food-selector-container {
    margin-top: 0;
    padding-top: 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;
  }
}