.day-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;

  .day-picker-current {
    flex: 1;
    min-width: 0;
  }

  .day-picker-date {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ft-text);
    letter-spacing: -0.01em;
  }

  .day-picker-weekday {
    font-size: 0.82rem;
    color: var(--ft-text-secondary);
    text-transform: lowercase;
  }

  .day-picker-input {
    width: auto;
    flex: 0 0 auto;
  }

  @media (max-width: 576px) {
    flex-wrap: wrap;

    .day-picker-input {
      order: 10;
      width: 100%;
    }
  }
}

.meal-group {
  margin-bottom: 20px;

  .meal-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ft-text-secondary);
    margin: 0 4px 8px;
  }

  .meal-group-icon {
    font-size: 1rem;
  }

  .meal-group-total {
    margin-left: auto;
    color: var(--ft-text-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
}

// Součet živin dne nad seznamem jídel
.nutrient-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px 16px;
  margin-bottom: 16px;

  .nutrient-summary-item {
    display: flex;
    flex-direction: column;
  }

  .nutrient-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ft-text-muted);
  }

  .nutrient-summary-value {
    font-weight: 700;
  }

  .nutrient-summary-target {
    font-weight: 400;
    color: var(--ft-text-muted);
  }
}

.meal-list {
  padding: 0;
  overflow: hidden;
}

.meal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ft-border-light);
  transition: var(--ft-transition);

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: var(--ft-bg-hover);
  }

  .meal-main {
    flex: 1;
    min-width: 0;
  }

  .meal-name {
    font-weight: 600;
    color: var(--ft-text);
    word-break: break-word;
  }

  .meal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
  }

  .meal-note {
    margin-top: 5px;
    font-size: 0.83rem;
    color: var(--ft-text-muted);
    word-break: break-word;
  }

  .meal-price {
    font-weight: 700;
    color: var(--ft-text);
    white-space: nowrap;
    padding-top: 1px;
  }

  .meal-actions {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
  }
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

// ============================================
// ZÁLOŽKY PŘÍJEM / VÝDEJ
// ============================================

.day-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ft-border);
}

.day-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  margin-bottom: -1px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ft-text-secondary);
  transition: var(--ft-transition);

  &:hover {
    color: var(--ft-text);
  }

  &.active {
    color: var(--ft-primary);
    border-bottom-color: var(--ft-primary);
  }

  .day-tab-count {
    background: var(--ft-bg-hover);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.76rem;
    font-weight: 700;
  }

  &.active .day-tab-count {
    background: var(--ft-primary-light);
    color: var(--ft-primary);
  }
}

// ============================================
// BILANCE
// ============================================

.balance-tile {
  &.deficit .summary-value {
    color: var(--ft-success);
  }

  &.surplus .summary-value {
    color: var(--ft-warning);
  }
}

// Spálené kalorie se odlišují od ceny, aby v seznamu nesplývaly
.meal-price.burn {
  color: var(--ft-warning);
}

// Spánek se zadává přímo v dlaždici, ať to není další dialog
.sleep-input-row {
  display: flex;
  align-items: baseline;
  gap: 6px;

  .sleep-input {
    width: 84px;
    padding: 0 6px;
    height: auto;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--ft-border);
    border-radius: 0;
    color: var(--ft-text);

    &:focus {
      background: transparent;
      box-shadow: none;
      border-bottom-color: var(--ft-primary);
    }
  }

  .sleep-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ft-text-secondary);
  }
}

// Návrh tréninku z plánu a cviky k náhradě nad seznamem aktivit
.planned-workout-card {
  margin-bottom: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--ft-primary);

  .planned-workout-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .planned-workout-icon {
    color: var(--ft-primary);
  }

  .planned-workout-title {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    color: var(--ft-text);
  }

  .planned-workout-plan {
    font-size: 0.82rem;
    color: var(--ft-text-muted);
  }

  .planned-workout-calories {
    color: var(--ft-warning);
    font-weight: 700;
    white-space: nowrap;
  }

  .planned-workout-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }

  .planned-workout-hint {
    flex: 1;
    font-size: 0.8rem;
    color: var(--ft-text-muted);
  }
}

.planned-workout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: var(--ft-radius);
  background: var(--ft-bg-card);
  font-size: 0.88rem;
  color: var(--ft-text-secondary);
}

.planned-workout-done svg {
  color: var(--ft-success);
}

.planned-workout-rest svg {
  color: var(--ft-text-muted);
}

.pending-replacements {
  margin-bottom: 14px;
  padding: 14px 18px;

  .pending-replacements-title {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ft-text-secondary);
  }

  .pending-replacement-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ft-border-light);

    &:last-child {
      border-bottom: none;
    }
  }

  .pending-replacement-main {
    flex: 1;
    min-width: 0;
  }

  .pending-replacement-name {
    font-weight: 600;
    color: var(--ft-text);
  }

  .pending-replacement-meta {
    font-size: 0.8rem;
    color: var(--ft-text-muted);
  }

  .template-pick-calories {
    color: var(--ft-warning);
    font-weight: 600;
    white-space: nowrap;
  }
}