/* Split Layout Food Selector Styles */
/* Import design tokens for consistency */
@import "design-tokens.css";

/* ─────────────────────────────────────────────
   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: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(16, 185, 129, 0.05) 100%
  );
  border-radius: var(--fs-radius-md);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.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 matching progress rings */
.macro-label-p {
  color: var(--fs-primary); /* blue for protein */
  font-weight: var(--fs-font-weight-semibold);
}

.macro-label-c {
  color: #d97706; /* amber for carbs */
  font-weight: var(--fs-font-weight-semibold);
}

.macro-label-f {
  color: #059669; /* emerald/teal for fat */
  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-accent);
  color: var(--fs-accent);
}

.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, #ecfdf5);
  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) {
  transform: translateY(-2px);
  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,
      rgba(255, 255, 255, 0.8)
    );
  }

  .calculate-btn {
    width: 100%;
    padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
    font-size: var(--fs-font-size-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 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)
   ───────────────────────────────────────────── */
.food-search-primary {
  margin-bottom: var(--fs-spacing-xl);
}

.food-search-primary .tomselect-container-integrated {
  border: 1.5px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md);
  box-shadow: none;
}

.food-search-primary .tomselect-container-integrated:focus-within {
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.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);
  transform: translateY(-1px);
  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: rgba(255, 255, 255, 0.25);
}

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

.compound-action__selector option {
  color: var(--fs-text-primary);
  background: white;
  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 {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.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 MACRO PROGRESS BAR — Always visible, shows remaining
   Placed above food selection as the decision-making scoreboard
   ═══════════════════════════════════════════════════════════ */
.macro-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 36px;
}

.macro-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.macro-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.macro-bar-label {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.macro-bar-label--cal {
  color: #374151;
  font-weight: var(--fs-font-weight-bold);
}
.macro-bar-label--protein {
  color: var(--fs-primary);
}
.macro-bar-label--carbs {
  color: #d97706;
}
.macro-bar-label--fat {
  color: #059669;
}

.macro-bar-remaining {
  font-size: 13px;
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
}

.macro-bar-remaining small {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-secondary);
}

.macro-bar-track {
  height: 6px;
  background: var(--fs-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.macro-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.macro-bar-fill--cal {
  background: #374151;
}
.macro-bar-fill--protein {
  background: var(--fs-primary);
}
.macro-bar-fill--carbs {
  background: #d97706;
}
.macro-bar-fill--fat {
  background: #059669;
}

@media (max-width: 768px) {
  .macro-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .macro-bar-item {
    flex: 1 1 45%;
  }
}

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

.meal-macro-v3 {
  font-weight: var(--fs-font-weight-semibold);
}

.meal-macro-v3--cal {
  color: #374151;
}
.meal-macro-v3--protein {
  color: var(--fs-primary);
}
.meal-macro-v3--carbs {
  color: #d97706;
}
.meal-macro-v3--fat {
  color: #059669;
}